2016-04-16 2 views
0

У меня есть простая страница с некоторыми элементами управления, как текстовое поле, списка и сетки, это код:KendoUI MVC Как сделать элементы управления, реагирующие

<div id="order"> 
<p>Create Order</p> 
<ul id="fieldlist"> 
    <li> 
     <label for="client">Client:</label> 
     @(Html.Kendo().TextBox() 
      .Name("client") 
      .Enable(false) 
      .Value(@Model.ClientId.ToString() + " - " + @Model.Client) 
      .HtmlAttributes(new { style = "width: 100%" }) 
     ) 
    </li> 
    <li> 
     <label for="date">Date:</label> 
     @(Html.Kendo().TextBox() 
      .Name("date") 
      .Value(@DateTime.Now.ToShortDateString()) 
      .HtmlAttributes(new { style = "width: 100%" }) 
     ) 
    </li> 
    <li> 
     <label for="address">Address:</label> 
     @(Html.Kendo().DropDownList() 
      .Name("address") 
      .DataTextField("Name") 
      .DataValueField("AddressId") 
      .BindTo(@Model.Addresses) 
      .Value(@Model.MainAddress.ToString()) 
      .HtmlAttributes(new { style = "width: 100%" }) 
     ) 
    </li> 
    <li> 
     <label for="items">Items:</label> 
     @(Html.Kendo().Grid(Model.Detail) 
      .Name("items")     
      .Columns(columns => 
      { 
       columns.Bound(a => a.ItemId); 
       columns.Bound(a => a.Name).Width(200); 
       columns.Bound(a => a.Price).HtmlAttributes(new { style = "text-align:right" }).Width(100); 
       columns.Bound(a => a.Quantity).HtmlAttributes(new { style = "text-align:right" }).Width(100); 
      }) 
      .ToolBar(toolBar => 
      { 
       toolBar.Save().SaveText("Send Order"); 
      }) 
      .Editable(editable => editable.Mode(GridEditMode.InCell)) 
      .Scrollable() 
      .Pageable(pageable => pageable 
       .ButtonCount(5) 
      ) 
      .Resizable(resize => resize.Columns(true)) 
      .HtmlAttributes(new { style = "height:550px;" }) 
      .DataSource(datasource => datasource 
       .Ajax() 
       .Batch(true) 
       .PageSize(30) 
       .ServerOperation(false) 
       .Model(model => 
       { 
        model.Id(a => a.ItemId); 
        model.Field(a => a.Name).Editable(false); 
        model.Field(a => a.Price).Editable(false); 
        model.Field(a => a.Quantity); 
       }) 
       .Update(update => update.Action("SendOrder", "Orders")) 
     )) 
    </li> 
</ul> 

Я хотел бы знать, как я могу сделать эту страницу отзывчивой на разных экранах или устройствах. Я взглянул на telerik demos page на свой телефон, а страницы и элементы управления регулируются размером экрана.

Я создал проект, используя шаблон веб-приложения Telerik C# MVC, поэтому у меня есть все сценарии и все, я просто не знаю, какие классы или стили следует применять для такого поведения.

ответ

1

Контроллеры Kendo сами реагируют. Вам нужно установить элементы управления Kendo внутри структуры сетки Bootstrap.

Прежде всего, вам нужно включить скрипты Bootstrap и CSS на свою страницу. Затем вам необходимо включить версию начальной загрузки на Кендо CSS

  • kendo.bootstrap.min

  • kendo.common-bootstrap.min

  • kendo.common.min

Включить следующие файлы js

  • Kendo.all.min.js
  • kendo.aspnetmvc.min

Теперь просто создать Bootstrap

<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-6 col-sm-6 col-xs-12"> 
       <label for="client">Client:</label> 
      </div> 
     <div class="col-md-6 col-sm-6 col-xs-12"> 

       @(Html.Kendo().TextBox() 
          .Name("client") 
          .Enable(false) 
          .Value(@Model.ClientId.ToString() + " - " + @Model.Client) 
          .HtmlAttributes(new { style = "width: 100%" }) 
      ) 
     </div> 

     </div> 
    </div> 
    </body> 
Смежные вопросы