带有动态数据的Kendo网格列

时间:2016-02-24 18:00:22

标签: javascript json asp.net-web-api kendo-ui kendo-grid

需要Kendo Grid的帮助,我在Kendo Grid上有动态列。

dynamicCols- Object是一个具有title和value属性列表的对象,它可以是动态的,它可以在列表中包含任意数量的带有标题,值对的对象。

如果JSON的平面结构具有相同级别的所有属性,那么Kendo网格运行良好,直到现在我还没有遇到过这种层次结构/ JSON结构。

此网格还需要支持使用C#Web API进行服务器端排序和过滤,使用Kendo Datasource API进行服务器端排序和过滤。

现有的剑道列映射

var cols = [
            { field: 'name', title: 'Name', encoded: false },
            { field: 'id', title: 'Id' },
            { field: 'age', title: 'Age }
           ]

 json = [{
            name:'XYZ', id:123, age:45,
            dynamicCols: [{title:'Gender',value:'Male'},      
                          {title:'Veteran',value:'Yes'}]
        }, {
            name:'Jim', id:555, age:24,
            dynamicCols: [{title:'Gender',value:'Male'},
                          {title:'Veteran',value:'No'}]
        }, {
            name:'Nick', id:557, age:78,
            dynamicCols: [{title:'Gender',value:'Female'},
                          {title:'Veteran',value:'No'}]
        }]

**Expected Grid**

        Name   Id   Age  Gender  Veteran
        XYZ    123  45   Male     Yes
        Jim    555  24   Male     No

对于Json2

    json2 = [
        {name:'XYZ', id:123, age:45,
        dynamicCols: [{title:'SSN',value:'xx-xx-7891'}]
        },
        {name:'Jim', id:555, age:24,
        dynamicCols: [{title:'SSN',value:'xx-xx-7892'}]
        },
        {name:'Nick', id:557, age:78,
        dynamicCols: [{title:'SSN',value:'xx-xx-7895'}]
        }];

    **Expected Grid**

        Name   Id   Age  Gender  SSN
        XYZ    123  45   Male    xx-xx-7891
        Jim    555  24   Male    xx-xx-7892

2 个答案:

答案 0 :(得分:1)

您有两种选择:

  • 完成提取数据之后和创建新网格之前,解析JSON对象并创建网格接受的平面列对象
  • 您的第二个选择是忘记创建动态列的想法,而是使用一个模板列来动态地解析它需要显示的内容。在这种情况下,您可以创建一个可以从模板中调用的外部函数。这样你就不会得到复杂而糟糕的模板。如何从模板调用外部函数包含here

答案 1 :(得分:1)

对我来说最简单的解决方案是制作所有列,然后隐藏那些我不需要的列来结束它。

即使躲在50根柱子上也没有花费任何明显的时间。

(我很高兴知道可能出现的所有可能的列)