如何使用 JQuery 更改 kendo 网格的列集

Question

我正在尝试更改列 Kendo 网格，但它不起作用

$("#AddGrid").kendoGrid({
  dataSource: AddGriddataSource,
  selectable: "row",
  scrollable: false,
  columns: AddGridCells,
  change: numberInput,
    pageable: {
      buttonCount: 3,
      messages: GridPageMsg
    },
  height: '100%',
  editable: true
}).data("kendoGrid");

var AddGriddataSource = new kendo.data.DataSource({
  data: [],
  schema: {
    model: {
      fields: {
        No: { editable: false, nullable: false },
        Num: { editable: true, nullable: false }
      }
    }
  }, 
});

var AddGridCells = [
  { field: "No", title: "No", width: "20px" },
  { field: "Num", title: "Num", width: "40px", template: '<input  id="Txt_test" class="txtBox" type="textbox" value= #=Num# style="margin: 4px" />
];

以及下面的新单元格和源代码

var newGridCells = [
  { field: "No", title: "No", width: "20px" },
  { field: "Num", title: "Num", width: "40px", template: '<input  id="Txt_test" class="k-state-disabled" type="textbox" value= #=Num# style="margin: 4px" />'
];

var newGriddataSource = new kendo.data.DataSource({
  data: [],
  schema: {
    model: {
      fields: {
        No: { editable: false, nullable: false },
        Num: { editable: false, nullable: false }
      }
    }
  }, 
});

JQuery 但它只改变了 DataSource，newGridCells 不能工作

var grid = $("#AddGrid").data("kendoGrid");
grid.setDataSource(newGriddataSource );
grid.setOptions(newGridCells);

是否有更改列的想法？如下图

if(status == 1){
  **use initial value**
} else{
  **use newGriddataSource and newGridCells** 
}

Answer 1

您需要在网格选项中设置 columns，而不是选项本身。

像这样：

var grid = $("#AddGrid").data("kendoGrid");

var newGridCells = [
  { field: "No", title: "No", width: "20px" },
  { field: "Num", title: "Num", width: "40px", template: ''}
];

var gridOptions = grid.getOptions();

gridOptions.columns = newGridCells;

grid.setOptions(gridOptions);

工作示例：set cells

如何使用 JQuery 更改 kendo 网格的列集

How to change columns set of kendo grid with JQuery

jquery

kendo-ui