Height adjustment for grid within splitter pane

[Juergen]

Using Q1 2011 we would like to create a Telerik splitter control where the upper pane is filled with a Grid control.
If the user changes the height of the pane the grid should be adjusted, showing scrollbars _within_ the grid, if necessary.

Simplified code may be:

@{Html.Telerik().Splitter()
    .Name("QueryResultSplitter")
    .HtmlAttributes(new { style = "min-height: 800px; width: 100%;" })
    .Orientation(SplitterOrientation.Vertical)
    .Panes(panes =>
    {
      panes.Add()
           .Collapsible(true)
           .Size("50%")
           .Content(
@<text>
@(Html.Telerik().Grid<QueryHit>()
        .Name("QueryResultGrid")
        .Columns(columns =>
            columns.LoadSettings((IEnumerable<GridColumnSettings>)ViewData["Columns"]))
        .Resizable(resizing => resizing.Columns(true))
        .Scrollable(scrolling => scrolling
           .Enabled(true)
           .Height("auto"))
        .HtmlAttributes(new { style = "height: 99%;" })
        .Pageable(settings => settings.Total((int)ViewData["total"]).PageTo((int)ViewData["PageTo"]).PageSize((int)ViewData["PageSize"]))
        .EnableCustomBinding(true)
        .DataBinding(dataBinding => dataBinding.Ajax().Select("_QueryResult", "Query"))
        .Selectable()
        .ClientEvents(events => events.OnRowSelect("onRowSelect"))
        .Sortable()
        .Groupable()
 )
</text>
          );
      panes.Add()
           .Collapsible(true)
           .Size("50%")
           .LoadContentFrom("Index", "Document", new { id = "0_0" });
    })
    .Render();
}

The critical point here seems to be:
        .Scrollable(scrolling => scrolling
           .Enabled(true)
           .Height("auto"))

I checked all possible versions for Height():
- "auto" will show all rows of the page and create a scrollbar for the splitter pane, if it's size gets too small, ending up in two vertical scrollbars (one scrollbar _within_ the grid, but disabled, and a second outside of the grid, working).
- A percent value will be related to the height of the splitter pane, what does not help here.
- A pixel value is not what we want.

What we need is something like .Height("adjust") just filling the remaining table place using the internal scrollbar if necessary.

Is there any solution for this?

Regards
Juergen

[Juergen]

Solved, I found a JavaScript solution for this issue.

[alex]

Hi, post your solution for it please, thanks

[Kevin]

Could you please post the javascript solution to this?

[Juergen]

This solution works for me:

@{Html.Telerik().Splitter()
  .Name("QueryResultSplitter")
  .HtmlAttributes(new { style = "min-height: 850px; width: 100%;" })
  .Orientation(SplitterOrientation.Vertical)
  .ClientEvents(events => events
    .OnResize("onResize"))
  .Panes(panes =>
  {
    panes.Add()
         .Collapsible(true)
         .Size("50%")
         .Content(
          @<text>
          @(Html.Telerik().Grid<Mvc3Telerik.Models.QueryHit>()
                  .Name("QueryResultGrid")
                  .Columns(columns =>
                      columns.LoadSettings((IEnumerable<GridColumnSettings>)ViewData["Columns"]))
                  .Resizable(resizing => resizing.Columns(true))
                  .Scrollable(scrolling => scrolling
                     .Enabled(true)
                     .Height(200))
                  .ClientEvents(events => events
                      .OnLoad("onLoad"))
                  [...]
                  )) </text>);
      panes.Add()
           .Collapsible(true)
           .Size("50%")
           .Resizable(true)
           .Scrollable(true)
           [...]
    })
    .Render();
}

<script type="text/javascript">

  function getSplitter() {
    var splitter = $("#QueryResultSplitter").data("tSplitter");
    return splitter;
  }

  function onLoad(e) {
    adjustGridSize();
  }

  function onResize(e) {
      adjustGridSize();
  }

  function adjustGridSize()  {
    var splitter = getSplitter();
    if (typeof splitter != 'undefined') {
      var pane1 = splitter.element.children[0];
      var height1 = pane1.clientHeight;

      var group_header = $('#QueryResultGrid .t-grouping-header');
      var height_t1 = group_header.outerHeight(true);

      var grid_header = $('#QueryResultGrid .t-grid-header');
      var height_t2 = grid_header.outerHeight(true);

      var grid_pager = $('#QueryResultGrid .t-grid-pager');
      var height_t3 = grid_pager.outerHeight(true);

      var height_content = height1 - height_t1 - height_t2 - height_t3 - 2;

      var grid_content = $('#QueryResultGrid .t-grid-content');
      grid_content.height(height_content);     
    }
  }
</script>

[Lasse]

Thanks for sharing - works like a charm!