Multiple sort on Kendo Grid columns / DataSource - set sorting dynamically

Question

What I'm trying to accomplish is to apply an "automatic" secondary column sort when a user sorts a column in a kendo grid.

So in this JS fiddle example, if a user sorts by "Value", it'll also sort by "Name". Note that the 0s are sorted together, but the names aren't alphabetical. I'd like them to be alphabetical (the secondary sort).

Here's an attempt at overriding the datasource sorting to accomplish this. I'm taking the user's original sort and the adding an additional sort on "SortedName". Based on the sorting array that's logged, it seems to be close but is still not working.

Any other ideas on how to accomplish this?

Note: I don't want to allow users to sort by multiple columns. The real world example I'm using this for can have up to 50+ columns (unfortunately), so multiple sort can get confusing / unintuitive. And I'd like it to be done behind the scenes without extra user interaction.

Example code for overriding kendo datasource sort():

dataSource.originalSort = dataSource.sort;
dataSource.sort = function () {
    // take the user's sort and apply sorting on an additional column
    // the sort array should look like this:
    [
        { field: "Value", dir: "asc" }, // this is what the user sorted by
        { field: "SortedName", dir: "asc" }, // and I'm adding this
    ]
    return dataSource.originalSort.apply(this, arguments);
}

Answer 1

Please try with the below code snippet.

<div id="grid">
    </div>
    <script>
        var dataSource = new kendo.data.DataSource({
            data: [
                { Name: "Lisa", Value: 1 },
                { Name: "Dan", Value: 12 },
                { Name: "Ken", Value: 5 },
                { Name: "Arthur", Value: 15 },
                { Name: "Bob", Value: 0 },
                { Name: "Sally", Value: 0 },
                { Name: "Alexis", Value: 0 },
                { Name: "Cody", Value: 0 },
                { Name: "Steve", Value: 0 },
                { Name: "Andrew", Value: 0 },
                { Name: "Duke", Value: 0 }
            ],
            schema: {
                model: {
                    fields: {
                        Name: { type: "string" },
                        Value: { type: "number" }
                    }
                }
            }
        });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            dataBound: function (e) {
                var isSortedByName = false;
                var grid = $("#grid").data("kendoGrid");
                var ds = grid.dataSource;
                var sort = ds.sort();
                if (sort) {
                    for (var i = 0; i < sort.length; i++) {
                        if (sort[i].field == "Name") {
                            isSortedByName = true;
                        }
                    }
                    if (isSortedByName == false) {

                        sort.push({ field: "Name", dir: "asc" });
                        ds.sort(sort);
                    }
                }
            },
            columns: [
                { field: "Name" },
                { field: "Value" }
            ],
            sortable: true
        });
    </script>