My goal is to design such a functionality:
- there is a RadSplitter on the form filling almost 100% of the window
- I don't want to fill exactly 100% using radSplitter.Height = 100% - I want to have some margin outside the RadSplitter and I don't want to set body's margin to 0
- resizing the browser's window should force proper resizing of the RadSplitter
The idea of the solution is:
- RadSplitter.Width = 100%
- RadSplitter.Height is calculated - initially in Page_Load
- window size changes are caught by body.onresize event and sent to the codebehind via Ajax Request where the RadSplitter's height is recalculated
It's not important how the height is calculated; it works and it is not a problem.
I'm not sure if it is the easiest and most effective but it works - as long as we talk about the height.
The problem is that the RadSplitter's width doesn't want to be 100% after Ajax Request: it just remains unchanged; precisely: gets 100% and then - back to the previous width. When Ajax Request is switched off - width behaves as expected: it is 100% all the time.
Well, I've done some other experiment: I've replaced RadSplitter with a pure "div". And this pure div works as expected - tracks al the window size changes perfectly.
So, what can be the problem with the RadSplitter? I can prepare a simple project on demand..
8 Answers, 1 is accepted
I noticed that you are using an old version of the Telerik.Web.UI assembly and I think we had such a problem in one of our previous versions. Could you please download our latest internal build from your Client.Net account and test your page against it? In case you continue to have problems, it would be best if you could open a new support ticket and send us a working project that demonstrates them.
the Telerik team
I'm using 2009.2.701.20 version of Telerik.Web.UI.
I've just fixed the problem. The reason is my too little knowledge of RadSplitter's principles ;-) As I understand now, when a splitter is verical (as in my example):
- all its panes are adjusted vertically to the splitters height
- splitter's width is adjusted to the total width of all panes
So, in my case I must change the splitter's height (as I've been doing) and the panes' total width (for example adjust the width of the rightmost pane). I've corrected my example and it works fine (i.e. as expected :-) )
In a horizontal splitter case, the width of the splitter and the height of one of panes should be adjusted.
I'm sorry for making mess here :-(
Can you help me add the same functionality to my spliter as well.
I need to make the splitter almost 100% of the IE ... How to ...
Thanks in advance.
The solution, you have found , requires the splitter to be 100% of the window - in both directions. It is not always possible. The principles of my solution are:
- the splitter has absolute sizes (in pixels)
- its initial sizes are calculated server side assuming the window has some arbitrary sizes
- just after page load, the splitter sizes are changed (client side) as if the window were resized form these assumed sizes to the real, current sizes
- since then, the splitter tracks sizes of the window using the onresize event
I can put the detailed code here but earlier than on Friday.
Yes of course, will be of great help indeed.
thanks in advance
Here is the promised chunk of the code.
The markup is trivial - a horizontal splitter with two panes:
The body is set as follows:
First, at the server side, we set the initial sizes (assuming that the window is of some arbitrary sizes):
- at the page_load event adjust these calculated sizes to fit the real, current window sizes
- react to the window.onresize event tracking changes of window sizes
The code is:Try it! It's been tested under IE7, FF 3.0.5, Chrome 3.0, Opera 9.64 and Safari 4.0.4.
Some additional notes:
- I use RadControls Q3 2009; it is important because RadSplitter Q2 2009 behaves at the client side a little bit differently: you don't need set the pane's width and the splitter's height - exactly as at the server side
- imagine, that you have an iframe tag on the paneUpper panel and want to use the same mechanism to adjust the content of the page placed on it; under FF, Chrome, Opera and Safari you can do it without any changes; but under IE, the window placed on an iframe doesn't fire window.resize event when changing its height :-(; because of that, you cannot hook onresizehandler to the window.onresize but must call this function directly from the onresize handler of the hosting page
Uff, the post has became quite long. I hope it's clear enough. If not - ask me questions.
Good luck :-)
Post scriptum: at the client side, the splitter's width should be set in a more general way:
splitter.set_width(splitter.get_width() + deltaW);