Kendo UI Grid multiple selection drag and drop issue

0
votes

I have a kendo grid, and i am using multiple selection drag and drop functionality in it. When i click on row/record and drag it to another grid, it is showing some shadow, which is not looking good. I dont know why it is happening. I want to remove this shadow. Please provide some solution. Thanks in advance.

My kendo grid code is

 $('#MappedSecurity_Grid').kendoGrid({
            scrollable: true,
            sortable: {
                mode: "single",
                allowUnsort: false
            },
            pageable: false,
            selectable: "multiple, row",
            height: 500,
            dataSource: {
                data: data,
                schema: {
                    model: {
                        id: 'Id',
                        fields: { Text: { type: "string" } }
                    }
                }
            },
            columns: [{ field: "Text", title: "<b>" + GetLocalizedString('Category', globalVariables.cultureResources.EOR) + "</b>" }],

        }).addClass("draggable-grid");

My code for drag and drop is here

 $("#MappedSecurity_Grid").kendoDraggable({
            filter: "tbody > tr",
            group: "gridGroup",
            //axis: "y",
            hint: function (itemClicked) {
                var helper = $('<div class="k-grid k-widget drag-helper"/>');
                if (!itemClicked.hasClass(selectedClass)) {
                    itemClicked.addClass(selectedClass).siblings().removeClass(selectedClass);
                }
                var elements = itemClicked.parent().children('.' + selectedClass).clone();
                itemClicked.data('multidrag', elements).siblings('.' + selectedClass).remove();
                return helper.append(elements);
            }

        });

enter image description here

3
jquerydrag-and-dropkendo-uikendo-grid

3 Answers

3
votes

I got this issue in the case of multi-select drag and drop in Kendo UI listview.

After analyzing the html in firebug, I found that there was a div with a class 'k-marquee' that was being created when I started dragging selected item.

So I overrode that class in my css with the attribute display: none and it worked for me. The code from my css file is below:

.k-marquee{display:none;}

Thanks, Sandeep Parashar

3
votes

In kendoGrid constructor 

dataBound:function(){
   this.selectable.userEvents._events.move = null;//disable marquee
}
0
votes

Jershell got the right answer (thanks!), but the drag and drop event still meet other conflicts.

To make sure your drag and drop is fluid, disable those 3 events :

dataBound: function(){
   this.selectable.userEvents._events.move = null;
   this.selectable.userEvents._events.start = null;
   this.selectable.userEvents._events.end = null;
}