[Solved] Make grid display updates to datasource

[Christopher]

I am experimenting with having the Kendo Grid bound to an initial set of data and then using a transport URL for all subsequent trips. To this end, I discovered this project on a kendo Dojo : http://dojo.telerik.com/UtON/125

This is very similar to what I want to be able to do, however, if you notice at the bottom of the script the data total is manually set to 58, but the grid does not reflect this. How can I get the grid to reflect/display the total before paging?

Thanks,
Chris

[Christopher]

I forgot to mention that if I inspect the grid in the console, it does show the appropriate total set in the datasource (58), the grid display just doesn't show this.

I have tried in other projects to update the schema of the datasource in a similar way and run into the same problem. If I inspect the datasource it shows the correct schema set, but the grid itself does not display these changes.

[Daniel]

Hello Chris,

The total cannot be set via code. It is determined by the passed data length or if server paging is enabled, by the total field returned from the server. It is possible to implement the described scenario by using a custom function for the operation that returns the local data initially and then makes a request. I updated the dojo to demonstrate this approach.

Regards,
Daniel
Telerik

 

 

[Christopher]

Daniel,

Thank you for your reply, so it looks like the fields can be set within the read method of the grid, but not after the grid has been initialized? What properties would this apply to? Meaning, which properties can be changed afterwards, and which need to be declared in initialization.

Thanks!
Chris

[Christopher]

To be more specific, using the method you outline in your dojo link, how would you set the grid schema within the success function?

options.success({
                    d: {
                      results: products,
                      __count: 77
                    }
                  });

Thanks!

[Daniel]

Hello again Chris,

Could you clarify what you mean by "grid schema"? Basically all configuration options that have setter methods(aggregate, filter, pageSize, etc.) can be changed.

Regards,
Daniel
Telerik

 

 

[David]

Hi Christopher!

I'm using angularjs with kendo and I have a problem with pagination because I can't change the code of my service. When I call the API to get the data, they return me the pagination options in the header, so I used this to solve the problem:


In my transport -> read: 
 read: function (ctrl) {
                   //the cltr.data contain an object with kendo parameters (current page, page size, sort and filters)
                    var params = self.getUrlParameters(ctrl.data)
                    $http({method: 'GET', url: crudServiceBaseUrl + '?'+ params}).
                        success(function(data, status, headers, config) {
                            //I had to get the total records in the header with this method, and then I set this total records in my data object.
                            data.totalRecords = headers("X-Total");
                            ctrl.success(data)
                        }).
                        error(function(data, status, headers, config) {
                            alerts.add('danger', 'Error', 'while contacting server!');
                        }
                    );


//In my schema, I used this to set the total records in my grid
this.schema = {
                total: function (data) { return data.totalRecords },



I hope this can help you.

[Christopher]

Daniel,

I just realized the problem I was facing is not due to schema, but the fact that the dojo example listed above, or here for reference : http://dojo.telerik.com/iLAKa/2 uses odata, and I cannot use this for my example.

Since the datasource uses "type: odata", when this is removed the function breaks. So I need to know how to set the grid up to use the read method to accept a javascript array of objects for the initial binding, and then use a URL for additional operators. In other words, I need an example identical to the one in the dojo example above, except I need it to NOT use "type: odata".

The specific part of the code I cannot seem to get working is the read function with an if statement. Such as:

if (!this.loaded) {
                        this.loaded = true;
                        options.success({ // This doesn't work without "type:odata" what should it be instead?
                            d: {
                                results: firstPage,
                                __count: 77
                            }
                        });
                    } else {
                        $http.get(example here)
                    }

The kicker, is that I also need to be able to specify a schema with this example. The schema will be a javascript object, but also has to be a part of the datasource. This also seems to cause the dojo example above some problems.

If I could get that working, I'd be golden. If you need any additional details, just let me know. Thanks for your time!

Chris

[Daniel]

Hello Chris,

I am not sure if I understand the issue when the type is not odata but you should basically set the schema data and total options to the fields in the response from the server that hold the data and the total records count and use the same fields for the local data. I updated the example to simulate server paging without odata.


Regards,
Daniel
Telerik