Question

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

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

被AJAX调用取代的HTML：

<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 Grid列排序刷新整个页面

1 个答案: