- Try out the SplitterBar online: SplitterBar Online Demo
VwdCms.SplitterBar now supports both vertical and horizontal orientations
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:
Step 2: Add the VwdCmsSplitterBar.js file to the
HEAD section of your Web Form:
<title>VwdCms SplitterBar Web Form</title>
Step 3: Update your web.config file's
Controls section (inside the
<add tagPrefix="VwdCms" namespace="VwdCms"/>
Step 4: Add a
VwdCms.SplitterBar control to your Web Form:
<VwdCms:SplitterBar runat="server" ID="vsbSplitter1"
An example of the
if (typeof width == "string")
width = new Number(width.replace("px",""));
An example of the table that this
VwdCms.SplitterBar is connected to:
<table border="0" cellpadding="0"
border:solid 1px #6699CC;">
<asp:TreeNode Text=".NET Framework"
padding:0px 0px 0px 5px;
<input type="text" id="txtWidth1"
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
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.
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.
The demo project Web Forms are using the following
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
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.
- 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
- Added the
- Added the
- Added the
- Added code examples for using the
OnResizeComplete event handlers in the demo project.
- Updated to support Master Pages and Container Controls (Naming Containers):
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
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
- Updated Example 10 in the demo project to demonstrate setting the
- Added better support for server side resizing. Now, setting the
SplitterBar.TopRowHeight will automatically resize the target controls during a postback.