Kendo Grid find out the drop row's uid

2 posts, 0 answers
  1. Matthias
    Matthias avatar
    2 posts
    Member since:
    Oct 2016

    Posted 13 Dec 2016 Link to this post

    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>

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1958 posts

    Posted 15 Dec 2016 Link to this post

    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.
Back to Top