kendo web ui網格批量編輯點擊自定義命令使用jquery/javascript

Question

我想啓用批處理編輯點擊工具欄中的自定義按鈕。比方說，我有工具欄中的「編輯」按鈕。點擊編輯按鈕，我想激活所有行進行編輯。我不想讓所有行在加載時都可編輯。

這可能嗎？如果是的話，有人可以指導如何實現這一目標嗎？

Answer 1

嗨嘗試這樣，

$(document).ready(function() { 
      var crudServiceBaseUrl = "http://demos.kendoui.com/service", 
         dataSource = new kendo.data.DataSource({ 
          transport: { 
           read: { 
            url: crudServiceBaseUrl + "/Products", 
            dataType: "jsonp" 
           }, 
           update: { 
            url: crudServiceBaseUrl + "/Products/Update", 
            dataType: "jsonp" 
           }, 
           destroy: { 
            url: crudServiceBaseUrl + "/Products/Destroy", 
            dataType: "jsonp" 
           }, 
           create: { 
            url: crudServiceBaseUrl + "/Products/Create", 
            dataType: "jsonp" 
           }, 
           parameterMap: function (options, operation) { 
            if (operation !== "read" && options.models) { 
             return { models: kendo.stringify(options.models) }; 
            } 
           } 
          }, 
          batch: true, 
          pageSize: 20, 
          schema: { 
           model: { 
            id: "ProductID", 
            fields: { 
             ProductID: { editable: false, nullable: true }, 
             ProductName: { validation: { required: true} }, 
             UnitPrice: { type: "number", validation: { required: true, min: 1} }, 
             Discontinued: { type: "boolean" }, 
             UnitsInStock: { type: "number", validation: { min: 0, required: true} } 
            } 
           } 
          } 
         }); 

      $("#grid").kendoGrid({ 
       dataSource: dataSource, 
       navigatable: true, 
       pageable: true, 
       height: 430, 
       toolbar: ["Edit", "create", "save", "cancel"], 
       columns: [ 
          "ProductName", 
          { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 110 }, 
          { field: "UnitsInStock", title: "Units In Stock", width: 110 }, 
          { field: "Discontinued", width: 110 }, 
          { command: "destroy", title: " ", width: 90}], 
       editable: false 
      }); 


      $('.k-grid-Edit').on("click", function() { 

       $("#grid").kendoGrid({ 
        dataSource: dataSource, 
        navigatable: true, 
        pageable: true, 
        height: 430, 
        toolbar: ["Edit", "create", "save", "cancel"], 
        columns: [ 
          "ProductName", 
          { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 110 }, 
          { field: "UnitsInStock", title: "Units In Stock", width: 110 }, 
          { field: "Discontinued", width: 110 }, 
          { command: "destroy", title: " ", width: 90}], 
        editable: true 
       }); 

      }); 

Answer 2

內嵌@Jaimin解決辦法，我建議，你有兩個網格，但你不創建一個新的網格每次從版本通勤時間了類似的做法不編輯模式（不知道這是否是一項要求）。

所以我做的是創建兩個網格，完全相同的定義，只是不同的是，一個是隱藏的，一個是可見的，一個是可編輯的，一個是不可見的。當你點擊按鈕時，它隱藏可見並顯示不可見。由於兩者共享同一個DataSource，所以它實際上是完美的，因爲改變其中一個頁面會改變另一個，編輯頁面，更新另一個頁面。

因此，它是這樣的：

1- CSS定義用於切換可視性：

.ob-hide { 
    display : none; 
} 

2-數據源定義：

var ds = new kendo.data.DataSource({ 
    transport : { 
     read : { 
      url: ... 
     }, 
     update : { 
      url: ... 
     }, 
     create : { 
      url: ... 
     }, 
     destroy : { 
      url: ... 
     } 
    }, 
    pageSize: 10, 
    schema : { 
     model: { 
      id : ..., 
      fields: { 
       id  : { type: '...' }, 
       ... 
      } 
     } 
    } 
}); 

接下來的兩個網格：

$("#grid-editable").kendoGrid({ 
    editable: "inline", 
    dataSource : ds, 
    ... 
} 

$("#grid-not-editable").kendoGrid({ 
    editable: false, 
    dataSource: ds, 
    ... 
}); 

$("#grid-editable").addClass("ob-hide"); 

最後說通勤電網按鈕處理程序：

$("#make-editable").on("click", function() { 
    $("#grid-editable").toggleClass("ob-hide"); 
    $("#grid-not-editable").toggleClass("ob-hide"); 
}); 

看到它跑這裏：http://jsfiddle.net/OnaBai/bCEJR/