Client resize radsplitter

[Gosha]

I have RadWindow, inside page with RadTabStrip/RadMultiPage, each RadPageView have RadSplitter with Width/Height=100%. RadSplitter usualy have 2 horizontal panels, up for main content (grid or test boxes) and bottom is height=40 for buttons like Save/Cancel. When I open RadWindow, RadSplitter fills entire space and controls iniside fills pane and everything is ok.


When I resize RadWindow at same time is RadSplitter resized to fill space and that is ok but only in active RadPageView. Other  RadSplitters in other RadPageViews is frozen to initial size and it looks ugly and the useless.
How to persuade all RadSplitters in all RadPageViews to resize and fill Width/Height=100% when I resize RadWindow?


It can be done by some client function on RadTabStrip.OnClientTabSelected but what to do with RadPageViews without tabs? 
I have some RadPageViews that are accessed by code behind (not by tabs) and there is no RadMultiPage.OnClientSelected event. 

[Niko]

Hi Gosha,

The RadSplitter control would only resize if it is visible. That is the reason why the other(invisible) splitters are not resizing.

From your description of the problem that you are experiencing, I understand that you are using the RadSplitter only for the purpose of aligning the OK/Cancel buttons at the bottom part of the RadWindow.

If that is the case and you insist on using the splitter, then you should find a way to capture the moment a splitter becomes visible, i.e. when a tab is selected, and force the splitter to resize then. The OnClientTabSelected event appears like the best choice for that purpose. Then making sure that you have the correct dimensions of the splitter you can invoke its resize method. Otherwise I would suggest that you do not use the splitter and implement a CSS only approach for aligning the buttons at the bottom part of the window.

Hope this helps.

Best wishes,
Niko
the Telerik team

[Gosha]

Ok, I'll use function OnTabSelected event, so, how to write javascript code for:

$find any splitter ControlID on selected PageView    
splitter resize




 

[Niko]

Hi Gosha,

Your approach is absolutely correct. Still I will give you a small hint that you may find helpful. Set the splitter IDs with a suffix the tab index that they are at. For example, if the RadSplitter is in the first tab, then it should have the ID="RadSplitter0". After that in the OnClientTabSelected event handler you can have the following construction to capture the corresponding splitter:

function tabSelectedHandler(tabStrip, args)
{
    var splitter = $find("RadSplitter" + args.get_tab().get_index());
}

After that just use the resize method to resize the splitter.

Hope this helps.

Kind regards,
Niko
the Telerik team

[Gosha]

I was expecting something like

for each control in pageview
   if control.type == "splitter"
        control.resize
  
but if this can not be done in javascript, i'll implement your idea  

[Niko]

Hi Gosha,

The for cycle is also possible, but I find it a bit useless. You need to fix the appearance only of the splitter that is currently being shown, not all. Otherwise it will be a waste of computing resources and precious calculating time.

Hope this explains the described intentions in my previous post.

Kind regards,
Niko
the Telerik team

[Gosha]

I found this function resize Splitter to 100% (inside RadWindow) but I dont know what means first 3 lines. Can you explain to me so it could use for other purposes. I understand that they get height and width of something (RadWindow?) but how?

var $ = $telerik.$;
var height = $(window).height();
var width = $(window).width();
var splitter = $find("RadSplitter" + args.get_tab().get_index());
splitter.resize(width, height - 25);

[Niko]

Hi Gosha,

Please, find a short explanation to each of the first three lines of the code sample you have provided:

var $ = $telerik.$;//this line creates a short-cut function for the jQuery library
var height = $(window).height(); //the window object is the base(root) DOM object, not a RadWindow element.
var width = $(window).width();

Hope this helps.

Best wishes,
Niko
the Telerik team