Server Side Paging using arrays as datasource

4 posts, 0 answers
  1. Niloofar
    Niloofar  avatar
    24 posts
    Member since:
    Jan 2015

    Posted 16 Mar 2016 Link to this post

    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.

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2372 posts

    Posted 17 Mar 2016 Link to this post

    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!
     
  3. Alon
    Alon avatar
    18 posts
    Member since:
    Aug 2015

    Posted 19 Nov 2017 in reply to Viktor Tachev Link to this post

    Sorry to resurrect an old thread but does virtualization work with an array datasource?
  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2372 posts

    Posted 21 Nov 2017 Link to this post

    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.
Back to Top