Kendo UI 网格列排序刷新整个页面

Question

我有一个包含两个选项卡的页面。第一个选项卡包含 Kendo 个条形图。选项卡 2 包含一个用于搜索结果的 kendo 网格和两个包含 1 个 kendo 网格的选项卡，每个用于详细信息。搜索结果网格的 "Change" 事件调用 ajax 以使用所选项目的详细信息更新 2 个详细信息网格。我希望 2 个细节网格可以排序。但是，当我单击一列对数据进行排序时，整个页面都会刷新并将我带回到包含 kendo 条形图的第一个选项卡。搜索结果网格是可排序的，并且按预期工作。当我单击要排序的列时，它不会刷新整个页面。那么，如何在不刷新页面的情况下让 2 个详细信息网格恢复？

注意：我还注意到，当屏幕因排序而刷新时，我的控制器操作没有被调用。所以，它刷新了屏幕，但实际上并没有重新执行我的控制器代码——不确定这是否有帮助。

HTML 被 AJAX 呼叫取代：

<div id="groupDetails">
    <div class="panel-body">
        <ul class="nav nav-tabs" id="detailsTabs">
            <li class="active"><a href="#tab-diagnosis" data-toggle="tab">Diagnosis</a></li>
            <li><a href="#tab-procedure" data-toggle="tab">Procedure</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab-diagnosis" />
            <div class="tab-pane" id="tab-procedure" />
        </div>
    </div>
</div>

搜索结果网格：

 $("#searchResults").kendoGrid({
        dataSource: { data: mdl,},
        selectable: true,
        sortable: true,
        pageable: false,
        change: function(e) {
            var itm = this.dataSource.view()[this.select().index()];
            $.ajax({
                type: "GET",
                url: "@Url.Action("GroupDetails", "Analytics")",
                data: {idx: itm.Idx, name: itm.Name},
                success: function (r) {   
                        groupDetails.html('');                        
                        groupDetails.html(r);
                }
            });
        }
  });

AJAX 结果：

        <div class="panel-body">
    <ul class="nav nav-tabs" id="myTab2">
        <li class="active"><a href="#tab-diagnosis" data-toggle="tab">Diagnosis</a></li>
        <li><a href="#tab-procedure" data-toggle="tab">Procedure</a></li>
    </ul>
    <div class="tab-content">
        <h1>Service Line: @Model.Name</h1>
        <div class="tab-pane active" id="tab-diagnosis">
            @Html.Kendo().Grid(Model.DiagnosisDetailsResults).Name("DiagDetailsResults").Columns(
                column =>
                {
                    column.Bound(c => c.Name).Title("Description");
                    column.Bound(c => c.TotalCharged).Title("Charged").Format("{0:c0}").Width(175);
                    column.Bound(c => c.Totalpayments).Title("Revenue").Format("{0:c0}").Width(175);
                }).Sortable().Scrollable().Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)).DataSource(dataSource => dataSource.Server().Model(model => model.Id(item => item.Idx)))
        </div>


        <div class="tab-pane" id="tab-procedure">
            @Html.Kendo().Grid(Model.ProcedureDetailsResults).Name("ProcedureDetailsResults").Columns(
                column =>
                {
                    column.Bound(c => c.Name).Title("Description");
                    column.Bound(c => c.TotalCharged).Title("Charged").Format("{0:c0}").Width(175);
                    column.Bound(c => c.Totalpayments).Title("Revenue").Format("{0:c0}").Width(175);
                }).Sortable().Scrollable().Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)).DataSource(dataSource => dataSource.Server().Model(model => model.Id(item => item.Idx)))
        </div>
    </div>
</div>

Answer 1

发生这种情况是因为您的详细信息网格都是服务器绑定网格，因此当您尝试对网格进行排序时，当然会向服务器发送请求并刷新页面。如果不想排序刷新页面，需要把数据源改成Ajax

<div class="tab-pane active" id="tab-diagnosis">
    @Html.Kendo().Grid(Model.DiagnosisDetailsResults).Name("DiagDetailsResults").Columns(
        column =>
        {
            column.Bound(c => c.Name).Title("Description");
            column.Bound(c => c.TotalCharged).Title("Charged").Format("{0:c0}").Width(175);
            column.Bound(c => c.Totalpayments).Title("Revenue").Format("{0:c0}").Width(175);
        }).Sortable().Scrollable().Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)).DataSource(dataSource => dataSource.Ajax().ServerOperation(false).Model(model => model.Id(item => item.Idx)))
</div>


<div class="tab-pane" id="tab-procedure">
    @Html.Kendo().Grid(Model.ProcedureDetailsResults).Name("ProcedureDetailsResults").Columns(
        column =>
        {
            column.Bound(c => c.Name).Title("Description");
            column.Bound(c => c.TotalCharged).Title("Charged").Format("{0:c0}").Width(175);
            column.Bound(c => c.Totalpayments).Title("Revenue").Format("{0:c0}").Width(175);
        }).Sortable().Scrollable().Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)).DataSource(dataSource => dataSource.Ajax().ServerOperation(false).Model(model => model.Id(item => item.Idx)))
</div>

顺便问一下，为什么您将 Razor 用于细节网格，而不是主要网格？保持一致。

Kendo UI 网格列排序刷新整个页面

Kendo UI Grid column sorting refreshes entire page

kendo-ui

kendo-grid

kendo-asp.net-mvc