I have a kendo grid and want certain rows to stay pinned at the top of the grid after sorting. I can achieve this by specifying a custom sort on every column. For example:

<script>
    var ds = new kendo.data.DataSource({
        data: [
            { name: "Jane Doe", age: 30, height: 170, pinToTop: false },
            { name: "John Doe", age: 33, height: 180, pinToTop: false },
            { name: "Sam Doe", age: 28, height: 185, pinToTop: true },
            { name: "Alex Doe", age: 24, height: 170, pinToTop: false },
            { name: "Amanda Doe", age: 25, height: 165, pinToTop: true }
        ]
    });

    $('#grid').kendoGrid({
        dataSource: ds,
        sortable: {mode: 'single', allowUnsort: false},
        columns: [{
            field: "name",
            title: "Name",
            sortable: {
                pare: function (a, b, desc) {
                    if (a.pinToTop && !b.pinToTop) return (desc ? 1 : -1);
                    if (b.pinToTop && !a.pinToTop) return (desc ? -1 : 1);
                    if (a.name > b.name) return 1;
                    else return -1;
                }
            }
        }
        //Other columns would go here
        ]
    });
</script>

This works fine when the grid is sorted by the user clicking on a column header. However, if I want to sort the grid using Javascript code, like so:

$('#grid').data('kendoGrid').dataSource.sort({field: 'age', dir: 'asc'});

The pinToTop field is ignored. This is because the sort is performed on the DataSource, but the custom sort logic is part of the grid.

JSFiddle Example

I need to either:

• Be able to specify custom sort logic in the DataSource, so that when I sort the DataSource using JavaScript, the pinned rows stay at the top.

Or:

• Be able to execute a sort of the grid itself, rather than the DataSource, from JavaScript.

I have a kendo grid and want certain rows to stay pinned at the top of the grid after sorting. I can achieve this by specifying a custom sort on every column. For example:

<script>
    var ds = new kendo.data.DataSource({
        data: [
            { name: "Jane Doe", age: 30, height: 170, pinToTop: false },
            { name: "John Doe", age: 33, height: 180, pinToTop: false },
            { name: "Sam Doe", age: 28, height: 185, pinToTop: true },
            { name: "Alex Doe", age: 24, height: 170, pinToTop: false },
            { name: "Amanda Doe", age: 25, height: 165, pinToTop: true }
        ]
    });

    $('#grid').kendoGrid({
        dataSource: ds,
        sortable: {mode: 'single', allowUnsort: false},
        columns: [{
            field: "name",
            title: "Name",
            sortable: {
                pare: function (a, b, desc) {
                    if (a.pinToTop && !b.pinToTop) return (desc ? 1 : -1);
                    if (b.pinToTop && !a.pinToTop) return (desc ? -1 : 1);
                    if (a.name > b.name) return 1;
                    else return -1;
                }
            }
        }
        //Other columns would go here
        ]
    });
</script>

This works fine when the grid is sorted by the user clicking on a column header. However, if I want to sort the grid using Javascript code, like so:

$('#grid').data('kendoGrid').dataSource.sort({field: 'age', dir: 'asc'});

The pinToTop field is ignored. This is because the sort is performed on the DataSource, but the custom sort logic is part of the grid.

JSFiddle Example

I need to either:

• Be able to specify custom sort logic in the DataSource, so that when I sort the DataSource using JavaScript, the pinned rows stay at the top.

Or:

• Be able to execute a sort of the grid itself, rather than the DataSource, from JavaScript.

• javascript
• sorting
• kendo-ui
• kendo-grid
• kendo-datasource

Share Improve this question Follow edited May 29, 2019 at 9:01 Lanki 15011 silver badge1010 bronze badges asked Oct 29, 2014 at 15:49 AlliterativeAliceAlliterativeAlice 12.6k99 gold badges5555 silver badges7171 bronze badges 1

• Can you perform the custom sorting on the server side? – CSharper Commented Oct 29, 2014 at 17:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

It wasn't quite what I wanted, but I was able to solve this issue by sorting on multiple fields and including the pinToTop field first:

$('#grid').data('kendoGrid').dataSource.sort([{field: 'pinToTop', dir: 'desc'},{field: 'age', dir: 'asc'}]);

This is an old question, but here is an answer for those ing across this question, like I did.

Define the parison as a function and pass it to the DataSource:

var pareName = function (a, b, desc) {
            if (a.pinToTop && !b.pinToTop) return (desc ? 1 : -1);
            if (b.pinToTop && !a.pinToTop) return (desc ? -1 : 1);
            if (a.name > b.name) return 1;
            else return -1;
        }

$('#grid').data('kendoGrid').dataSource.sort({field: 'age', dir: 'asc', pare: pareName);

Works in version 2017.2.621