1. 首頁
  2. 問答
  3. 如何動態添加列模板kendo ui網格列

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

2015-08-14 118 views

回答

0

是的，但是您必須等待以用戶輸入之後呈現網格，或者每次用戶輸入更改時銷燬並重建它。 Here是一個工作示例。在名稱模板文本框中輸入一個像<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); 
});

來源

2015-08-17 21:50:56 Brett

相關問題

 相關問題