KendoGrid virtual scroll vertical scroll not shown on initial load

[Qamar]

Hi,

I have a kendo Grid inside a splitter pane. It seems to work fine except one issue, the vertical scroll to load more records not show until splitter panel is resized. So on initial load of data it does not get displayed and I have no way of scrolling down to get more data. Please see attached.

But I kind of know the issue, its due to the fact that scroll div height is not set to a higher value. If I set it to a higher value the vertical scroll comes back and I can scroll down to load more records. Here is what gets generate on initial load of grid.

<div class="k-scrollbar k-scrollbar-vertical" style="width: 18px;"><div style="width:1px;height:120px"></div></div>

Once I resize the pane the height gets changes from 120 px to a higher value and everything works as expected.

<div class="k-scrollbar k-scrollbar-vertical" style="width: 18px;"><div style="width:1px;height:717px"></div></div>

Here is my grid code

@(Html.Kendo().Splitter()
    .Name("DeliverableSplitter")
    .Orientation(SplitterOrientation.Horizontal)
    .Panes(h =>
      {
          h.Add().Size("85%").Content(
              (Html.Kendo().Splitter().Name("GridsSlitter")
              .Orientation(SplitterOrientation.Vertical)
              .Panes(v =>
              {
                  v.Add().Size("50%").Content(@<div>@(Html.Kendo().Grid<DeliverableListViewModel>()
                                                              .Name("listOfDeliverables")
                                                              .AutoBind(true)
                                                              .Events( e => e.DataBound("setDeliverableGridScrollHeight"))
                                                              .Columns(columns =>
                                                              {
                                                                  columns.Bound(p => p.Name);
                                                                  columns.Bound(p => p.Number);
                                                                  columns.Bound(p => p.Code);
                                                                  columns.Bound(p => p.Discpline);
                                                                  columns.Bound(p => p.Acf).Title("Allocated Current Forecast");

                                                              })
                                                              .ToolBar(toolbar => toolbar.Template("<button class='k-button k-button-icontext' onClick='customExport()'><span class='k-icon k-i-excel'></span>Export to Excel</button>" +
                                                                                                   "<button class='k-button k-button-icontext' onClick='customImport()'><span class='k-icon k-i-excel'></span>Import from Excel</button>"))
                                                              .Sortable()
                                                              .Scrollable(scrollable => scrollable.Virtual(true))
                                                              .Selectable(sel =>
                                                              {
                                                                  sel.Mode(GridSelectionMode.Single);
                                                                  sel.Type(GridSelectionType.Row);
                                                              })
                                                              .Filterable(filterable => filterable
                                                                  .Extra(false)
                                                                  .Operators(operators => operators
                                                                      .ForString(str => str.Clear()
                                                                          .StartsWith("Starts with")
                                                                          .IsEqualTo("Is equal to")
                                                                          .IsNotEqualTo("Is not equal to")
                                                                      )))
                                                              .Groupable()
                                                              .Resizable(r => r.Columns(true))
                                                              .DataSource(dataSource => dataSource
                                                                  .Ajax()
                                                                  .PageSize(10)
                                                                  .Events(e => e.Error("error_handler"))
                                                                  .Read(read => read.Action("Deliverables_Read", "Deliverable").Data("passProjectWbsAndActivityId"))
                                                              ))
    </div>);
                  v.Add().Size("40%").Content(@<div><div id="details"></div></div>);
              }).ToHtmlString()));

          h.Add().Content(@<div><div id="earnedHour"></div><div class="clear"></div><div id="performanceFactor"></div></div>);
    }))

I am stuck with this issue for more than a day now and its a show stopper. I even tried to change the height of vertical grid on databound event but cant get it to work. Kendo overrides the element.

[Rosen]

Hello Qamar,

The cause for the issue you have described is the fact that the grid is not fully visible/its layout is not fully initialized when splitter is sized. In order to correct this you will need to use the splitter layoutChange event to reset the rowHeight field (which is used for calculation of the virtual scrollbar height):

@(Html.Kendo().Splitter()
     .Name("DeliverableSplitter")
     .Events(events => events.LayoutChange("layoutChange"))
     /*..*/
)
<script>
    function layoutChange() {
        var grid = $("#listOfDeliverables").getKendoGrid();
        grid._rowHeight = null;
    }
</script>

Regards,
Rosen
Telerik

 

 

[Sam]

That was helpful.  This worked for me:

$(document).ready(function () {

    // These 2 lines are required to get a grid within a hidden tab
    //   to display the scroll bar and to size correctly
    $("#MyGrid").getKendoGrid()._rowHeight = null;
    $("#MyGrid > div.k-grid-content").height(516);

});