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>

我想知道如何在不同的屏幕或设备上响应此页面。我看了一下手机上的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>

KendoUI MVC如何使控件响应

1 个答案: