javascript - Kendo UI 网格修复

Question

我有一个像这样的 Kendo UI 网格代码设置

<div class="row">
    <div class="col-md-1">
        &nbsp;
    </div>
    <div class="col-md-8">
        <div class="panel panel-default">                
            <div class="panel-heading">
                <span class="panel-control-margin">My Tasks</span>
                @Html.ActionLink("Add Task", "AddActivity", "Activities", new { @id = Model.CurrentUser.ID }, new { @class = "k-button k-primary" })                   
            </div>
            <div class="panel-body">
                @(Html.Kendo().Grid<ETS.Model.ActivitiesList>()
                    .Name("Activitygrid")
                    .Columns(columns =>
                    {
                    columns.Bound(c => c.DueDate).Title("Due Date").Template(@<text> @Html.ActionLink(@item.DueDate.ToShortDateString(), "EditActivity", "Activities", new { @id = @item.ID }, new {@style = item.DueDateStyle })</text>);
                    columns.Bound(p => p.Subject).Title("Subject").Template(@<text> @Html.ActionLink(@item.Subject, "EditActivity", "Activities", new { @id = @item.ID }, new { @style = "color:black; text-decoration:none;" })</text>);
                    columns.Bound(p => p.Status).Title("Status");
                    columns.Bound(p => p.Priority).Title("Priority");
                    columns.Bound(p => p.EntityName).Title("Related To");
                    columns.Bound(p => p.CreatedBy).Title("Assigned By").Template(@<text> @Html.ActionLink(@item.CreatedBy, "Activities", "User", new { @id =item.CreatedByID }, new {  @style = "color:black; text-decoration:none;"})</text>);
                        columns.Bound(p => p.FollowUp).Title("Follow Up");
                    })
                    .Pageable(pageable => pageable
                         .PageSizes(true)
                         .ButtonCount(5)
                         .Refresh(true)
                       )

                    .DataSource(ds => ds.Server().PageSize(20))
                    .Sortable()
                    //.HtmlAttributes(new { style = ""})
                    .BindTo(Model.Activities)
                )
            </div>
        </div>
        <div class="col-md-3">
            &nbsp;
        </div>
    </div>
</div>

当我运行它时，全屏显示效果很好。但在较小的设备上，网格会扭曲并且网格标题会关闭。我如何解决它？我添加了 .Scrollable()，它有帮助，但它将网格的高度设置为 200px。我希望它是自动的。我对此比较陌生。请帮忙。谢谢

Answer 1

首先请阅读此article来自 Telerik。

主要思想是您可以根据屏幕尺寸为小部件设置固定尺寸。类似这样的事情:

$(window).resize(kendo.throttle(function(){

        var width = $(window).width();

        if(width < 480){
          splitter.size('.k-pane:first','50%');
          splitter.collapse('.k-pane:first');
        }

        if(width < 1024 && width > 480){
          splitter.size('.k-pane:first','100px');
          splitter.expand('.k-pane:first');
        }

        if(width > 1024){
          splitter.size('.k-pane:first','300px');
          splitter.expand('.k-pane:first');
        }

      },250)).trigger('resize');

您也可以使用adaptive rendering您的网格的功能。