Click here to Skip to main content
11,484,435 members (65,306 online)
Click here to Skip to main content

ASP.NET Splitter Bar - Resize panels, table cells, and controls

, 10 Mar 2008 CPOL 880.7K 4.1K 197
Rate this:
Please Sign up or sign in to vote.
VwdCms.SplitterBar is a server control that allows you to easily add resizing to your web page layout, now supports both vertical and horizontal resizing.

Screenshot - VwdCmsSplitterBar.gif

  • Try out the SplitterBar online: SplitterBar Online Demo
  • 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:

  1. /App_Code/SplitterBar.cs
  2. /VwdCmsSplitterBar.js
  3. /vsplitter.gif

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

<head runat="server">
    <title>VwdCms SplitterBar Web Form</title>
    <script src="VwdCmsSplitterBar.js" type="text/javascript"></script> 
</head>

Step 3: Update your web.config file's Controls section (inside the system.web section):

    <pages>
        <controls>
            <add tagPrefix="VwdCms" namespace="VwdCms"/> 
        </controls>
    </pages>

Step 4: Add a VwdCms.SplitterBar control to your Web Form:

    <VwdCms:SplitterBar runat="server" ID="vsbSplitter1" 
        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;"/>

An example of the OnResizeFunction:

<script language="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>

An example of the table that this VwdCms.SplitterBar is connected to:

    <div style="margin:0px;padding:0px;
    width:800px:overflow:hidden;">
    <table border="0" cellpadding="0" 
        cellspacing="0" 
        style="width:800px;height:200px;
        border:solid 1px #6699CC;">
        <tr style="height:200px;">
            <td id="tdTree1" 
            style="width:250px;height:200px;" 
            align="left" valign="top"> 
              <div id="divTree1" 
                style="width:100%;height:100%;overflow:auto;
                padding:0px;margin:0px;">
                <asp:TreeView ID="tvwFramework1" 
                runat="server" ShowLines="True"
                style="width:100%;height:100%;
                padding:0px;margin:0px;">
                <Nodes>
                <asp:TreeNode Text=".NET Framework" 
                Value=".NET Framework">
                <asp:TreeNode 
                Text="System.Diagnostics" 
                Value="System.Diagnostics">
                <asp:TreeNode 
                Text="Debug Class" 
                Value="Debug"></asp:TreeNode>
                <asp:TreeNode 
                Text="DebuggableAttribute.DebuggingModes 
                Enumeration" 
                Value="DebuggableAttribute.DebuggingModes 
                Enumeration"></asp:TreeNode>
                <asp:TreeNode 
                Text="EventLogPermissionEntryCollection 
                Class" 
                Value="EventLogPermissionEntryCollection 
                Class"></asp:TreeNode>
                </asp:TreeNode>
                </asp:TreeNode>
                </Nodes>
                </asp:TreeView>    
              </div>            
            </td>
            <td id="tdMid1" 
            style="height:200px;width:6px;
            background-color:lightsteelblue;"></td>
            <td id="tdEdit1" 
            align="left" valign="top" 
            style="height:200px;"> 
                    <textarea runat="server" 
                    id="txtEdit1" 
                    style="margin:0px;height:100%;width:100%;
                    padding:0px 0px 0px 5px;
                    border:none;"></textarea>
            </td>
        
        </tr>
    </table>
    <span style="font-family:Verdana:font-size:10pt;">
    Current Width: 
    </span>
    <input type="text" id="txtWidth1" 
    value="250px" 
    style="width:70px;font-family:Verdana:font-size:10pt;"/>
    </div>

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.

The demo project Web Forms are using the following DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

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.
  • Updated Example 10 in the demo project to demonstrate setting the MinWidth, MaxWidth, MinHeight, and MaxHeight properties.
  • Added better support for server side resizing. Now, setting the SplitterBar.LeftColumnWidth or SplitterBar.TopRowHeight will automatically resize the target controls during a postback.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Jeff Bazinet
Web Developer
United States United States
VWD-CMS is an ASP.NET content management system designed and developed by Jeff Bazinet.

While VWD-CMS has been developed entirely in Visual Web Developer, it will power any ASP.NET 2.0 website.

