Grid paging wrong after resetting datasource

[GungFooMon]

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();

}

[Steve]

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,

...

[GungFooMon]

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...

[GungFooMon]

Any help with this unfortunate bug would be greatly appreciated!

[Henning]

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?

[GungFooMon]

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??

[brian keating]

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.

[brian keating]

i did it.

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

[GungFooMon]

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!

[Lindon]

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();
    });

[Tyler]

Thanks! What you have in your .fetch worked for me

[Gainsight]

this.kendoGridInstance.dataSource.data(yourdata)

// set the page active with the current page

this.kendoGridInstance.dataSource.page(this.kendoGridInstance.dataSource.page());

this.kendoGridInstance.refresh();