Change event not firing when making items draggable

[Ron]

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

[Kiril Nikolov]

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

 

 

[Ron]

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?

[Kiril Nikolov]

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

 

 

[Ron]

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.

[Kiril Nikolov]

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

 

 

[Ron]

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

[Kiril Nikolov]

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