Question

是否可以通过单击按钮将一列添加到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;
      },
    }
  ]
});

Answer 1

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

查看代码段以获取演示。

<!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>

如何动态地向kendo ui网格添加一行（到其架构）？

1 个答案: