Server Side Paging using arrays as datasource

[Niloofar]

I have tables on my server with thousands of records and im using ember framework(ember data).  for my grid i want to pass only an array of 2500 in total and as the user scrolls server side paging happens and the response update my datasource array but i dont know how. here is what i have sofar:

 

import Ember from 'ember';


export default Ember.Component.extend({
    className: 'kendo-grid',
    kendoGrid: null,

    initGrid: function () {
        this.send('createGrid');
    }.on('didInsertElement'),

    dataSourceObserver: function () {
        this.send('recreateGrid');
    }.observes('gridObject'),

    actions: {

        recreateGrid: function () {
            //Every time we recreate the grid, we need to destroy it first and create it again
            this.get('kendoGrid').wrapper.empty();
            this.get('kendoGrid').destroy();
            this.send('createGrid');
        },

        createGrid: function () {

            var gridModelData = this.get('gridObject.source');
            var gridHeight = this.get('gridObject.height');
            var gridPageSize = this.get('gridObject.pageSize');

            var dataSource = {
                data: gridModelData,
                serverPaging: true,
                serverSorting: true,
                pageSize: 20,
            };


            var grid = Ember.$("#kendo-grid").kendoGrid({
                dataSource: dataSource,
                pageSize: gridPageSize,
                pageable: {

                    refresh: true, //if set to true, it will show refresh button,clicking on that will make the grid to refresh                  
                    numeric: false,
                    previousNext: false,
                    messages: {
                        display: "Loaded {0}-{1} from {2} data items"
                    },
                },
                height: gridHeight,
                groupable: true,
                sortable: {
                    mode: "multiple"
                },
                filterable: true,

                scrollable: {
                    virtual: true,
                },

            }).data('kendoGrid');
            this.set('kendoGrid', grid);

            var pager = grid.pager;

            var test_pagechange = function (e) {
                console.log(e);
            };
            pager.bind('change', test_pagechange);

        }
    }



});

 

i dont want to use url in my grid datasource.

[Viktor Tachev]

Hi,

As I understand your scenario you would like the paging to be performed as the user scrolls through the data in the Grid. Please correct me if I am wrong.

If that is the case you should consider enabling Virtualization. Please examine the following example that illustrates how the functionality works.

• http://demos.telerik.com/kendo-ui/grid/virtualization-remote-data

Regards,
Viktor Tachev
Telerik

 

 

[Alon]

Sorry to resurrect an old thread but does virtualization work with an array datasource?

[Viktor Tachev]

Hello Alon,

The virtualization feature is suitable when having a large number of records. It enables you to show only part of the items and enable the user to scroll through all records. As the user scrolls new items are requested from the server when required. 

With that said, the grid supports binding to local data. Thus, you can use an array as data source and pass it to the Grid DataSource. However, it is not recommended to use this approach with a lot of records as it can hinder performance. 

For most scenarios, I would recommend using Virtual scrolling with remote data. This way only the relevant items will be requested from the server when they should be displayed. 

• http://demos.telerik.com/kendo-ui/grid/virtualization-remote-data

Regards,
Viktor Tachev
Progress Telerik