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

[Solved] Resizing Controls Within Splitter Panes

3 Answers 228 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Don
Top achievements
Rank 1
Don asked on 21 Apr 2011, 10:41 PM
I'm having trouble docking controls within a splitter pane so that they fill the pane and resize properly when the splitter resizes.  Particularly, I cannot get a Grid to dock and resize correctly.  Does anyone have any examples they can point me towards that demonstrate really good layout behavior using the splitter?

The UI behavior I'm trying to accomplish is:

1. On initial load, the grid should fill the splitter pane so that the control portions of the grid (toolbar, group panel, paging panel) are visible.  The visible rows are scrollable if paging size causes grid height to exceed available space in splitter pane.

- Currently, the grid fills the pane on initial load, but in a way that requires scrolling down to get to the paging toolbar.

Optionally, can the paging toolbar be moved to the top of the grid?

2. When the browser window is resized, grid should expand/shrink accordingly, with the toolbars always visible and only the number of visible rows changing.

-The splitter itself is resizing along with the window, but the controls within it do not resize unless I move a splitter bar.  I've attempted adding the following from a "FullScreenSplitter" example found in another thread:

@(Html.Telerik().ScriptRegistrar()
    .DefaultGroup(group => group
        .Combined(true)
        .Compress(true)
    )
    .OnDocumentReady(@<text>
        var splitter = $('#FullScreen').data('tSplitter');
 
        $(window).bind('resize', function() {
            splitter.resize();
        });
    </text>)
)


3. When splitter bars are resized, grid should expand horizontally or vertically accordingly.  The grid should always fill the pane so that toolbars are always visible at the top and bottom of the pane.  If the pane is expanded vertically beyond the height of the grid, the empty space should appear between the last visible row and the bottom of the grid/paging toolbar.

Thank you.
Don

3 Answers, 1 is accepted

Sort by
0
Juergen
Top achievements
Rank 1
answered on 29 Apr 2011, 09:57 AM
Perhaps this thread may help you?

http://www.telerik.com/community/forums/aspnet-mvc/grid/height-adjustment-for-grid-within-splitter-pane.aspx
0
Don
Top achievements
Rank 1
answered on 29 Apr 2011, 09:05 PM
Thanks, Jeurgen!
0
John DeVight
Top achievements
Rank 1
answered on 12 May 2011, 04:57 PM
Take a look at this wiki page.  Even though the control that is being resized is a tabstrip, a similar solution could be applied to a grid within a splitter.

http://aspnet.wikidot.com/telerik-mvc:resizing-controls-within-splitter-panes
Tags
Splitter
Asked by
Don
Top achievements
Rank 1
Answers by
Juergen
Top achievements
Rank 1
Don
Top achievements
Rank 1
John DeVight
Top achievements
Rank 1
Share this question
or