No difference between end and change

5 posts, 1 answers
  1. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 26 Oct 2015 Link to this post

    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?

     

     

  2. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 26 Oct 2015 Link to this post

    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.

  3. Kendo UI is VS 2017 Ready
  4. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 26 Oct 2015 in reply to Tayger Link to this post

    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.

  5. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 27 Oct 2015 Link to this post

    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!
     
  6. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 27 Oct 2015 in reply to Konstantin Dikov Link to this post

    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. 
Back to Top
Kendo UI is VS 2017 Ready