Kendo grid columns with dynamic data

Question

Need help with Kendo Grid, where in I have dynamic columns on Kendo Grid.

dynamicCols- Object is a object which has list of title and value properties which could be dynamic where it could have any number of objects in the list with title, value pair.

Kendo grid works well if JSON has a flat structure which has all properties at same level and I haven't come across this kind of hierarchial/JSON structure until now.

This grid also needs to support server side sorting and filtering with C# Web API, with Kendo Datasource API for server side sorting and filtering.

Existing kendo column mapping

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

For 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

Answer 1

You have two options:

• When you are done fetching the data and before creating the new Grid, resolve the JSON object and create flat columns object that the Grid accepts
• Your second option is to forget the idea of creating dynamic columns and instead have a template column that dynamically resolves what it needs to display. In such cases you create an external function that you can call from your template. This way you do not end up with complicated and crappy templates. How to invoke external function from a template is covered here .

Answer 2

The easiest solution for me has been to make all columns and then end it by hiding those columns I did not need.

Even hiding around 50 columns did not take any noticable time.

(I had the luxury of knowing all potential columns that could appear)