How Do I Synch Kendo UI Grid Datasource On Sort?

Question

Okay, so we have some legacy code which uses Kendo UI Grids.

After sorting the grid, we need to be able to read the DataSource item which corresponds to each row, by iterating through the JQuery selected 'tr' list and then select the DataSource item based on the index of the row itself.

The problem exists in that the DataSource doesn't sort when the grid sorts, so you cannot simply get the index of each row and look up the corresponding DataSource item, like this...

    $('td:nth-child(' + colIndex + ')', $('tbody', grid.element).eq(0)).each(
        function (iIndex) {
            var td = $(this);
            var tr = td.parent();
            var data = grid.dataSource.data()[iIndex];

            if (data.Status.toLowerCase() !== 'c') {
                totalBalanceDue = (totalBalanceDue - data.Payment) > 0 ? (totalBalanceDue - data.Payment) : 0;
            };
            td.html('$' + totalBalanceDue.formatMoney(2, '.', ','));
        }
    ); 

Answer 1

This is all not needed. All you need to use is the view () method of the dataSource.

Answer 2

Looks like I have to answer this question myself.

I have found, by scouring the documentation and the web, that the way I'm approaching this is not necessarily accurate. Instead of attempting to sort the array to match the rows of the gridview, I can use the data-uid attribute of the row, to get the corresponding dataitem from the DataSource.data() array, by using the dataSource.getByUid() function.

This is working just as I need it to.

       $('td:nth-child(' + colIndex + ')', $('tbody', grid.element).eq(0)).each(
            function (iIndex) {
                var td = $(this);
                var tr = td.parent();

                //gets the corresponding dataitem for the selected row.  
                var data = grid.dataSource.getByUid(tr.data("uid"));
                if (data.Status.toLowerCase() !== 'c') {
                    totalBalanceDue = (totalBalanceDue - data.Payment) > 0 ? (totalBalanceDue - data.Payment) : 0;
                };
                td.html('$' + totalBalanceDue.formatMoney(2, '.', ','));
            }
        );