VWD-CMS is a file based content management system that has been built with developers in mind -

one of the primary design requirements is that the CMS does not constrain or limit a developer.

Try the online demo and learn more about VWD-CMS at www.vwd-cms.com

Comments and Discussions

 
QuestionProblem with splitterbar its Not Working in IE11 Pin
moni_200729-Jan-15 2:07
membermoni_200729-Jan-15 2:07 
QuestionNamespace Error Pin
viru5detected15-Apr-13 17:27
memberviru5detected15-Apr-13 17:27 
Questionhow to use RightResizetargets property Pin
Shrish198612-Dec-12 2:20
memberShrish198612-Dec-12 2:20 
QuestionThe splitter is showing some width away from the td. Pin
Shrish19863-Dec-12 20:53
memberShrish19863-Dec-12 20:53 
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
GeneralProblem with the splitter position Pin
Member 810781115-Jul-12 23:04
memberMember 810781115-Jul-12 23:04 
Questionsplitterbar not working Pin
vikas@199016-May-12 22:56
membervikas@199016-May-12 22:56 
GeneralMy vote of 5 Pin
manoj kumar choubey16-Feb-12 1:21
membermanoj kumar choubey16-Feb-12 1:21 
QuestiononResizeFunction javascript function never fired Pin
jncharli4-Jan-12 13:18
memberjncharli4-Jan-12 13:18 
GeneralProblem with "splitter bar" being offset out of table Pin
Hubman12-Sep-10 15:05
memberHubman12-Sep-10 15:05 
GeneralRe: Problem with "splitter bar" being offset out of table Pin
Hubman12-Sep-10 16:41
memberHubman12-Sep-10 16:41 
GeneralRe: Problem with "splitter bar" being offset out of table Pin
CloudCasts22-Jan-12 12:11
memberCloudCasts22-Jan-12 12:11 
GeneralCompilation Error in VwdCms:Splitter Pin
AsifChouhan17-Jul-10 0:26
memberAsifChouhan17-Jul-10 0:26 
Generalonresize event in body or div tag Pin
it-bergmann7-Dec-09 7:39
memberit-bergmann7-Dec-09 7:39 
GeneralRe: onresize event in body or div tag Pin
Jeff Bazinet7-Dec-09 7:53
memberJeff Bazinet7-Dec-09 7:53 
GeneralRe: onresize event in body or div tag Pin
it-bergmann7-Dec-09 23:04
memberit-bergmann7-Dec-09 23:04 
GeneralVB based ASP.NET conversion Pin
HighFlight2k225-Sep-09 6:38
memberHighFlight2k225-Sep-09 6:38 
GeneralScrollbars associated with the vertical splitter is not working Properly in IE 7.0 Pin
Member 227048417-Sep-09 6:42
memberMember 227048417-Sep-09 6:42 
Generalsplitterbar Pin
komalahirwal16-Sep-09 3:20
memberkomalahirwal16-Sep-09 3:20 
QuestionHow to keep persistent stage of width among all pages when we are using splitter in master page [modified] Pin
Member 340379417-Jul-09 12:48
memberMember 340379417-Jul-09 12:48 
AnswerRe: How to keep persistent stage of width among all pages when we are using splitter in master page Pin
Member 405004621-Sep-09 21:05
memberMember 405004621-Sep-09 21:05 
GeneralRe: How to keep persistent stage of width among all pages when we are using splitter in master page Pin
Member 405004621-Sep-09 21:08
memberMember 405004621-Sep-09 21:08 
GeneralRe: How to keep persistent stage of width among all pages when we are using splitter in master page Pin
Jeff Bazinet22-Sep-09 14:55
memberJeff Bazinet22-Sep-09 14:55 
GeneralLicense? [modified] Pin
Sudhindra BK17-Jun-09 2:48
memberSudhindra BK17-Jun-09 2:48 
GeneralLeftColumnWidth causes exception in Master Page Pin
Mark Kestenbaum11-Jun-09 6:21
memberMark Kestenbaum11-Jun-09 6:21 
GeneralCompile Error Message Pin
Member 36923813-Jun-09 0:53
memberMember 36923813-Jun-09 0:53 
GeneralRe: Compile Error Message Pin
arifpk3621-May-10 1:54
memberarifpk3621-May-10 1:54 
GeneralRe: Compile Error Message Pin
sguruproject2-Aug-11 18:15
membersguruproject2-Aug-11 18:15 
QuestionHow to use the splitter in arabic pages Pin
VimalSaifudin20-Apr-09 5:15
memberVimalSaifudin20-Apr-09 5:15 
QuestionHow can I make the direction of the table right to left. Pin
Member 309448811-Jan-09 11:51
memberMember 309448811-Jan-09 11:51 
AnswerRe: How can I make the direction of the table right to left. Pin
VimalSaifudin20-Apr-09 5:20
memberVimalSaifudin20-Apr-09 5:20 
GeneralRe: How can I make the direction of the table right to left. Pin
melwaer5-Nov-10 20:40
membermelwaer5-Nov-10 20:40 
Generalmessage shows "element 'SplitterBar' is not a known element" Pin
venture_luck18-Dec-08 0:09
memberventure_luck18-Dec-08 0:09 
GeneralSplitter use Pin
Member 295449821-Nov-08 14:15
memberMember 295449821-Nov-08 14:15 
GeneralASP.NET 1.1 Pin
nusoft247231-Oct-08 15:07
membernusoft247231-Oct-08 15:07 
GeneralRe: ASP.NET 1.1 Pin
VNVNV11-Aug-09 0:31
memberVNVNV11-Aug-09 0:31 
QuestionCan I chabge the Min and Max Height Pin
Udeshang13-Oct-08 6:53
memberUdeshang13-Oct-08 6:53 
AnswerRe: Can I chabge the Min and Max Height Pin
Jeff Bazinet13-Oct-08 20:31
memberJeff Bazinet13-Oct-08 20:31 
QuestionIs this control work with Web application instead of a website? Pin
Ramu.M11-Oct-08 9:35
memberRamu.M11-Oct-08 9:35 
AnswerRe: Is this control work with Web application instead of a website? Pin
Jeff Bazinet11-Oct-08 22:52
memberJeff Bazinet11-Oct-08 22:52 
GeneralAJAX and Panel Visibility Pin
darkpaladin6-Oct-08 6:26
memberdarkpaladin6-Oct-08 6:26 
GeneralIt's really great but one issue, kindly help. Pin
sc73803-Oct-08 1:46
membersc73803-Oct-08 1:46 
AnswerRe: It's really great but one issue, kindly help. Pin
Jeff Bazinet3-Oct-08 2:18
memberJeff Bazinet3-Oct-08 2:18 
QuestionNot working with AJAX ???? Pin
sujit.patil7-Jul-08 2:29
membersujit.patil7-Jul-08 2:29 
QuestionProblem With Spillter bar [modified] Pin
sujit.patil6-Jul-08 21:46
membersujit.patil6-Jul-08 21:46 
GeneralError message Pin
hifans.net25-Jun-08 7:02
memberhifans.net25-Jun-08 7:02 
AnswerRe: Error message Pin
Jeff Bazinet25-Jun-08 16:10
memberJeff Bazinet25-Jun-08 16:10 
GeneralNot working properly in firefox with CollapsiblePanelExtender Control and PopUp Extender Pin
IrfanKhan25-Jun-08 6:16
memberIrfanKhan25-Jun-08 6:16 
AnswerRe: Not working properly in firefox with CollapsiblePanelExtender Control and PopUp Extender Pin
Jeff Bazinet25-Jun-08 16:08
memberJeff Bazinet25-Jun-08 16:08 
GeneralRe: Not working properly in firefox with CollapsiblePanelExtender Control and PopUp Extender Pin
IrfanKhan25-Jun-08 23:00
memberIrfanKhan25-Jun-08 23:00 
GeneralRe: Not working properly in firefox with CollapsiblePanelExtender Control and PopUp Extender Pin
IrfanKhan26-Jun-08 5:05
memberIrfanKhan26-Jun-08 5:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150520.1 | Last Updated 11 Mar 2008
Article Copyright 2007 by Jeff Bazinet
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid