Can not move row after performing "OrderBy" in Kendo Grid

Question

I have created a small script that removes and inserts row to first place in a Kendo Grid. However, every time I order by any column, that particular script does not work anymore and I can not move any row after that. I have tried reading the dataSource again, also tried refreshing the grid, but without anything happening.

Here is my script function (which b.t.w. works very well before orderby column):

function onFetchItem(gridName) {
    $("#errorMsg").text("");
    var ids = gridName.split("_");
    var item = $("#itemSearch_" + ids[1]).val();
    var grid = $("#" + gridName).data("kendoGrid");

    var data = grid.dataSource.data();
    var dataItem = $.grep(data, function (d) {
        if (d.Item == item.toUpperCase()) {
            grid.dataSource.remove(d);
            grid.dataSource.insert(0, d);
            //grid.dataSource.read();
            return d;
        }
        return null;
    });
    //grid.refresh();
    if (dataItem[0] == null) {
        $("#errorMsg").text("none");
    } 
}

Like I said, I tried reading the dataSource again and refresh the grid as you can see in my commented code. When I do that, the row item bounces back to it´s original place, probably due to reading the dataSource again. How can I move row item after orderby action on the grid?

I´ve also created a small playground to try out similar code to mine:

http://jsbin.com/sazah/1/edit

Try it, order by the first column and see that I can not move any record after that.

Answer 1

When you do a sort, that sort still applies after doing the remove and insert so it is not that the move doesn't work, the question is that you are still sorting and then it seem that doesn't work.

Example 1: I've added an order column to the data and I have two elements with the same order. If you sort by order, "baz" element is now second but if you click on move button it will go to the first position since it is possible having it first but still ordered.

dataSource: [
    { order: 1, foo: "foo" },
    { order: 2, foo: "bar" },
    { order: 1, foo: "baz" }
],

Example 2: On this example, you have the same order column but this time "baz" element has a order value that is not the minimum. Here if you sort by order and then click on move you will see that "baz" moves to the first element with that same order value.

dataSource: [
    { order: 1, foo: "foo" },
    { order: 2, foo: "bar" },
    { order: 2, foo: "baz" }
],

Example 3: But if you want to move it to the first position, you need to remove the order by calling grid.dataSource.sort({}); before remove and insert.

function move(col) {
    var item = "baz";
    var grid = $("#grid").data("kendoGrid"); 

    var data = grid.dataSource.data();
    var dataItem = $.grep(data, function (d) {
            if (d.foo == item) {
            console.log(col);
            grid.dataSource.sort({});
            grid.dataSource.remove(d);
            grid.dataSource.insert(0, d);
            //grid.dataSource.read();
            return d;
            }
            return false;
            });
    //grid.refresh();
}