如何動態添加列模板kendo ui網格列

Question

我需要根據用戶輸入將模板動態添加到kendo ui網格列。

創建網格后，可以將模板添加到網格列嗎？

Answer 1

是的，但是您必須等待用戶輸入后渲染網格，或者每次用戶輸入更改時都銷毀並重建網格。 這是一個工作示例。 在“名稱模板”文本框中輸入類似<i>#=name#</i>的字符串，您將看到如何影響模板。 提出合適的模板。

HTML

<body>
  <div id="choices">
    <label>Name Template</label>
    <input type="text" data-bind="value: nameTemplate"/>
    <label>Age Template</label>
    <input type="text" data-bind="value: ageTemplate"/>
    <button type="button" data-bind="click: buildGrid">Build Grid</button>
  </div>
  <hr/>
  <div id="grid"></div>
</body>

腳本

$(function() {
  var grid = {};

  var columns = [
    { field: 'name' },
    { field: 'age' }
  ];

  var vm = kendo.observable({
    nameTemplate: '',
    ageTemplate: '',
    buildGrid: buildGrid
  });

  function buildGrid() {    
    if (vm.nameTemplate !== '') {
      columns[0].template = vm.nameTemplate;
    }

    if (vm.ageTemplate !== '') {
      columns[1].template = vm.ageTemplate;
    }

    grid = $('#grid').kendoGrid({
      columns: columns,
      dataSource: [
        { name: 'Jacob', age: 42 }, 
        { name: 'Cindy', age: 28 }
      ]
    }).data('kendoGrid');
  }

  kendo.bind('#choices', vm);
});

如何動態添加列模板kendo ui網格列

問題描述

1 個解決方案

解決方案1
0 2015-08-17 21:50:56

如何動態添加列模板kendo ui網格列

問題描述

1 個解決方案

解決方案1 0 2015-08-17 21:50:56

解決方案1
0 2015-08-17 21:50:56