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/