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');

您還可以為網格使用自適應渲染功能。