Hello there
Before creating an example I wanted to ask that way: I'm using the Sortable widget of Kendo UI. It works fine so far. Now I want to get the ID of ALL items inside the sortable DIV container AFTER a sort has been taken place. Lets say there are 3 DIV elements inside the sortable container, each with an element called sortid (values 1, 2 and 3). I use therefore the change event of sortable:
…
change: function(e) {
for (var i=0; i<3; i++) {
alert($("#" + sortobjectdiv + i + " input[id='sortid']").val());
}
} ...
Now I drag the DIV element with sortid = 3 (the most lower one on display) between the DIV elements with sortid 1 and 2 inside, the change event trigger output (for…):
1, 2, 3 -> thats the original setting as I wouldn't have changed anything. I would have expected the output: 1, 3, 2
Now I see the 3 DIV elements with their sortid in order of 1, 3, 2
When I now drag the last DIV element with sortid = 2 between the elements with sortid 1 and 3 the output is: 1, 2, 3 -> thats correct (for now). When dragging now DIV element with sortid = 3 between 1 and 2 again, the output is wrong again, next time correct again, over next time wrong again, etc.
I guess I do something wrong or my thinking about the change behaviour is wrong. That described output is what I would expect on "end" event but comparing those two in my case do have exactly always have the same output! I thought the change event would fire AFTER the DOM tree has been refreshed.
Any hint?
4 Answers, 1 is accepted
Rank 1
Iron
I have created a sample with 3 elements showing the same behaviour:
When moving element 3 between element 1 and 2 the order output inside the change event is: 1, 2, 3 instead of 1, 3, 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="sortable">
<span id="element1">Item1</span>
<span id="element2">Item2</span>
<span id="element3">Item3</span>
</div>
<script>
$("#sortable").kendoSortable({
axis: "x",
change: function(e) {
for (var i=1; i<4; i++) {
alert($('#element'+i).attr('id'));
}
}
});
</script>
</body>
</html>
If there is another way to get an uptodate order of all sortable elements, I don't care. It just has to to work right.
Rank 1
Iron
I have created a sample with 3 elements showing the same behaviour:
When moving element 3 between element 1 and 2 the order output inside the change event is: 1, 2, 3 instead of 1, 3, 2
<p> <!DOCTYPE html><br><html><br><head><br> <meta charset="utf-8"><br> <title>Kendo UI Snippet</title><br><br> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css"><br> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css"><br> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css"><br> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.dataviz.min.css"><br> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.dataviz.default.min.css"><br> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css"><br><br> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><br> <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script><br></head><br><body><br> <br><div id="sortable"><br> <span id="element1">Item1</span><br> <span id="element2">Item2</span><br> <span id="element3">Item3</span><br></div><br><br><script><br> $("#sortable").kendoSortable({<br> axis: "x",<br>change: function(e) {<br>for (var i=1; i<4; i++) {<br>alert($('#element'+i).attr('id'));<br>}<br>}<br> });<br></script><br></body><br></html></p> <p></p>
I have examined your code and the reason behind displaying the same order regardless of the sorting is due to the fact that you are getting reference to the elements based on their index and you are always passing the same index order: 1, 2, 3:
for (var i=1; i<4; i++) { alert($('#element'+i).attr('id'));}For getting the sorted elements you can use the Sortable items method:
var sortable = $("#sortable").data("kendoSortable");var items = sortable.items();for (var i = 0; i < items.length; i++) { alertitems[i].id);}Hope this helps.
Regards,
Konstantin Dikov
Telerik
Rank 1
Iron