2013-04-03 93 views
0

我們在劍道網格表格內使用劍道拖放功能。劍道網格拖放問題

1)如果用戶在任何可編輯字段上提供數據而不保存數據,如果用戶點擊/跳轉到其他字段進行編輯。用戶正在丟失他的更新數據。 2)如果用戶更新任何記錄,我們再次刷新/重新生成表格或者如果我們從函數外部刷新/重新生成或者我們使用函數外部添加新記錄。之後,用戶無法刪除行來替換其他。

Jsfiddel file

var data = [ 
        { Id: 1, Name: "data 1", Position: 1 }, 
        { Id: 2, Name: "data 2", Position: 2 }, 
        { Id: 3, Name: "data 3", Position: 3 } 
       ]; 

       var dataSource = new kendo.data.DataSource({ 
         data: data,   
         schema: { 
          model: { 
           Id: "Id", 
           fields: { 
            Id: { type: "number" }, 
            Name: { type: "string" }, 
            Position: { type: "number" } 
           } 
          } 
         } 
        }); 

       var grid= $("#grid").kendoGrid({ 
        dataSource: dataSource, 
        scrollable: false,  
        editable : true, 
        toolbar: ["save","cancel", "create"], 
        columns: ["Id", "Name", "Position"]    
       }).data("kendoGrid"); 

      grid.table.kendoDraggable({ 
        filter: "tbody > tr:not(.k-grid-edit-row)", 
        group: "gridGroup", 
       cursorOffset: { top: 10, left: 10 }, 
        hint: function(e) { 

         return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>'); 
        } 
       }); 


      grid.table/*.find("tbody > tr")*/.kendoDropTarget({ 

        group: "gridGroup", 
        drop: function (e) { 

        var target = dataSource.getByUid($(e.draggable.currentTarget).data("uid")), 
          dest = $(e.target); 

        if (dest.is("th")) { 
         return; 
        } 
        dest = dataSource.getByUid(dest.parent().data("uid")); 

        //not on same item 
        if (target.get("Id") !== dest.get("Id")) { 
         //reorder the items 
         var tmp = target.get("Position"); 
         target.set("Position", dest.get("Position")); 
         dest.set("Position", tmp); 

         dataSource.sort({ field: "Position", dir: "asc" }); 
        } 
        } 
       }); 
+0

請參考jsfiddel文件的鏈接。 Piyush

+0

不能到達您的js小提琴。嘗試發佈您的代碼與問題 –

+0

在'模型'定義嘗試替換'Id:「Id」通過「id:'Id'」。 – OnaBai

回答

0
  1. 我前段時間碰到類似的問題。而且我還在他們的論壇上發現了以下線程 - http://www.kendoui.com/forums/ui/grid/drag-and-drop-reordering.aspx#boD2qq6aG2OF1P8AAFTdxQ

    因此,如果您在表格中添加一個附加列並在其中放置圖像或其他元素,則可以將該元素用作可拖動目標像:

    grid.table.kendoDraggable({ 
        filter: "tbody > .draggableTarget"..... 
    
  2. 該表中的情況下DOM完全重建,當你刷新它,所以你必須重新訂閱您的拖放功能。

0

我有類似的問題,使用新的kendoSortable與可編輯網格實現拖放行排序。

這個小提琴http://jsfiddle.net/UsCFK/273/的作品。

它使用一個柱,用如上所述,以防止細胞的編輯丟失的拖動把手 - 其它小區在設置被忽略:

grid.table.kendoSortable({ 
    filter: ">tbody >tr", 
    hint: $.noop, 
    cursor: "move", 
    ignore: "TD, input", 
    placeholder: function (element) { 
     return element.clone().addClass("k-state-hover").css("opacity", 0.65); 
    }, 
    container: '#grid tbody', 
    change: onGridRowChange 
}); 

它還更新位置字段中的數據源,而不是刪除,然後重新插入該行,如同其他一些示例 - 因爲這將導致對移動的每一行發送刪除請求到服務器 - 這可能會導致點擊批量編輯取消按鈕時出現問題。位置字段僅用於演示目的 - 不應將其暴露給手動編輯。