This is a migrated thread and some comments may be shown as answers.

No difference between end and change

4 Answers 43 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
Tayger
Top achievements
Rank 1
Iron
Tayger asked on 26 Oct 2015, 03:44 PM

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

Sort by
0
Tayger
Top achievements
Rank 1
Iron
answered on 26 Oct 2015, 04:19 PM

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.

0
Tayger
Top achievements
Rank 1
Iron
answered on 26 Oct 2015, 04:20 PM

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.rtl.min.css"><br>
<br>
    <script src="http://code.jquery.com/jquery-1.9.1.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>
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.

0
Accepted
Konstantin Dikov
Telerik team
answered on 27 Oct 2015, 01:13 PM
Hi Farai,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Tayger
Top achievements
Rank 1
Iron
answered on 27 Oct 2015, 08:33 PM
Thank you, excellent support! I was playing around with "items" before but just couldn't make it work that way. Its use is way easier than I thought. I assume many developers requires the sort order of all sortable items after rearranging them by user. The old and new index ( http://demos.telerik.com/kendo-ui/sortable/events) doesn't help to get full sort list. 
Tags
Sortable
Asked by
Tayger
Top achievements
Rank 1
Iron
Answers by
Tayger
Top achievements
Rank 1
Iron
Konstantin Dikov
Telerik team
Share this question
or