Кендо Сетка: Drag & Drop прокручивает вверх после падения

Question

я реализовал перетащить & капли для сетки, как это:

var mainGrid = $("#grid").kendoGrid({ 
    dataSource: mainDataSource, 
    columns: ["id", "name", "phone"], 
    scrollable: true, 
    editable: true, 
    navigatable: true, 
    height: 200 
}).data("kendoGrid"); 

mainGrid.table.kendoDropTarget({ 
    group: "gridGroup", 
    drop: function (e) { 

     var draggedRows = e.draggable.hint.find("tr"); 
     e.draggable.hint.hide(); 
     var dropLocation = $(document.elementFromPoint(e.clientX, e.clientY)), 
      dropGridRecord = mainDataSource.getByUid(dropLocation.parent().attr("data-uid")) 
      if (dropLocation.is("th")) { 
       return; 
      } 

     var beginningRangePosition = mainDataSource.indexOf(dropGridRecord), //beginning of the range of dropped row(s) 
      rangeLimit = mainDataSource.indexOf(mainDataSource.getByUid(draggedRows.first().attr("data-uid"))); //start of the range of where the rows were dragged from 


     //if dragging up, get the end of the range instead of the start 
     if (rangeLimit > beginningRangePosition) { 
      draggedRows.reverse(); //reverse the records so that as they are being placed, they come out in the correct order 
     } 

     //assign new spot in the main grid to each dragged row 
     draggedRows.each(function() { 
      var thisUid = $(this).attr("data-uid"), 
       itemToMove = mainDataSource.getByUid(thisUid); 
      mainDataSource.remove(itemToMove); 
      mainDataSource.insert(beginningRangePosition, itemToMove); 
     }); 


     //set the main grid moved rows to be dirty 
     draggedRows.each(function() { 
      var thisUid = $(this).attr("data-uid"); 
      mainDataSource.getByUid(thisUid).set("dirty", true); 
     }); 

     //remark things as visibly dirty 
     var dirtyItems = $.grep(mainDataSource.view(), function (e) { 
      return e.dirty === true; 
     }); 
     for (var a = 0; a < dirtyItems.length; a++) { 
      var thisItem = dirtyItems[a]; 
      mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").addClass("k-dirty-cell"); 
      mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").prepend('<span class="k-dirty"></span>') 
     }; 
    } 
}); 

JS скрипку: jsfiddle.net/yagamilight1987/R2EyW/

Прокрутка вниз к последней записи. Перетащите последнюю запись в предыдущую позицию. Падение работает, но оно прокручивается к вершине сетки.

Answer 1

Ваш код прекрасно работает на моем проекте я думаю, что есть какой-то вопрос скриптом

скрипт, который используют

<script src="~/Script/Jquery-1.8.1.min.js" type="text/javascript"></script> 
<script src="@Url.Content("~/Script/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Script/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Script/kendo.all.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Script/kendo.aspnetmvc.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Script/kendo.web.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Script/jquery.maskedinput-1.3.min.js")" type="text/javascript"></script> 
<link href="~/Content/kendo.common.min.css" rel="stylesheet" type="text/css" /> 
<link href="~/Content/kendo.default.min.css" rel="stylesheet" type="text/css" /> 

Посмотреть

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

Код

