Kendo UI MVC 如何使控件响应

Question

我有一个简单的页面，其中包含一些控件，例如文本框、下拉列表和网格，这是代码：

<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>

我想知道如何使此页面在不同的屏幕或设备上响应。我查看了 phone 上的 telerik demos page，页面和控件会根据屏幕大小进行调整。

我使用模板 Telerik C# MVC Web 应用程序创建了项目，所以我拥有所有脚本和一切，我只是不知道我应该应用哪个类或样式来实现该行为。

Answer 1

Kendo 控件本身是响应式的。您需要将 Kendo 控件放在 Bootstrap 网格结构中。

首先，您需要在页面中包含 Bootstrap 脚本和 CSS。然后你需要在 Kendo CSS

上包含 bootstrap 版本

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>

Kendo UI MVC 如何使控件响应

KendoUI MVC How to make controls responsive

c#

asp.net-mvc

telerik

kendo-ui

kendo-asp.net-mvc