В Kendo UI MVC, как мне поместить вкладку в окно с помощью javascript?

На моей странице просмотра у меня есть кнопка. Когда я нажимаю кнопку, я хочу, чтобы окно открывалось. В окне есть несколько вкладок, и на вкладке я хочу показать сетку. Позволит ли мне это сделать пользовательский интерфейс кендо?

 @(Html.Kendo().Window()
.Name("window")
.Title("About Alvar Aalto")
.Content(@<text>  
 @(Html.Kendo().TabStrip()
      .Name("tabstrip")
      .Items(tabstrip =>
      {
          tabstrip.Add().Text("Paris")
              .Selected(true)
              .Content(@<text>
                <div class="weather">
                    <h2>17<span>&ordm;C</span></h2>
                    <p>Rainy weather in Paris.</p>
                </div>
                <span class="rainy">&nbsp;</span>
              </text>);

          tabstrip.Add().Text("New York")
              .Content(@<text>
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.ContactName).Width(140);
        columns.Bound(c => c.ContactTitle).Width(190);
        columns.Bound(c => c.CompanyName);
        columns.Bound(c => c.Country).Width(110);
    })
    .HtmlAttributes(new { style = "height: 380px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Pageable(pageable => pageable
         .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
         .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Customers_Read", "Grid"))
    )
   )
  </text>);
      })
     )
  </text>)
 .Draggable()
 .Resizable()
 .Width(600)
 .Actions(actions => actions.Pin().Minimize().Maximize().Close())
 .Events(ev => ev.Close("onClose"))
  )

kendo-ui kendo-asp.net-mvc kendo-tabstrip kendo-window
person Lyly    schedule 11.04.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Лучшее, что вы можете сделать, это разделить это на несколько частичных представлений, чтобы сделать вашу жизнь немного менее сложной.

Окно кендо

@(Html.Kendo().Window()
    .Name("window")
    .Title("About Alvar Aalto")
    .Content(@Html.Partial("_TabStrip").ToHtmlString())
    .Draggable()
    .Resizable()
    .Width(600)
    .Actions(actions => actions.Pin().Minimize().Maximize().Close())
    .Events(ev => ev.Close("onClose"))

)

_TabStrip (частичный вид)

@(Html.Kendo().TabStrip()
.Name("tabstrip")
.SelectedIndex(0)
.Items(items =>
    {
        items.Add()
            .Text("Paris")
            .Content(@Html.Partial("_Weather").ToHtmlString());
        items.Add()
            .Text("New York")
            .Content(@Html.Partial("_Grid").ToHtmlString());
    })    
)

_Weather (частичный просмотр)

 <div class="weather">
     <h2>17<span>&ordm;C</span></h2>
     <p>Rainy weather in Paris.</p>
  </div>
 <span class="rainy">&nbsp;</span>

_Grid (частичный вид)

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
    .Name("grid")
    .Columns(columns =>
        {
        columns.Bound(c => c.ContactName).Width(140);
        columns.Bound(c => c.ContactTitle).Width(190);
        columns.Bound(c => c.CompanyName);
        columns.Bound(c => c.Country).Width(110);
    })
    .HtmlAttributes(new { style = "height: 380px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Pageable(pageable => pageable
         .Refresh(true)
         .PageSizes(true)
         .ButtonCount(5))
         .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Customers_Read", "Grid"))
        )
   )

Разделение контента с помощью частичных представлений позволит вам более гибко перемещать контент с помощью элементов управления Kendo друг в друга, и вам не придется беспокоиться о правильности блоков «текста».

person piercove    schedule 12.04.2014
comment
Привет, интересно, если я использую частичные представления, подобные этому '.Content(@Html.Partial(_Grid).ToHtmlString());', будет ли работать мое событие сетки? - person Lyly; 12.04.2014
comment
Можете ли вы сказать мне, как написать свой код с помощью javascript? Мне нужно передать динамический параметр в tabStrip. Я не могу написать их в таком формате: '.Content(@Html.Partial(_Weather).ToHtmlString());'. - person Lyly; 26.04.2014

arrow_upward
0
arrow_downward

События сетки и тому подобное локализованы в соответствующем частичном представлении так же, как это было в полном представлении. Частичные представления могут иметь свою собственную модель отдельно от родительского представления, что обеспечивает большую гибкость в приложении mvc.

person piercove    schedule 12.04.2014