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

首先阅读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');

您还可以为网格使用自适应渲染功能。