Telerik Forums / Kendo UI Integration
This is a migrated thread and some comments may be shown as answers.

kendo grid virtual scrolling not working when grid is not visible on databind

2 Answers 847 Views
Integration with other JS libraries
This is a migrated thread and some comments may be shown as answers.
Boris
Top achievements
Rank 1
Boris asked on 10 Aug 2017, 06:56 PM

I'm binding the grid to an array with a separate function as i was instructed here.

The problem is that virtual scrolling doesn't work when the grid is not visible when I attach data to the data source.

Here is a Dojo

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
    <script src="../content/shared/js/people.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
      <a href="" ng-click="ShowGrid = !ShowGrid">Toggle Grid</a>
      <div ng-show="ShowGrid">
        <div kendo-grid="mainGrid" options="mainGridOptions" k-data-source='mainGridDataSource'>
      </div>   
   </div>
 
 
    </div>
</div>
 
<style>
  .contact-info-form {
    list-style-type: none;
    margin: 30px 0;
    padding: 0;
  }
 
  .contact-info-form li {
    margin: 10px 0;
  }
 
  .contact-info-form label {
    display: inline-block;
    width: 100px;
    text-align: right;
    font-weight: bold;
  }
</style>
 
<script>
    angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
       
                $scope.ShowGrid = false;
                $scope.mainGridDataSource =  new kendo.data.DataSource({data:[], pageSize: 100});
            $scope.mainGridOptions = {
                sortable: true,
                height: 543,
                //pageSize:100,
                //dataSource: {pageSize: 100, data:[]},
                scrollable: {
                            virtual: true
                        },
                pageable: {
                  numeric: false,
                  previousNext: false,
                  messages: {
                    display: "Showing {2} data items"
                  }
                },
                columns: [{
                    field: "FirstName",
                    title: "First Name",
                    width: "120px"
                    },{
                    field: "LastName",
                    title: "Last Name",
                    width: "120px"
                    },{
                    field: "City",
                    width: "120px"
                    },{
                    field: "Title"
                }]
            };
       
        generatePeople(5000, function(results) {
            //console.log(results);
            $scope.mainGridDataSource.data(results);
             
           
        });
 
             
        })
</script>
 
 
</body>
</html>

2 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 14 Aug 2017, 11:38 AM
Hello Boris,

This is expected as the Grid rows does not have a height when its initialized for the first time due to the not visible container:

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

If the Grid will be initiated without the virtual options, and the options are set after the Grid is made visible inside a timeout function, the height of the rows will be calculated properly and the Grid will be scrollable.

I modified the example to demonstrate this approach:

http://dojo.telerik.com/ehEXEn/6

I hope this is helpful.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Boris
Top achievements
Rank 1
answered on 14 Aug 2017, 04:03 PM
Thank you!
Tags
Integration with other JS libraries
Asked by
Boris
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Boris
Top achievements
Rank 1
Share this question
or