Lazy Loading not working on setting scrollable: {virtual: true} in Kendo Grid

9 posts, 1 answers
  1. achu
    achu avatar
    8 posts
    Member since:
    Jan 2016

    Posted 01 Feb 2016 Link to this post

    I am a beginner working on Kendo Grid. I wanted to load the data on demand in the grid, like :

    I set the page size to 10, when a user scrolls down to 10 rows, the 
    grid should retrieve next 10 rows from database and display it on 
    demand.To do this, I changed "scrollable: true" to "scrollable: {virtual: true}". But this disables scrolling in the grid.

     

     

    $scope.source = new kendo.data.DataSource({
               batch: true,
               group: getDSGroup(),
               transport: {
                   read: userSvc.getUserList,
                   update: _dataUpdateItem
               },
               error: function (e) {
                   ngDialog.openConfirm({
                       template: 'httpErrorDialogId',
                       className: 'ngdialog-theme-default',
                       data: {
                           'status': e.status,
                           'message': e.errorThrown
                       }
                   });
               },
               schema: {
                   parse: function (data) {
                       $rootScope.$log.log("User list was fetched.");
                       if ($rootScope.sysSettings.userMgr_serverPaging)
                           return data;
                       for (var i = 0; i < data.items.length; i++) {
                           data.items[i].letter = data.items[i].lastName.substr(0, 1).toUpperCase();
                           if (data.items[i].departmentName == null) data.items[i].departmentName = $rootScope.$translate.instant("Unassigned");
                           if (data.items[i].userGroupName == null) data.items[i].userGroupName = $rootScope.$translate.instant("Unassigned");
                       }
                       return data;
                   },
                   model: { id: "id" },
                   groups: "groups",
                   total: "totalItems",
                   data: "items"
               },
               filter: getDSFilter(),
               sort: getDSSort(),
               pageSize: $rootScope.sysSettings.userMgr_serverPaging ? 10 : 0,
               serverGrouping: $rootScope.sysSettings.userMgr_serverPaging,
               serverPaging: true,
               serverSorting: $rootScope.sysSettings.userMgr_serverPaging,
               serverFiltering: $rootScope.sysSettings.userMgr_serverPaging
           });
     
           $scope.userListOptions = {
               //sortable: true,
               groupable: true,
               selectable: false,
               //pageable: true,
                
               scrollable: {
                   virtual: true
               },
               //dataBound: function() {
               //  this.expandRow(this.tbody.find("tr.k-master-row").first());
               //},
               columns: [{
                   field: "firstName",
                   template: kendo.template($("#tpl-UserItem").html())
     
               },
               {
                   field: "letter",
                   hidden: true,
                   groupHeaderTemplate: "#= value #"
               }]
           };
     
           $scope.isEndlessScroll = function () {
               return $rootScope.sysSettings.userMgr_serverPaging;
           };

  2. Vasil
    Admin
    Vasil avatar
    1642 posts

    Posted 02 Feb 2016 Link to this post

    Hi achu,

    The "virtual" option should be enabled initially for the scrolling to work correctly, since it completely changes the way internal logic of the grid works when it comes to the scroll. It can not be changed on the fly.

    Regards,
    Vasil
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. achu
    achu avatar
    8 posts
    Member since:
    Jan 2016

    Posted 02 Feb 2016 in reply to Vasil Link to this post

    Hi Vasil,

     Thanks for the reply. The virtual option is enabled as per the demo on telerik and I compared my code but did not notice any difference.

    The data is being retrieved perfectly but when the user scrolls down data is not retrieved because the scroll bar is disabled.


    Can you be more specific on where it's going wrong.Thanks

  4. Vasil
    Admin
    Vasil avatar
    1642 posts

    Posted 04 Feb 2016 Link to this post

    Hi achu,

    Indeed your code looks correct. It is hardly to say why it is not working without testing example.
    Could you please check the browser console and tell if you get any JavaScript errors when you perform scrolling. Also check the network tab to see if the data is coming from your sever.

    Regards,
    Vasil
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. achu
    achu avatar
    8 posts
    Member since:
    Jan 2016

    Posted 04 Feb 2016 in reply to Vasil Link to this post

    Hi Vasil,

     I checked the console and there were no java script errors and the data is coming from the server perfectly. But the problem is when I set the page size to 20 for instance, I am getting all the data from the server(lets say some 1000 items) but when I try to scroll after the 20 items the scroll is disabled.

    Expected Output :- After 20 items the scroll should hit the server and load data on demand and fetch data.

    Thanks

  6. Dimo
    Admin
    Dimo avatar
    8485 posts

    Posted 08 Feb 2016 Link to this post

    Hello achu,

    There are two separate problems here and they are probably caused by the following:

    - initial data response contains all 1000 items

    Assuming that the Grid dataSource is correctly configured for server operations (paging, sorting, filtering, grouping, aggregates), then the problem is that the remote service ignores the paging-related parameters and returns all data. In other words, please check in the browser's network console if the Grid dataSource includes paging-related parameters in the request, and if yes, check the data service implementation.

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverPaging


    - disabled scrollbar

    This indicates that the Grid has incorrect information about the total number of items, and does not construct the virtual scrollbar correctly. This may again be related to incorrect server response and/or incorrectly set DataSource schema.

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

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total

    ===

    On a side note, please keep in mind that virtual scrolling cannot be used together with grouping. Setting an approprite Grid height is also mandatory. Please see the following documentation section for details.

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#virtual-scrolling

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. achu
    achu avatar
    8 posts
    Member since:
    Jan 2016

    Posted 09 Mar 2016 Link to this post

    Hi,

    I am trying to remove grouping on one level of web page. What I mean by one level is : There's only one HTML and one JS file but the view on the web page changes dynamically based on some criteria.The problem is  when I try to set the group to null on one level the next level is being affected and I see error in console.

    Below is the error: 

    TypeError: Cannot read property 'length' of undefined
        at y (http://localhost:53538/assets/kendo/js/kendo.all.min.js:10:29731)
        at ut.extend.flatView (http://localhost:53538/assets/kendo/js/kendo.all.min.js:11:19203)
        at Z.extend.dataItems (http://localhost:53538/assets/kendo/js/kendo.all.min.js:9:31981)
        at ct.ui.DataBoundWidget.extend.dataItems (http://localhost:53538/assets/kendo/js/kendo.all.min.js:30:11583)
        at http://localhost:53538/assets/kendo/js/kendo.all.min.js:10:63
        at http://localhost:53538/assets/kendo/js/kendo.all.min.js:55:16900
        at i (http://localhost:53538/assets/kendo/js/kendo.all.min.js:55:7369)
        at Object.<anonymous> (http://localhost:53538/assets/kendo/js/kendo.all.min.js:55:16877)
        at n.(anonymous function) [as angular] (http://localhost:53538/assets/kendo/js/kendo.all.min.js:55:13937)
        at Z.extend._angularItems (http://localhost:53538/assets/kendo/js/kendo.all.min.js:10:3)(anonymous function) @ angular.js:11594(anonymous function) @ angular.js:8544Scope.$broadcast @ angular.js:14705Scope.$destroy @ angular.js:14323c.extend.destroy @ kendo.all.min.js:27(anonymous function) @ kendo.all.min.js:55Scope.$broadcast @ angular.js:14703Scope.$destroy @ angular.js:14323cleanupLastIncludeContent @ angular.js:22139ngIncludeWatchAction @ angular.js:22191Scope.$digest @ angular.js:14226Scope.$apply @ angular.js:14489(anonymous function) @ angular-touch.js:471b.event.dispatch @ jquery.min.js:3v.handle @ jquery.min.js:3
    angular.js:11594 TypeError: Cannot read property 'length' of undefined
        at y (http://localhost:53538/assets/kendo/js/kendo.all.min.js:10:29731)
        at ut.extend.flatView (http://localhost:53538/assets/kendo/js/kendo.all.min.js:11:19203)
        at Z.extend.dataItems (http://localhost:53538/assets/kendo/js/kendo.all.min.js:9:31981)
        at ct.ui.DataBoundWidget.extend.dataItems (http://localhost:53538/assets/kendo/js/kendo.all.min.js:30:11583)
        at http://localhost:53538/assets/kendo/js/kendo.all.min.js:10:63
        at http://localhost:53538/assets/kendo/js/kendo.all.min.js:55:16900
        at i (http://localhost:53538/assets/kendo/js/kendo.all.min.js:55:7369)
        at Object.<anonymous> (http://localhost:53538/assets/kendo/js/kendo.all.min.js:55:16877)
        at n.(anonymous function) [as angular] (http://localhost:53538/assets/kendo/js/kendo.all.min.js:55:13937)
        at Z.extend._angularItems (http://localhost:53538/assets/kendo/js/kendo.all.min.js:10:3)(anonymous function) @ angular.js:11594(anonymous function) @ angular.js:8544Scope.$broadcast @ angular.js:14705Scope.$destroy @ angular.js:14323cleanupLastIncludeContent @ angular.js:22139ngIncludeWatchAction @ angular.js:22191Scope.$digest @ angular.js:14226Scope.$apply @ angular.js:14489(anonymous function) @ angular-touch.js:471b.event.dispatch @ jquery.min.js:3v.handle @ jquery.min.js:3

    This is how i made the group to null on one level: 

    function getDSGroup() {
                var s = null;
                
                if ($scope.siteSurveyCtrl.currentSite().id == 'A')
                    s = {
                        field: 'Floor'
                    };
                else if ($scope.siteSurveyCtrl.currentSite().id == 'F') {
                    return s;
                }
                else
                    s = {
                        field: 'letter'
                    };
     
                return s;
            }

    This is my source : 

    $scope.source = new kendo.data.DataSource({
               batch: true,
               group: getDSGroup(),
               transport: {
                   create: _dataAddItem,
                   read: _dataGetList,
                   update: _dataUpdateItem,
                   destroy: _dataDeleteItem
               },
               error: function (e) {
                   ngDialog.openConfirm({
                       template: 'httpErrorDialogId',
                       className: 'ngdialog-theme-default',
                       data: {
                           'status': e.status,
                           'message': e.errorThrown
                       }
                   });
               },
     
               schema: {
                   parse: function (data) {
     
                       if ($rootScope.sysSettings.siteSurvey_serverPaging) {
                            
                           return data;
                       }
                       if ($scope.siteSurveyCtrl.currentSite().id == 'A')
                           return data;
                       for (var i = 0; i < data.items.length; i++) {
                           if (data.items[i].name == null)
                               data.items[i].name = $rootScope.$translate.instant("Unassigned");
                           data.items[i].letter = data.items[i].name.substr(0, 1).toUpperCase();
                       }
                     
     
                       return data;
                   },
     
                   model: {
                       id: "id"
                   },
                   groups: "groups",
                   total: "totalItems",
                   data: "items"
               },
               //filter: getDSFilter(),
               sort: getDSSort(),
               pageSize: $rootScope.sysSettings.siteSurvey_serverPaging ? 100 : 0,
               serverGrouping: $rootScope.sysSettings.siteSurvey_serverPaging,
               serverPaging: $rootScope.sysSettings.siteSurvey_serverPaging,
               serverSorting: $rootScope.sysSettings.siteSurvey_serverPaging,
               serverFiltering: $rootScope.sysSettings.siteSurvey_serverPaging
           });
    var grid = $scope.var.listViewWidget;
               grid.setOptions({
                   sortable: true,
                   groupable: true,
                   navigatable: true,
                   selectable: 'row',
                   //pageable: true,
                   scrollable: {
                       virtual: true
                   },
                   columns: [
                       {
                           field: "name",
                           template: kendo.template($("#tpl-SiteItem").html())
                       }, {
                           field: "letter",
                           hidden: true,
                           groupHeaderTemplate: "#= value #"
                       }, {
                           field: "Floor",
                           hidden: true,
                           groupHeaderTemplate: "#= value #"
                       }
                   ]
               });

    I have attached images of expected result and current result images below.

    Regards,

  8. Answer
    Dimo
    Admin
    Dimo avatar
    8485 posts

    Posted 11 Mar 2016 Link to this post

    Hello achu,

    The JavaScript error is caused by the group: null configuration setting. A valid value should be an array or an object. You can set an empty array instead of null.

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-group

    On a side note, please post questions, which are completely unrelated to the original thread topic, in another forum thread.

    Your Kendo UI Professional trial has recently expired. Please purchase a commercial license in order to be able to continue using the product and benefit from our support service

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. achu
    achu avatar
    8 posts
    Member since:
    Jan 2016

    Posted 11 Mar 2016 Link to this post

    That works.Thanks a lot. 
Back to Top