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

Kendo Grid find out the drop row's uid

1 Answer 229 Views
Drag and Drop
This is a migrated thread and some comments may be shown as answers.
Matthias
Top achievements
Rank 1
Matthias asked on 13 Dec 2016, 12:31 PM

Hello,

I have a quite complex drag&drop scenario:

 

  •  2 grids with different column structure
  • multiselect
  • move rows between the grids
  • move rows inside the same grid (reordering)
  • dropping rows on an empty grid 
  • dropping rows to be inserted after the position of the row where the drop happened

 

After some testing I found a solution which works quite good. But strangely just when I load the test application from a local test web server.
If I install the application on a remote Web Server the identification of the grid row where the drop occured fails. I stripped down everything
which does not belong to that problem (for example angularjs to have the same behaviour jQuery based). Here is the reduced code. To even
exclude the possibility that it could have to do something with my eval version of kendo I used the libraries from CDN.

 

  • Are the 2 methods which I use to get the uid of the drop row at all recommended?
  • Is there a reliable way to get the uid of the drop row?
  • I assume some type of run time problem here but the behaviour is stable (local server works always, remote server never).

Can be tested here:     http://medialan.de:9800/dragdroptest.html

On dojo the code is working!

 

<!DOCTYPE html>
<html>
  <head>
    <link href="../kendo/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../kendo/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
    <link href="../kendo/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="../kendo/styles/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" />

    <script src="../kendo/js/jquery.min.js"></script>
    <script src="../kendo/js/kendo.all.min.js"></script>

    <script>
      $(function() {
        var d = [
          { v : "a" },
          { v : "b" },
          { v : "c" }];
  
        var grid = $('#grid').kendoGrid({          
          dataSource: new kendo.data.DataSource({ data: d }),
          selectable : "row",
          columns: [ { field: "v" } ]        
        }).data('kendoGrid');
        
        grid.table.kendoDropTarget({
          drop: function(e) {
            e.draggable.hint.hide();        
            
            // dropuid is undefined, when providing the test from a remote server
            // - e.target is div.k-grid.k-widget  when using remote server
            // - e.target is td when using a local server
            
            var dropuid = $($(e.target).parent()).data("uid");            
            console.log('dropuid is: ' + dropuid);
            dropuid = grid.dataItem(e.target.closest("tr")).uid;
            console.log('dropuid is: ' + dropuid);
          }
        });

        grid.table.kendoDraggable({
          filter: "tbody > tr",                         
          cursorOffset : { top: 1, left: 1},       
          hint: function(e) {
            return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
          }
        });
      });
    </script>
  </head>

  <body>
    <div id="grid"></div>   
  </body>
</html>

 

1 Answer, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 15 Dec 2016, 09:48 AM

Hello Matthias,

 

Actually we do not suggest using the Kendo UI Grid Multirow selection with the drag and drop functionality.

 

The reason is because the grid Kendo UI Grid Multirow selection overlaps with the draggable triggers - basically, both are triggered on drag, with the selection taking precedence. Given that, the two feature sets are not compatible - if the draggable worked, the selection might not work or cause some unexpected behavior. 

 

I such cases I would suggest to implement a column with check box ( using columns.template) to mark the rows you want to drag. In this case the multirow selection can be removed and the events should be triggered as expected.  

 

Regards,
Boyan Dimitrov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Drag and Drop
Asked by
Matthias
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question
or