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

Height adjustment for grid within splitter pane

5 Answers 164 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Juergen
Top achievements
Rank 1
Juergen asked on 04 Apr 2011, 04:28 PM
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

5 Answers, 1 is accepted

Sort by
0
Juergen
Top achievements
Rank 1
answered on 05 Apr 2011, 04:15 PM
Solved, I found a JavaScript solution for this issue.
0
alex
Top achievements
Rank 1
answered on 28 Apr 2011, 03:55 PM
Hi, post your solution for it please, thanks
0
Kevin
Top achievements
Rank 1
answered on 29 Apr 2011, 07:01 AM
Could you please post the javascript solution to this?
0
Juergen
Top achievements
Rank 1
answered on 29 Apr 2011, 09:54 AM
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>

0
Lasse
Top achievements
Rank 1
answered on 16 Jan 2012, 03:44 PM
Thanks for sharing - works like a charm!
Tags
Grid
Asked by
Juergen
Top achievements
Rank 1
Answers by
Juergen
Top achievements
Rank 1
alex
Top achievements
Rank 1
Kevin
Top achievements
Rank 1
Lasse
Top achievements
Rank 1
Share this question
or