<script type="text/javascript"> 
    $(document).ready(function() { 

     $.fn.reverse = [].reverse; //save a new function from Array.reverse 

     var data = [{ 
      id: 1, 
      name: "Michael", 
      phone: "897-894-8956" 
     }, { 
      id: 2, 
      name: "George Michael", 
      phone: "897-555-5555" 
     }, { 
      id: 3, 
      name: "George Sr.", 
      phone: "897-444-4444" 
     }, { 
      id: 4, 
      name: "Gob", 
      phone: "897-333-3333" 
     }, { 
      id: 5, 
      name: "Lucille", 
      phone: "897-222-2222" 
     }, { 
      id: 6, 
      name: "Tobias", 
      phone: "897-111-1111" 
     }, { 
      id: 7, 
      name: "Maeby", 
      phone: "897-666-6666" 
     }, { 
      id: 8, 
      name: "Buster", 
      phone: "897-777-7777" 
     }, { 
      id: 9, 
      name: "Lindsay", 
      phone: "897-888-8888" 
     }]; 

     var dataModel = kendo.data.Model.define({ 
      id: "id", 
      fields: { 
       id: { 
        type: "number", 
        editable: false 
       }, 
       name: { 
        type: "string", 
        editable: true 
       }, 
       phone: { 
        type: "string", 
        editable: false 
       } 
      } 
     }); 

     var mainDataSource = new kendo.data.DataSource({ 
      schema: { 
       model: dataModel 
      }, 
      data: data 
     }); 

     var mainGrid = $("#grid").kendoGrid({ 
      dataSource: mainDataSource, 
      columns: ["id", "name", "phone"], 
      scrollable: true, 
      editable: true, 
      navigatable: true, 
      height: 200 
     }).data("kendoGrid"); 

     var selectedClass = 'k-state-selected'; 
     $(document).on('click', '#grid tbody tr', function (e) { 
      if (e.ctrlKey || e.metaKey) { 
       $(this).toggleClass(selectedClass); 
      } else { 
       $(this).addClass(selectedClass).siblings().removeClass(selectedClass); 
      } 
     }); 

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

     mainGrid.table.kendoDropTarget({ 
      group: "gridGroup", 
      drop: function (e) { 

       var draggedRows = e.draggable.hint.find("tr"); 
       e.draggable.hint.hide(); 
       var dropLocation = $(document.elementFromPoint(e.clientX, e.clientY)), 
      dropGridRecord = mainDataSource.getByUid(dropLocation.parent().attr("data-uid")) 
       if (dropLocation.is("th")) { 
        return; 
       } 

       var beginningRangePosition = mainDataSource.indexOf(dropGridRecord), //beginning of the range of dropped row(s) 
      rangeLimit = mainDataSource.indexOf(mainDataSource.getByUid(draggedRows.first().attr("data-uid"))); //start of the range of where the rows were dragged from 


       //if dragging up, get the end of the range instead of the start 
       if (rangeLimit > beginningRangePosition) { 
        draggedRows.reverse(); //reverse the records so that as they are being placed, they come out in the correct order 
       } 

       //assign new spot in the main grid to each dragged row 
       draggedRows.each(function() { 
        var thisUid = $(this).attr("data-uid"), 
       itemToMove = mainDataSource.getByUid(thisUid); 
        mainDataSource.remove(itemToMove); 
        mainDataSource.insert(beginningRangePosition, itemToMove); 
       }); 


       //set the main grid moved rows to be dirty 
       draggedRows.each(function() { 
        var thisUid = $(this).attr("data-uid"); 
        mainDataSource.getByUid(thisUid).set("dirty", true); 
       }); 

       //remark things as visibly dirty 
       var dirtyItems = $.grep(mainDataSource.view(), function (e) { 
        return e.dirty === true; 
       }); 
       for (var a = 0; a < dirtyItems.length; a++) { 
        var thisItem = dirtyItems[a]; 
        mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").addClass("k-dirty-cell"); 
        mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").prepend('<span class="k-dirty"></span>') 
       }; 
      } 
     }); 

    }); 

</script> 

Answer 2

Вы меняете источник данных, который заставляет сетку обновляться, и сетка, к сожалению, не запоминает свою позицию прокрутки, когда вы используете опцию конфигурации navigatable. Вы можете исправить это, запоминая положение и восстановить его вручную:

// remember scroll position before you start modifying the data source 
    var gridContentDiv = $("#grid").find(".k-grid-content").first(); 
    var scrollTop = gridContentDiv.scrollTop(); 

    // ... 

    // restore scroll position when your modifications are done ... 
    gridContentDiv.scrollTop(scrollTop); 

(updated demo)