The VwdCms.SplitterBar now supports both vertical and horizontal orientations

Introduction

The VwdCms.SplitterBar control is designed to give you column resizing in a two-column page layout. Use the splitter bar to resize a panel, div, table cell, or just about any control.

This control is ideal for pages that have a tree or a list of data items that vary in width.

The screenshots at the top of this article are an example of the VwdCms.SplitterBar in use, with a TreeView control in the left column of a table and a TextArea control in the right column. See the demo project (Example 1) for information on the TextArea sizing, scrolling, and text wrapping issue in IE 6 and IE 7, and how to overcome it.

Using the Control

Suggestion: Download the demo project rather than only the code for the control, as the demo project has many examples of how to use the control and how not to use it. The demo project has lots of descriptions and explanations of how to do things, so I won't bother repeating all of that information in this article.

To add the VwdCms.SplitterBar control to your project, just follow these steps:

Step 1: Copy these files into your project directory:

/App_Code/SplitterBar.cs

/VwdCmsSplitterBar.js

/vsplitter.gif

Step 2: Add the VwdCmsSplitterBar.js file to the HEAD section of your Web Form:

<scriptlanguage="javascript"type="text/javascript"><!--
function splitterOnResize(width)
{
// do any other work that needs to happen when the
// splitter resizes. this is a good place to handle
// any complex resizing rules, etc.
// make sure the width is in number format
if (typeof width == "string")
{
width = new Number(width.replace("px",""));
}
// now do something...
}
// -->
</script>

More Usage Examples

You can download many other examples of how to use the SplitterBar by clicking the 'Download demo' link at the top of this article.

Points of Interest

The most challenging part about building this control was the JavaScript and DHTML, because I wanted it to work in both IE and Firefox. At first, it seemed like the task would be pretty straightforward, but as I started testing and building the demo project examples, I kept finding little bugs that needed to be addressed. It can become pretty time consuming to hunt down all of these little issues, and I did my best to try to deal with most of them. If you find bugs, feel free to fix them and reply to this article with your suggestions for improvements.

When you try to implement the SplitterBar, you may find that your page is not behaving as you expected. I would like to warn you in advance about this - most of the issues that I found after I completed the control could be addressed by adjusting the CSS styles on the table or controls that I was applying the SplitterBar onto. Many times, our initial reaction is to think that a problem with the column resizing means that there is something wrong with the SplitterBar, and that is certainly possible, but I found that not to be the case most of the time.

The DOCTYPE (markup format specification) that you choose will have a profound impact on how your content is rendered by the browser. If you are having trouble getting styles to work as you expect, you may want to try using a different DOCTYPE. If you are getting strange results or it seems like the browser is ignoring your style settings, it it is interesting and worth the time to try rendering the page with no DOCTYPE at all. Completely remove it from the document, as some browsers, like IE 7, will still pick up the DOCTYPE even if it is commented out.

History

I have updated the VwdCms.SplitterBar based on some of the suggestions that you have made. Here is a list of the what has been added or changed:

Built in persistence of column width after a postback.

Better support for dealing with IFrames.

Clean-up of the JavaScript code in VwdCmsSplitterBar.js.

More code examples in the demo project including postbacks.

Ability to specify how the SplitterBar will handle IFrames.

An entire demo page dedicated to IFrames.

Double-clicking to minimize and maximize the column width.

Changed the OnResizeFunction event to OnResize.

Added the OnResizeStart event.

Added the OnResizeComplete event.

Added the OnDoubleClick event.

Added code examples for using the OnResizeStart, OnResize, and OnResizeComplete event handlers in the demo project.

Updated to support Master Pages and Container Controls (Naming Containers):

C# and JavaScript code work together to determine the ClientID of an element.

SplitterBar checks to see if it is in a NamingContainer so it can find the controls during the postback.

