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

[achu]

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;
       };

[Vasil]

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

 

 

[achu]

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

[Vasil]

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

 

 

[achu]

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

[Dimo]

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

 

 

[achu]

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,

[Dimo]

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

[achu]

That works.Thanks a lot.