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

Grid paging wrong after resetting datasource

10 Answers 1131 Views
Grid
This is a migrated thread and some comments may be shown as answers.
GungFooMon
Top achievements
Rank 1
GungFooMon asked on 27 Jun 2012, 12:10 PM
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();
}

10 Answers, 1 is accepted

Sort by
0
Steve
Top achievements
Rank 1
answered on 28 Jun 2012, 03:07 AM
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,
...
0
GungFooMon
Top achievements
Rank 1
answered on 28 Jun 2012, 09:14 AM
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...
0
GungFooMon
Top achievements
Rank 1
answered on 03 Jul 2012, 07:34 AM
Any help with this unfortunate bug would be greatly appreciated!
0
Henning
Top achievements
Rank 1
answered on 07 Jul 2012, 09:40 PM
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?
0
GungFooMon
Top achievements
Rank 1
answered on 10 Jul 2012, 02:51 PM
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??
0
brian keating
Top achievements
Rank 1
answered on 23 Aug 2012, 09:04 PM
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.


0
Accepted
brian keating
Top achievements
Rank 1
answered on 24 Aug 2012, 09:47 AM
i did it.

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








0
GungFooMon
Top achievements
Rank 1
answered on 27 Aug 2012, 07:31 AM
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!
0
Lindon
Top achievements
Rank 1
answered on 27 Nov 2014, 10:11 AM
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();
    });
0
Gainsight
Top achievements
Rank 1
answered on 12 Feb 2019, 12:07 PM

this.kendoGridInstance.dataSource.data(yourdata)

// set the page active with the current page

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

this.kendoGridInstance.refresh();

Tags
Grid
Asked by
GungFooMon
Top achievements
Rank 1
Answers by
Steve
Top achievements
Rank 1
GungFooMon
Top achievements
Rank 1
Henning
Top achievements
Rank 1
brian keating
Top achievements
Rank 1
Lindon
Top achievements
Rank 1
Gainsight
Top achievements
Rank 1
Share this question
or