如何动态地将一行添加到 kendo ui 网格（到它的模式）？答案

【问题标题】：How to add a row to kendo ui grid (to its schema) dynamically?如何动态地将一行添加到 kendo ui 网格（到它的模式）？
【发布时间】：2018-12-17 08:45:37
【问题描述】：

是否可以通过单击按钮向 kendo ui 网格添加一列？我尝试添加它，但此列未在网格中初始化，并且我没有任何数据。如何动态地将 col 添加到架构中？ Mabye 我应该以某种方式重新初始化它吗？

我只想添加带有标题及其名称和column.field name 的空列，而不是在其他行中编辑它。我事先从来不知道它将是什么列以及多少。它们应该是动态的。并且在添加 col 新行之后应该是它。

最大的问题是给grid.dataSource.schema.model.fields添加字段。

let gridProducts = $('#gridProducts').kendoGrid({
  dataSource: new kendo.data.DataSource({
    data: e.event.products,
    autoSync: true,
    schema: {
      model: {
        id: "productID",
        fields: {
          productName: {
            defaultValue: productDefault.products[0].productName,
            validation: {
              required: true
            },
            type: "string"
          },
          productCategory: {
            defaultValue: productDefault.products[0].productCategory
          },
          productDiscount: {
            defaultValue: productDefault.products[0].productDiscount,
            type: "array"
          }
        }
      }
    }
  }),
  dataType: "object",
  pageable: false,
  toolbar: ["create"],
  columns: [{
      field: "productID",
      title: "id"
    },
    {
      field: "productName",
      title: "Name"
    },
    {
      field: "productCategory",
      title: "Category",
      template: "1",
      editor: productCategoryDropDownEditor,
    },
    {
      field: "productDiscount",
      title: "Discount"
    },
    {
      command: "destroy",
      title: "x",
      width: 29
    },
  ],
  editable: true,
  sortable: true,
  resizable: true
});

$("#addPrice").click(function() {
  addPriceDialog.data("kendoDialog").open();
});

addPriceDialog.kendoDialog({
  width: "450px",
  title: "Add price",
  closable: true,
  modal: true,
  actions: [{
      text: 'Cancel',
      action: function() {
        return false;
      },
    },
    {
      text: 'Ок',
      primary: true,
      action: function() {
        let name = $("#priceName ").val();
        let type = $("#priceType").val();
        let val = $("#priceValue").val();
        let price = $("#price").val();
        let grid = $("#gridProduct").data("kendoGrid");
        let columns = grid.columns;
        let newCol = {
          title: "Price -" + name,
          field: "price" + type + [columns.length],
          format: "",
        };

        $("#gridTicket").data("kendoGrid").columns[(columns.length)] = newCol;
        return true;
      },
    }
  ]
});

【问题讨论】：

标签： javascript jquery kendo-ui telerik kendo-grid

【解决方案1】：

您可以使用setOptions 重新定义网格的列。

查看 sn-p 以获取演示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
    <button onclick="addColumn()">Add Column</button>
    <div id="grid"></div>
  
<script>
  	
  
    $("#grid").kendoGrid({
        columns: [
            { field: "name" },
            { field: "age" }
        ],
        dataSource: [
            { name: "Jane Doe", age: 30 },
            { name: "John Doe", age: 33 }
        ]
    });
  
    var grid = $("#grid").data("kendoGrid");
    
  	function addColumn() {
    		grid.setOptions({
            columns: grid.columns.concat([
                { field: "test" }
            ])
        });
    }
</script>
</body>
</html>

【讨论】：

我只想添加带有标题及其名称和 column.field 名称的空列，而不是在其他行中编辑它。我事先从来不知道它将是什么列以及多少。它们应该是动态的。并且在添加 col 新行之后应该与它一起。
我已经更新了 sn-p。它现在是否更适合您的需求？如果没有，您能解释一下缺少什么吗？
但我仍然无法将字段添加到 grid.dataSource.schema.model.fields