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

How to send page number from the paginated grid on Kendo Grid with Angularjs

2 Answers 1114 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Yatish
Top achievements
Rank 1
Yatish asked on 17 Jan 2017, 08:39 PM

Hi,

Currently we are using the kendo grid for showing the data and retrieving the complete dataset and allowing the kendo grid to set pagination on the client side. But the dataset have been steadily growing and wanted to implement a server side paging setup.As a part of refactor process, the kendo grid is assigned a datasource with transport.read implemented as below (req will have additional parameters that will bound to the UI retrieved from $scope)

$scope.gridDataSource = new kendo.data.DataSource({
        transport: {
            read: function (options) {
                var req = {};
                req.pageNumber = '1';
                req.rowCount = '20';
                $http.post('custom/url', req).
                then(function successCallback(response) {
                    console.log('Success Response');

                }, function errorCallback(response) {
                    console.log('Error Response');
                });
            }
        }
    });

But I am not able to get the page number and the rowcount from options and how can I bind the data coming in the success callback

Would really appreciate any pointers

Thank you

YK

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 19 Jan 2017, 08:16 AM
Hi Yatish,

You can find details and examples on implementing a custom transport in the following section of our documentation:

http://docs.telerik.com/kendo-ui/framework/datasource/crud

The data, visualized in the Grid, is passed to it from the transport.read via calling the e.success() method, passing it the data you want to show in the Grid. The page, pageSize, skip, and take, are available as properties on the e.data object.

When serverPaging is set to true, the schema.total option must be set as well.

I have modified the example from the suggested article on CRUD operations to demonstrate a sample server paging implementation in the context of a custom transport:

http://dojo.telerik.com/OwOCO

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Yatish
Top achievements
Rank 1
answered on 19 Jan 2017, 09:02 PM

Thank you. That is exactly what I was looking for.

YK

Tags
Grid
Asked by
Yatish
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Yatish
Top achievements
Rank 1
Share this question
or