Moving multiple records up/down in Grid while maintaining selections

[Matt]

I need the ability for users to reorder the selected records within a grid using external buttons (and keep them selected after they're moved in case they want to move them again).  I have the logic working to move a single row and keep it selected, but am stuck on how to move and keep multiple records selected.  Whenever I have multiple items selected, only the first (e.g., top-most) is moved.  The remaining ones stay where they are.  (The logic that I followed to keep the items selected works as it should; I'm pretty sure it's the logic I implemented to actually move the items that's the culprit.)

HTML:

 

01.<div id="panels">
02.    <div id="visibleGrid"></div>
03.    <div id="commands">
04.        <div><a href="#" id="moveItemToTop" class="k-button" style="width:150px;">Move To Top</a></div>
05.        <div><a href="#" id="moveItemUp" class="k-button"style="width:150px;">Move Up</a></div>
06.        <div><a href="#" id="moveItemDown" class="k-button"style="width:150px;">Move Down</a></div>
07.        <div><a href="#" id="moveItemToBottom" class="k-button"style="width:150px;">Move to Bottom</a></div>
08.    </div>
09.</div>

JavaScript (on documentLoad):

 

001.var uids = [];
002.var selectedOrders = [];
003.var idField = "Id";
004.
005.var ds1 = {
006.    data:     createRandomData(10),
007.    pageSize: 10,
008.    schema:   {
009.        model: {
010.            id:     "Id",
011.            fields: {
012.                Id:        { type: 'number', editable: true },
013.                FirstName: { type: 'string', editable: true  },
014.                LastName:  { type: 'string', editable: true  }
015.            }
016.        }
017.    }
018.};
019.
020.var visibleGrid = $("#visibleGrid").kendoGrid({
021.    dataSource: ds1,
022.    editable: "popup",
023.    selectable: "multiple",
024.    scrollable: true,
025.    change: function (e, args) {
026.        var grid = e.sender;
027.        var items = grid.items();
028.
029.        items.each(function (idx, row) {
030.            var idValue = grid.dataItem(row).get(idField);
031.            if (row.className.indexOf("k-state-selected") >= 0) {
032.                selectedOrders[idValue] = true;
033.            } else if (selectedOrders[idValue]) {
034.                delete selectedOrders[idValue];
035.            }
036.        });
037.    },
038.    dataBound: function (e) {
039.        var grid = e.sender;
040.        var items = grid.items();
041.        var itemsToSelect = [];
042.        items.each(function (idx, row) {
043.            var dataItem = grid.dataItem(row);
044.            if (selectedOrders[dataItem[idField]]) {
045.                itemsToSelect.push(row);
046.            }
047.        });
048.
049.        e.sender.select(itemsToSelect);
050.    },
051.    columns:    [
052.        { field: "Id", width: 30, title: "Id" } ,
053.        { field: "FirstName", width: 90, title: "First Name" },
054.        { field: "LastName", width: 90, title: "Last Name" }
055.    ]
056.}).data("kendoGrid");
057.
058./* move up */
059.$("#moveItemUp").on("click", function (idx, elem) {
060.
061.    var selected = visibleGrid.select();
062.    if (selected.length > 0) {
063.
064.        $.each(selected, function (idx, elem) {
065.            var dataItem = visibleGrid.dataItem($(this));
066.            var index = visibleGrid.dataSource.indexOf(dataItem);
067.
068.            if (index > 0) {
069.                var newIndex = index - 1;
070.                visibleGrid.dataSource.remove(dataItem);
071.                visibleGrid.dataSource.insert(newIndex, dataItem);
072.            }
073.        });
074.    }
075.
076.    movingItems = false;
077.});
078.
079./* move to top */
080.$("#moveItemToTop").on("click", function (idx, elem) {
081.
082.    var selected = visibleGrid.select();
083.    var firstIndex = -1;
084.
085.    if (selected.length > 0) {
086.        $.each(selected, function (idx, elem) {
087.
088.            if (firstIndex < 0)
089.            {
090.                firstIndex = 0;
091.            }
092.            else
093.            {
094.                firstIndex++;
095.            }
096.
097.            var dataItem = visibleGrid.dataItem($(this));
098.            var index = visibleGrid.dataSource.indexOf(dataItem);
099.            var newIndex = firstIndex;
100.
101.            if (newIndex != index) {
102.                visibleGrid.dataSource.remove(dataItem);
103.                visibleGrid.dataSource.insert(newIndex, dataItem);
104.            }
105.        });
106.    }
107.
108.    return false;
109.});
110.
111./* move down */
112.$("#moveItemDown").on("click", function (idx, elem) {
113.    var selected = visibleGrid.select();
114.    if (selected.length > 0) {
115.
116.        $.each(selected, function (idx, elem) {
117.            var dataItem = visibleGrid.dataItem($(this));
118.            var index = visibleGrid.dataSource.indexOf(dataItem);
119.            var maxIndex = visibleGrid.dataSource._data.length - 1;
120.
121.            if (index < maxIndex) {
122.                var newIndex = index + 1;
123.
124.                visibleGrid.dataSource.remove(dataItem);
125.                visibleGrid.dataSource.insert(newIndex, dataItem);
126.            }
127.        });
128.    }
129.
130.    return false;
131.});
132.
133./* move to bottom */
134.$("#moveItemToBottom").on("click", function (idx, elem) {
135.    var selected = visibleGrid.select();
136.    var lastIndex = -1;
137.
138.    if (selected.length > 0) {
139.
140.        if (lastIndex < 0) {
141.            lastIndex = visibleGrid.dataSource._data.length - 1;
142.        }
143.        else {
144.            lastIndex--;
145.        }
146.
147.        $.each(selected, function (idx, elem) {
148.            var dataItem = visibleGrid.dataItem($(this));
149.            var index = visibleGrid.dataSource.indexOf(dataItem);
150.            var newIndex = lastIndex;
151.
152.            if (newIndex != index) {
153.                visibleGrid.dataSource.remove(dataItem);
154.                visibleGrid.dataSource.insert(newIndex, dataItem);
155.            }
156.        });
157.    }
158.
159.    return false;
160.});

