CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcsortingkendo-grid
hyprsleepy
hyprsleepy

Reputation: 1810

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

I have a grid which is seen below.

I have already made it Sortable as you can see. But when someone clicks search I want the grid sorted by a particular field - the SurveyDueDate.

How do I set the field the grid is sorted by and if it is ascending or descending from the javascript call in the search button click event?

Everything I look at on the grid only shows how to make it Sortable and doesn't say how to explicitly set the sort.

@(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")
        )
    )
)

Upvotes: 3

Views: 4188

Answers (1)

hyprsleepy
hyprsleepy

Reputation: 1810

I figured it out.

Inside the javascript call I put the following code:

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

There is a sort method for the datasource of a kendo grid and you can pass it an array that holds the field and direction of the sort.

Upvotes: 3

Related Questions