Binding KendoUI Grid to Dynamic Column and Values Kendo UI Complete Resources Buy Try

[Yashpal]

We are struggling to bind dynamic columns and there values as a rows to Kendo UI grid, reason is that new columns can be added to table at a later stage and that also needs to be displayed on the grid.
We also need server side paging, sorting and filtering and need to deal with large amount of data.

Its a Spring Rest call from angular JS:
this.executeQuery = function () {
var service = $resource('/searchandreplay/rest/executeQuery', null, { 'save': { method: 'POST', isArray: true}});
service.save(this.registry.activeQuery, function (response) {
console.log('response: ' + response);
});
};
Here response is an json, attached response.json

Want to populate/make visible Kendo Grid on click event of button.  

[Vladimir Iliev]

Hi,

You can auto-generate the columns of the Grid based on the received Json data and even enable CRUD operations, however custom solution would be needed. For convenience I created small example which you can use as a baseline to achieve the desired behavior:

• Grid: Auto generate columns based on the received data

Regards,
Vladimir Iliev
Telerik

 

 

[Yashpal]

Thanks I got this working but couldn't able to get serverside Paging, sorting and filtering works.

Below angular function called on the button click action.
    this.executeQuery = function () {
   
    var service = $resource('/searchandreplay/rest/executeQuery',null, { 'save': { method: 'POST', isArray: false}});
    service.save(this.registry.activeQuery, function (response) {
    console.log('response: ' + response);
    generateGrid( response);
    });
    };

Please let me know how paging can be implemented on this code.

[Vladimir Iliev]

Hi Yashpal,

In order to support server paging, sorting and grouping you should use the grid dataSource build-in transport for reading the data and set the serverPaging option to true. Then you can set the grid autoBind option to false and on click of the button (that you mention) to call the grid dataSource read method. 

You can also check the KendoUI Angular project at KendoUI labs.

Regards,
Vladimir Iliev
Telerik