This is a migrated thread and some comments may be shown as answers.

KendoGrid virtual scroll vertical scroll not shown on initial load

2 Answers 248 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Qamar
Top achievements
Rank 1
Qamar asked on 15 Feb 2015, 10:06 AM
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.

2 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 17 Feb 2015, 10:16 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Sam
Top achievements
Rank 1
answered on 29 Jun 2017, 08:20 PM

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

});

Tags
Grid
Asked by
Qamar
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Sam
Top achievements
Rank 1
Share this question
or