Question

I am working on a project where we use KENDOUI for the front-end with jQuery/Javascript coding to manage anything that we can’t do with the framework itself.

I have a KENDO Grid which needs client side sorting and here is what I am trying to do –

    var tPositiondata = _DetailsGridDS.data();
    // sort position datasource in order to bind treeview
    tPositiondata = tPositiondata.toJSON().sort(function (a, b) {
        {
            if ((a.DisplayText.localeCompare(b.DisplayText)) < 0) { return -1; }
            else if ((a.DisplayText.localeCompare(b.DisplayText)) > 0) { return 1; }
        }
    });

    //re-initialize the grid with new datasource
    $("#DivDetailsTable").empty();
    $("#DivDetailsTable").kendoGrid({
        autobind: false,
        scrollable: true,
        height: 333,
        pageSize: 10,
        dataSource: tPositiondata,
        dataBound: OnReceivedDataFromDatasource,
        columns: [
    {
        field: "UniqueValue",
        title: _ColumnHeaderUniqueValue
    },
    {
        //field: "DisplayTextTranslation",
        title: _ColumnHeaderDisplayText,
        template: '#= GetTranslation(Id) #'
    },
    {
        field: "CodeAttribute",
        title: _ColumnHeaderCodeAttribute
    },
    { command: [{ text: _ButtonEdit, className: "k-button k-button-icontext buttonEdit k-grid-Edit" }, { text: _ButtonDelete, className: "k-button k-button-icontext buttonDelete k-grid-Delete" }, { text: "&nbsp;", className: "buttonUp", width: 15 }, { text: "&nbsp;", className: "buttonDown", width: 15}], text: "", title: "&nbsp;", width: 230 }
    ],
        editable: "inline"
    });

Now the trouble is that , the variable “tPositionData” cannot be re-assigned to “_DetailsGridDS” because they are obviously not the same type or format. Because of this, my global variable “_DetailsGridDS” doesn’t have the updated sorted data. If I refer to it somewhere else in code, then I am not having sorted data.

Can someone please help me to either “undo” / “reverse” the .toJSON call after sorting so that I can re-assign it to _DetailsGridDS or can someone suggest a work-around so that my global var is always updated with latest sorted data ?

Answer 1

Thanks a lot for all the tips. Ultimately my solution was something like this :

function SortGrid() {
if ($("#DivDetailsTable").data("kendoGrid") != undefined) {
    if ($("#inputSortByValueName").is(":checked")) {
        $("#DivDetailsTable").data("kendoGrid").dataSource.sort({ field: "DisplayText", dir: "asc" });
    }
    else {
        $("#DivDetailsTable").data("kendoGrid").dataSource.sort({ field: "DisplaySequence", dir: "asc" });
    }
}

}

This worked out just fine for me. Thank you again 🙂