Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.
Lazy Loading not working on setting scrollable: {virtual: true} in Kendo Grid
8 Answers 234 Views
Grid
This is a migrated thread and some comments may be shown as answers.
achu
Top achievements
Rank 1
achu asked on 01 Feb 2016, 07:38 PM

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

8 Answers, 1 is accepted

Sort by
0
Vasil
Telerik team
answered on 02 Feb 2016, 09:02 AM
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!
 
0
achu
Top achievements
Rank 1
answered on 02 Feb 2016, 03:19 PM

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

0
Vasil
Telerik team
answered on 04 Feb 2016, 08:28 AM
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!
 
0
achu
Top achievements
Rank 1
answered on 04 Feb 2016, 04:12 PM

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

0
Dimo
Telerik team
answered on 08 Feb 2016, 03:28 PM
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!
 
0
achu
Top achievements
Rank 1
answered on 09 Mar 2016, 04:31 PM
current-result.png
expected.png

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,

0
Accepted
Dimo
Telerik team
answered on 11 Mar 2016, 12:18 PM
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!
0
achu
Top achievements
Rank 1
answered on 11 Mar 2016, 07:03 PM
That works.Thanks a lot. 
Tags
Grid
Asked by
achu
Top achievements
Rank 1
Answers by
Vasil
Telerik team
achu
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or