Как динамически добавить строку в сетку kendo ui (в ее схему)? - PullRequest
Новая
       48

Как динамически добавить строку в сетку kendo ui (в ее схему)?

0 голосов
/ 17 декабря 2018

Можно ли добавить столбец в сетку пользовательского интерфейса kendo, нажав на кнопку?Я пытался добавить его, но этот столбец не инициализирован в сетке, и у меня нет никаких данных от него.Как добавить col в схему динамически?Может, мне стоит как-нибудь его повторно инициализировать?

Я хочу добавить пустой столбец только с заголовком и его именем и 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;
      },
    }
  ]
});
...