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

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

    Posted 10 Aug 2017 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>
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <script src="../content/shared/js/people.js"></script>
    <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'>
      .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;
        angular.module("KendoDemos", [ "kendo.directives" ])
            .controller("MyCtrl", function($scope){
                    $scope.ShowGrid = false;
                    $scope.mainGridDataSource =  new{data:[], pageSize: 100});
                $scope.mainGridOptions = {
                    sortable: true,
                    height: 543,
                    //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) {
  2. Answer
    Stefan avatar
    2831 posts

    Posted 14 Aug 2017 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:

    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:

    I hope this is helpful.

    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
    18 posts
    Member since:
    Feb 2015

    Posted 14 Aug 2017 in reply to Stefan Link to this post

    Thank you!
Back to Top