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

Server Side Paging using arrays as datasource

3 Answers 55 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Niloofar
Top achievements
Rank 1
Niloofar asked on 16 Mar 2016, 11:18 PM

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.

3 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 17 Mar 2016, 10:36 AM
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.



Regards,
Viktor Tachev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Alon
Top achievements
Rank 1
Veteran
answered on 19 Nov 2017, 10:34 AM
Sorry to resurrect an old thread but does virtualization work with an array datasource?
0
Viktor Tachev
Telerik team
answered on 21 Nov 2017, 02:23 PM
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. 



Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Niloofar
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Alon
Top achievements
Rank 1
Veteran
Share this question
or