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

4 posts, 0 answers
  1. Yashpal
    Yashpal avatar
    2 posts
    Member since:
    Feb 2014

    Posted 01 Apr 2014 Link to this post

    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.  












  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 03 Apr 2014 Link to this post

    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!
     
  3. UI for ASP.NET AJAX banner
  4. Yashpal
    Yashpal avatar
    2 posts
    Member since:
    Feb 2014

    Posted 09 Apr 2014 in reply to Vladimir Iliev Link to this post

    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.
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 11 Apr 2014 Link to this post

    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!
     
Back to Top
UI for ASP.NET AJAX banner