This is a migrated thread and some comments may be shown as answers.

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

3 Answers 1534 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Yashpal
Top achievements
Rank 1
Yashpal asked on 01 Apr 2014, 01:19 PM
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.  












3 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 03 Apr 2014, 07:34 AM
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:

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Yashpal
Top achievements
Rank 1
answered on 09 Apr 2014, 03:17 PM
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.
0
Vladimir Iliev
Telerik team
answered on 11 Apr 2014, 07:38 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Yashpal
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Yashpal
Top achievements
Rank 1
Share this question
or