如何在ASP MVC页面中手动排序剑道UI网格

How do you manually sort a Kendo UI Grid in ASP MVC page?

本文关键字：排序 网格 UI ASP MVC      更新时间：2023-09-26

我有一个网格，如下所示。

我已经使它排序，如你所见。但是当有人点击搜索时，我希望网格按特定字段排序- SurveyDueDate。

我如何设置字段的网格排序，如果它是上升或下降从javascript调用在搜索按钮单击事件?

我在网格上看到的所有东西都只显示了如何使其可排序，而没有说明如何显式设置排序。

@(Html.Kendo().Grid<SurveyMaintenance.Models.StoreSurveyList>()
    .Name("idGridStoreSurveyList")
    .HtmlAttributes(new { ID = "idGridStoreSurveyList", Class = "k-grid-header" })
    .Columns(columns =>
    {
        columns.Bound(p => p.IsSelected)
            .ClientTemplate("<input type='checkbox' class='StoreSurveyListDeleteItemRequest' #= (IsSelected === true) ? checked='checked' : '' # onclick='StoreSurveyListFunctions.toggleStoreSurveyListDeleteItemRequestSelection(this)' />")
            .HeaderTemplate("<input type='"checkbox'" id='"toggleAllStoreSurveyListDeleteItems'"/>")
            .Width(40)
            .Filterable(false)
            .Sortable(false);
        columns.Bound(p => p.SurveyDueDate)
            .Template(@<text></text>)
            .ClientTemplate("#= kendo.toString(SurveyDueDate,'MM/dd/yyyy') #")
            .Width(130);
        columns.Bound(p => p.StoreCompleted)
            .Width(110);
        columns.Bound(p => p.SurveyName);
        columns.Bound(p => p.DeliveryDate)
            .Template(@<text></text>)
            .ClientTemplate("#= kendo.toString(DeliveryDate,'MM/dd/yyyy') #")
            .Width(130);
        columns.Bound(p => p.SupplierName)
            .Width(200);
    })
    .Sortable()
    .Filterable()
    .Navigatable()       
    .Resizable(resize => resize.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(500)
        .ServerOperation(false)
        .Events(events => events.Error("grid_error_handler"))
        .Model(model => { model.Id(p => p.SurveyID); })
        .Read(
           read => read.Action("GetStoreSurveyList", "StoreSurveyList").Data("additionalDataStoreSurveyList")
        )
    )
)

我明白了。

在javascript调用中，我放入了以下代码:

    var kendoGrid = $("#idGridSurveyList").data("kendoGrid");
    var dsSort = [];
    dsSort.push({ field: "DeliveryDate", dir: "desc" });
    kendoGrid.dataSource.sort(dsSort);

有一个用于剑道网格数据源的排序方法，您可以向它传递一个数组，该数组保存排序的字段和方向。

相关文章：