CSS:

 

01.* {
02.    font-family: "Verdana", sans-serif;
03.    font-size: 10pt;
04.}
05.
06.#panels {
07.    display: table-row;
08.}
09.
10.#visibleGrid {
11.    width: 400px;
12.    display: table-cell;
13.}
14.
15.#commands div {
16.    padding-left: 15px;
17.    padding-bottom: 3px;
18.}

You can also see the project in action here.  

Any thoughts on what I should do?  I've checked out the documentation, as well as searches, but have come up empty thus far.

[Matt]

After an afternoon of playing around on fiddle, I finally came up with a solution that works.  Here's a snippet of the code that moves each selected row up one row:

01./* move up */
02.$("#moveItemUp").on("click", function (idx, elem) {
03.
04.    var firstItemSelected = false;
05.
06.    selected = visibleGrid.select();
07.    selectedIndexes = [];
08.
09.    if (selected.length > 0) {
10.
11.        /* capture the indexes of those that are selected */
12.        $.each(selected, function (idx, elem) {
13.
14.            var dataItem = visibleGrid.dataItem($(this));
15.            var index = visibleGrid.dataSource.indexOf(dataItem);
16.
17.            if (index == 0) {
18.                firstItemSelected = true;
19.            }
20.
21.            selectedIndexes.push(index);
22.        });
23.
24.        /* if they've selected the first item, don't let them do anything */
25.        if (firstItemSelected == true) {
26.            return;
27.        }
28.
29.        /* move each item to the new location - one row higher than the old row */
30.        for (i = 0; i < selectedIndexes.length; i++) {
31.            var oldIndex = selectedIndexes[i];
32.            var newIndex = oldIndex - 1;
33.
34.            moveDataItem(oldIndex, newIndex);
35.        }
36.    }
37.});
38.
39./* used by each of the up/down buttons to move the selected items */
40.function moveDataItem(oldIndex, newIndex){
41.    var dataItem = visibleGrid.dataSource.at(oldIndex);
42.
43.    visibleGrid.dataSource.remove(dataItem);
44.    visibleGrid.dataSource.insert(newIndex, dataItem);
45.}

The project on fiddle has been updated in case you want to take a look, but that being said, if you have other suggestions on how to better accomplish this, I'm all ears!

[Rosen]

Hello Matt,

We are glad that you have manged to achieve the functionality you were after. The approach used in the sample seems valid.

Let us know if you need additional assistance.

Regards,
Rosen
Telerik