Added a new example (#7) to the demo project to demonstrate the use of the SplitterBar with Master Pages.

Added the link to the SplitterBar online demo.

Added a GridView Column Resizing example to the demo project.

Added a Horizontal Row Resizing functionality to the SplitterBar, and a new example to the demo project.

Added code to account for the window/document scrollLeft and scrollTop so the SplitterBar will continue to work properly when the page has been scrolled down or to the right.

Added Example 10 to the demo project - this is an example of using the Vertical and Horizontal Splitter Bars together to create a table with a resizable left column, and in the right column there are two rows which are resizable.

Added persistence during postbacks for the MinWidth, MaxWidth, MinHeight, and MaxHeight properties.

Comments and Discussions

Have you tried using your splitter bar with framework 4.5.1? I had all kinds of issues upgrading a web-app using your splitter bar which worked fine with framework 3.5. The original app used the Ajax Controls Toolkit 3.5 that had an internal Toolkit Script Manager that has been deprecated in the latest version and I had to add the System Script Manager from the System.Web.Optimization.dll. However, since doing so the aspx page using the splitter will no longer render the page correctly, as .css formatting and display of header logo icons fail to work along with the Splitter Bar, itself, which will not resize and gives the Java Script error message of Splitter Bar is undefined.

Sir thanx for this control..But my problem is what if i Flip the whole view vertically. every thing which is right to left becomes left to right. Now the controls for resizing will be on right of the splitter. I have used the right resize property , but this is not working. plz help..my email id is n.shrish@hotmail.com..plz answer this query..

On page load the splitter is showing at a certain width away from the where i have applied it, but when i resize the td , the alignment becomes correct, and splitter is shown at the seperation.. any help

<tablewidth="96%"border="1"><tr><tdid="tdTop">
This example demonstrates a Horizontal VwdCms.SplitterBar implemented with
a table that has a fixed height and contains two rows/cells.
This example demonstrates a Horizontal VwdCms.SplitterBar implemented with
a table that has a fixed height and contains two rows/cells.
This example demonstrates a Horizontal VwdCms.SplitterBar implemented with
a table that has a fixed height and contains two rows/cells.
This example demonstrates a Horizontal VwdCms.SplitterBar implemented with
a table that has a fixed height and contains two rows/cells.
</td></tr><tr><tdid="tdBottom">
Test 2
</td></tr></table>

I am using IE7. The splitter is appearing around 2 inches below the actual separator of the top and bottom rows. Can you help me?

I would like to show you the screen shot of what's happening but I don't know how to post an image.

I am not sure where to change the postition of the splitter? Isn't it automatic between the two rows it is dividing?

hi friends,i have added this splliterbar with a leftsided div.this div is inside updatepannel and having a treeview which is popoulating from table.all including splitter bar is working fine.but when i add a node to treeview and then click on splliterbar a runtime error occures errror is---- htmlfile: Unspecified error. and a line is coloured in vwdcmssplitter.js file line is...var op = sbar.primaryResizeTarget.offsetParent;

my all control control is inside updatepannel excluding splliterbar.when i put splliterbar inside updatepannel it gives error.

I nevertheless have an issue.I made a very simple test : the splitter bar works great, but the javascript function I set to the onResizeFunction parameter is never fired.

I tested with FF and IE, but none of the browser fires the javascript.

I had a look in the previous posts, but found nothing about a similar issue.Am I the only one to have this issue (that would suggest I make a rough error) or is this an issue you already know ?

Best regards,

Some code ?

TestSplitterBar.aspx

<%@PageTitle=""Language="C#"MasterPageFile="~/MasterPage.master"AutoEventWireup="true"CodeFile="TestSplitterBar.aspx.cs"Inherits="_Default"%><asp:ContentID="Content1"ContentPlaceHolderID="head"Runat="Server"></asp:Content><asp:ContentID="Content2"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server"><asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager><br/><br/><scriptlanguage="javascript"type="text/javascript"><!--
function splitterOnResize(width) {
// do any other work that needs to happen when the
// splitter resizes. this is a good place to handle
// any complex resizing rules, etc.
alert("splitterOnResize");
// make sure the width is in number format
if (typeof width == "string") {
width = new Number(width.replace("px", ""));
}
// now do something...
}
// -->
</script>
<VwdCms:SplitterBarrunat="server"ID="vsbSplitter1"LeftResizeTargets="tdGauche;divGauche"MinWidth="100"MaxWidth="700"BackgroundColor="lightsteelblue"BackgroundColorLimit="firebrick"BackgroundColorHilite="steelblue"BackgroundColorResizing="purple"SaveWidthToElement="txtWidth1"OnResizeFunction="splitterOnResize"style="background-image:url(images/cmnSplitter.gif);
background-position:center center;
background-repeat:no-repeat;"/><tablewidth="100%"><tr><tdid="tdGauche"><divid="divGauche"style="width: 100%"><textareaid="TextArea1"cols="20"rows="2"style="width: 100%"></textarea></div></td><tdid="tdDroite"><divid="divDroite"style="width: 100%"><textareaid="TextArea2"cols="20"rows="2"style="width: 100%"></textarea></div></td></tr></table><inputtype="text"id="txtWidth1"value="250px"style="width:70px;font-family:Verdana:font-size:10pt;"/><br/></asp:Content>

window.onload = splitterOnResize("");
function splitterOnResize(width) {
alert("splitterOnResize");
document.getElementById("txtWidth1").value = "xx";
// do any other work that needs to happen when the
// splitter resizes. this is a good place to handle
// any complex resizing rules, etc.
// make sure the width is in number format
if (typeof width == "string") {
width = new Number(width.replace("px", ""));
}
// now do something...
}

Cool program, but I am having a problem with a two column table. The splitter bar is in the right place, but it is about 20px below the top of the table AND it protrudes out the bottom of the table by the same distance (20px). I suspect this is some sort of style sheet issue, but I can't figure it out. I am using Visual Studio 2010 and a master document.

OK - It's not a table or CSS that I define. I have a asp menu control above the table I have the splitter bar linked to. For some reason the menu control makes the slitter drop down and actually extends out of the bottom of the table I have it linked to. Example code below...

at first thanks for this great and easy to use control.But I've a problem with FF 3.5 and IE8 when I add an onresize event to the body element.<body onresize="alert('You have changed the size of the window')">

I also tried it with your samples but my alert is never displayed.

In IE I don't really need it because it's easy to fix while your SplitterBar onresize event work simular.But using FF I found only a workaround to make a browser resize work.

Try using the window.onresize event since this is supported by FF. I have not done any testing recently, but my past experience is that FF does not fire the onresize event until the operation is complete while IE fires the event while the window is being resized.

Also note that using an alert during a resize event will prevent you from being able to test it in IE so I usually put a textarea, txtDebug, on the page and write messages to that textarea so I can continue resizing without interuptions.

window.onresize was the reason for that I recognize that it does not fire as I used your code posted here based on example 10 (vertical and horicontal scrollbars) for full screen size splittbars and FF browser resize takes no effect for the controls - for sure moving your bar does.So I was not able to find a way for a working resize event with FF.

Thanks for the hint with the textarea.Now I understand why this makes trouble with IE.

I have a page which is vertically divided into two panes by splitter bar.In my left pane ,I have a treeview control.When the Children of any node goes beyond 30 or 40 ,its just displaying only some 10 nodes.(i.e)Vertical scrollbar associated with splitter is not working properly.However ,this is working fine in IE 6.0.If any one knows,please help me out at the earliest.

How to keep persistent stage of width among all pages when we are using splitter in master page.

In my application I am using left content placeholder and middle content placeholder.In left I have menu and in right I have content and in middle I have splitter. on the first I am changing width of splitter from 150px to 20px and it is working fine, post back on same page is also working fine but when i go to another page it load default width 150px.I would like to keep it same among all pages once i change to minwidth or maxwidth.

I tried so many things but still it is not working so please help me in this case.

Because you want the width to persist across postbacks and new page requests (changing the url is a new request even if the same master page is used) you will need to save the width in a cookie and then set it based on the cookie value.

The hidden field, hdnWidth, gets set in the LoadPostData function. You could check to see if the request is not a postback and then check the cookie value and set the width accordingly. Naming the value in the cookie should be based on the master page rather than the content page and the min and max values would need to be set as well since those are also being set during the postback.

I put the splitter inside a master page and it worked fine, but when I tried to set the LeftColumnWidth property, an exception was thrown because the SetTargetControlWidths() method tried to check the Page.IsPostBack property when the Page was null.

Even taking out that check led to another exception in GetTargetControlIds because the NamingContainer was null.

Parser Error Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: The base class includes the field 'vsbSplitter1', but its type (VwdCms.SplitterBar) is not compatible with the type of control (VwdCms.SplitterBar).

I 've configured as you said,howerver "<vwdcms:splitterbar runat="server" id="vsbSplitter1" xmlns:vwdcms="#unknown"> LeftResizeTargets="tdTree1;divTree1" MinWidth="100" MaxWidth="700" BackgroundColor="lightsteelblue" BackgroundColorLimit="firebrick" BackgroundColorHilite="steelblue" BackgroundColorResizing="purple" SaveWidthToElement="txtWidth1" OnResizeFunction="splitterOnResize" style="background-image:url(vsplitter.gif); background-position:center center; background-repeat:no-repeat;"/>", shows message of "element 'SplitterBar' is not a known element,this can occur if there is a compilation in web site or the web config file is missting",Does it happen because of using in masterpage?

You could open up the SplitterBar.cs class in a separate Library project and compile it to a DLL, or write a batch file to compile it using CSC.exe. Then you could put the SplitterBar.dll file into your bin directory.

Just a heads up, I noticed that if the splitter bar was in a panel where the visibility changed on an async postback the bar would disappear. If you're running into this problem, check out the RegisterPageStartupScript() method in the control. You need to change the following line:

ypu really did a fantastic job.Splitter control has solved my problemthat I was facing since last so many days. But there is an issue with monitors of different size.Splitter is not working properly when I see my application in bigger screen.I tested it on different monitor with different pixelsI developed my application on 15 inch monitor and on 21 inch monitor its not working properly how would I solve this problemkindly help.plzzzzzz

It sounds like you might need to use some JavaScript to dynamically resize the splitter bar if the table or container that you are working with has resized due to a larger screen.

The easiest way to do this is by resizing the SplitterBar when the window object's resize event fires or on the body's onload event. Try calling the static function (you don't need a reference to a SplitterBar object) 'VwdCmsSplitterBar_reconfigure();' in one of these events. This method repositions all of the splitter bars on the page to line up with their 'resize target'.

Great work Jeff. It helped me in my project. This is the same what i want. Thanks for providing such simple way.Actually my problem is, i have a table structure as follows;<table> <tr> <td> <table> <tr> <td id="mainTd"> <panel id="mainPanel"> <table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> //same like there are many tr and tds here and i am showing one tr at a time for user depnding on menu </table> ///All controls n all </panel> </td> ////here i want a spillter bar <td> <panel> </panel> </td> </table>

There is some coding in my js and because of that one of <td> increasing its width at runtime. but the position of spillter bar same as it which results overlapping that over.So what is the way to avoid this????Hope so i have explain my problem well. If you want any explanation or code then i can give it to you. Waiting for your reply.And can we use it with AJAX also? Coz i want to use it with ajax also.

Are you using AJAX.NET? Most of the problems that people report are because they are using AJAX.NET controls on the same form with the SplitterBar but this is not supported. If you are not using AJAX.NET and you are still getting this error message, please send more details.

Thanks! I'm sorry to tell you that the SplitterBar has not been designed to support AJAX.NET (AjaxControlToolkit). I usually custom code my own Ajax controls so I don't have plans right now to add support for AJAX.NET.