Grid paging wrong after resetting datasource

10 posts, 1 answers
  1. GungFooMon
    GungFooMon avatar
    17 posts
    Member since:
    Apr 2012

    Posted 27 Jun 2012 Link to this post

    Hi!

    I am using a function to change a grids datasource, but it seems that after attaching the new datasource and refreshing, the paging elements do not refresh/adjust to the new datasource?

    Does anyone have an idea?

    The code i use:

    var setGridDataSource = function(type) {
        if(typeof type != 'string') type = $('#showGridType').val();
        console.info("changed grid type to: " + type);
        // create datasource
        var dataSource = new kendo.data.DataSource({
            transport: { read:  { url: dataSourceUrls[type], dataType: "json" } },
            pageSize: 10,
            change: function() {
                participantGrid.refresh();
            },
            schema: { model: { id: "id", fields: gridFieldsParticipant } }
        });
     
        participantGrid.dataSource = dataSource;
        participantGrid.dataSource.read();
    }
  2. Steve
    Steve avatar
    3 posts
    Member since:
    Jun 2012

    Posted 27 Jun 2012 Link to this post

    I too have a similar problem though I'm doing the following:

    // get a reference to the grid widget
    var grid = $("#grid").data("kendoGrid");
    //reload grid's datasource
    grid.dataSource.read();
    // refreshes the grid
    grid.refresh();

    Any ideas?

    Solved my own problem. I needed to specify the dataSource.schema.total json path to extract the total number of records (using django + tastypie). I found this by RTFM.

    $(document).ready(function(){
        var grid = $("#grid").kendoGrid({
            dataSource: {
                type: "json",
                transport: {
                    read: {
                        url: "/rundb/api/v1/project/",
                        contentType: 'application/json; charset=utf-8',
                        type: 'GET',
                        dataType: 'json',
                    }
                },
                schema: {
                    data: "objects",
                        total: "meta.total_count",
                        model: {
                            fields: {
                            id: { type: "number" },
                            name: { type: "string" },
                            results_count: { type: "number" },
                            modified: { type: "string" }
                        }
                    }
                },                         
                pageSize: 10,
            },
            height: 'auto',
            groupable: false,
            scrollable: false,
            selectable: false,
            sortable: true,
            pageable: true,
    ...
  3. Kendo UI is VS 2017 Ready
  4. GungFooMon
    GungFooMon avatar
    17 posts
    Member since:
    Apr 2012

    Posted 28 Jun 2012 Link to this post

    Thanks for the tip Steve!
    Unfortunately it didn't solve my problem. :(
    I RTFM a bit and added me an anonymous function for the total attribtue of the schema (nothing else added, see code above):

    schema: { total: function(data) { console.log(data.length); return data.length; }, model: { id: "id", fields: gridFieldsParticipant } }

    it logs "38" to the console, the grid shows 10 items (which is correct since it's the value of the pageSize attribue), yet the paging row only contains links to the first (single) page...
  5. GungFooMon
    GungFooMon avatar
    17 posts
    Member since:
    Apr 2012

    Posted 03 Jul 2012 Link to this post

    Any help with this unfortunate bug would be greatly appreciated!
  6. Henning
    Henning avatar
    3 posts
    Member since:
    Jul 2012

    Posted 07 Jul 2012 Link to this post

    I have the same problem. I figured out to call refresh() on the grid to get the new values displayed properly - however since the read is asynchronous the refresh does not show the new values right away (as in Steve's code stated). How do I get around this? And is this the desired behavior?
  7. GungFooMon
    GungFooMon avatar
    17 posts
    Member since:
    Apr 2012

    Posted 10 Jul 2012 Link to this post

    Look at my Code Henning. (1st post)
    The call to .refresh() in the event handler of the "change" event in my datasource makes sure that the first page is displayed... (without it the grid stays empty)
    But the pager at the bottom of the grid still only shows 1 page even tho there should be 4.

    Does calling refresh() update the pager for you??
  8. brian keating
    brian keating avatar
    5 posts
    Member since:
    Jan 2010

    Posted 23 Aug 2012 Link to this post

    I'm in the very same situation just now :-(

    Seems to be painful to display a list of json objects with ajax.. 
    i'm going to take the Twitter sample now and try again, I see that they approach it differently to what I did.


  9. Answer
    brian keating
    brian keating avatar
    5 posts
    Member since:
    Jan 2010

    Posted 24 Aug 2012 Link to this post

    i did it.

    trick set the datasource only once,
    then call datasource.read(whateverDataYouNeedToSend);
    works like a charm..








  10. GungFooMon
    GungFooMon avatar
    17 posts
    Member since:
    Apr 2012

    Posted 27 Aug 2012 Link to this post

    Hi Brian,
    Thanks for posting your solution. As a matter of fact i did manage to get things to work in yet another way (by stumbling on it by accident).
    I am fetching the result of the call to datasource.read() via ajax and handing it to the data() function of the datasource.
    Here the function i use:
    var setGridData = function(type) {
        dataChanged = true;
        if(typeof type != 'string') type = $('#showGridType').val();
        console.info("changed grid type to: " + type);
        // fetch new data
        var newData = null;
        $.ajax({
            url: dataSourceUrls[type], dataType: "json",
            async:false,
            success: function(data) {
                newData = data;
            }
        })
        // add new data to grid
        participantGrid.dataSource.data(newData);
        participantGrid.dataSource.page(1);
    }

    Note: above function is bound to the change event of a <select>.

    I guess either method might be useful for someone out there looking at the same challenge.
    Thanks again Brian!
  11. Lindon
    Lindon avatar
    2 posts
    Member since:
    Nov 2014

    Posted 27 Nov 2014 Link to this post

    try this, it works!

    var newDataSource = new kendo.data.DataSource({
            transport:{
                read:{
                    url: '/test-page/new-data',
                    dataType: 'json',
                    type: 'POST'
                }
            },
            schema: {
                data: 'data',
                total: 'total'
            }
        });
     
        var grid = $('#test_grid').data('kendoGrid');
        grid.dataSource = newDataSource;
        grid.pager.dataSource = newDataSource;
        grid.dataSource.fetch(function(){
            grid.dataSource.pageSize(20);
            grid.dataSource.page(1);
            grid.refresh();
            grid.pager.refresh();
        });
Back to Top
Kendo UI is VS 2017 Ready