CODEWITHSUNDEEP
javascriptjquerykendo-uitelerikkendo-grid
kizoso
kizoso

Reputation: 1246

How to add a row to kendo ui grid (to its schema) dynamically?

Is it possible to add a column to the kendo ui grid by clicking on a buutton? I have tried to add it but this column doesn't initialased in the grid and I have no any data from it. How to add a col to schema dynamically? Mabye I should somehow reinitialize it?

I want to add empty column only with the header and its name and column.field name, than to edit it in other rows. I never know beforehand what columns it will be and how much. They should be dynamic. And after adding the col new row should be with it.

The most problem is to add field to 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;
      },
    }
  ]
});

Upvotes: 1

Views: 2069

Answers (1)

Shai
Shai

Reputation: 3872

You can use setOptions to redefine the columns of the grid.

See the snippet for a demo.

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

Upvotes: 2

Related Questions