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

3 posts, 1 answers
  1. Boris
    Boris avatar
    15 posts
    Member since:
    Feb 2015

    Posted 10 Aug Link to this post

    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. Answer
    Stefan
    Admin
    Stefan avatar
    1027 posts

    Posted 14 Aug Link to this post

    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.
  3. Boris
    Boris avatar
    15 posts
    Member since:
    Feb 2015

    Posted 14 Aug in reply to Stefan Link to this post

    Thank you!
Back to Top