Change event not firing when making items draggable

8 posts, 0 answers
  1. Ron
    Ron avatar
    48 posts
    Member since:
    Oct 2010

    Posted 04 Jul 2014 Link to this post

    I want to add drag/drop functionality to a listview. Therefore I made the items of the listview draggable. As a result of this, the change event is not raised anymore when clicking the items.

    $("#listView").kendoListView({
        dataSource: dataSource,
        selectable: true,
        template  : kendo.template($("#template").html()),
        change: function (e) {
            alert('change');
        },
        dataBound : function () {
            $(".product").kendoDraggable({
                hint: function (element) {
                    return element.clone();
                }
            });
        }
    });


    See http://jsfiddle.net/OnaBai/MYbgy/1 for the full example
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 08 Jul 2014 Link to this post

    Hello Ron,

    The behavior that you observe is expected, and the change event is not fired as it is only fired when the selection of the ListView is changed. In your case you have the "drop" event fired of the kendoDropTargeArea() component, which indicates when the order is changed. I would also suggest you to check the Kendo UI Sortable integration with ListView, as it might give you better performance:

    http://demos.telerik.com/kendo-ui/sortable/integration-listview

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Ron
    Ron avatar
    48 posts
    Member since:
    Oct 2010

    Posted 08 Jul 2014 in reply to Kiril Nikolov Link to this post

    The problem with just using the sortable integration with the listview component is that the list should not only be sortable. My case is the following:

    I have two components, a treeview and a listview. Users can add items to the listview from the treeview by using drag and drop. When populated the listview has to be sortable. Users can remove items from the listview by using drag and drop. Last but not least, the items in the listview should be selectable.

    Any suggestions or examples on how to make this case work?
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 09 Jul 2014 Link to this post

    Hello Ron,

    Thanks for explaining the requirements I can now better understand your project.

    In your situation the Sortable is not enough, and you will need to use the Kendo UI Drag & Drop API. The change event is not fired on drop and only when the selection is changes and currently there is no workaround for this. However you can use the drop event of the Kendo UI DropTarget, in order to determine when item is dropped. 

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Ron
    Ron avatar
    48 posts
    Member since:
    Oct 2010

    Posted 09 Jul 2014 Link to this post

    I managed to manually select the items when clicked. Something along the lines of:

    $("#listView").kendoListView({
        dataSource: dataSource,
        template  : kendo.template($("#template").html()),
        dataBound : function () {
            $(".product").kendoDraggable({
                hint: function (element) {
                    return element.clone();
                }
            }).on('click',function (e) {
                var itemid = $(this).attr('data-uid');
                var t = $("#listView").data("kendoListView");
                t.select(t.element.find('[data-uid=' + itemid + ']'));
            });
        }
    });

    For some reason the JSFiddle http://jsfiddle.net/MYbgy/38/seems to raise an error but it is working in my project. So problems solved in a way.
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 10 Jul 2014 Link to this post

    Hi Ron,

    I have tested the fiddle and it does not produce any errors in the Chrome console. Maybe it is a issue related to the iframes in jsFiddle and this is why it works in your project, where I guess you do not have iframes.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Ron
    Ron avatar
    48 posts
    Member since:
    Oct 2010

    Posted 10 Jul 2014 in reply to Kiril Nikolov Link to this post

    When I test the jsfiddle in Chrome, the following error occurs. Again, this is not happening in our project. One a side-note, we do use iframes in our project.

    1.Uncaught TypeError: Cannot read property 'options' of undefined kendo.all.min.js:19
    2.s.extend.select kendo.all.min.js:19
    3.(anonymous function) (index):125
    4.b.event.dispatch jquery-1.9.1.js:9593
    5.v.handle jquery-1.9.1.js:9273
  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 11 Jul 2014 Link to this post

    Hello Ron,

    The problem might comes from the fact that the jsfiddle uses an older version of Kendo UI, while in your project you are using a more recent one. 

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready