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

VwdCms.SplitterBar is a server control that allows you to easily add resizing to your web page layout. This version of the control is designed to work in a 2 column layout.

Introduction

The VwdCms.SplitterBar control is designed to give you column resizing in a 2 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.


Try out the VwdCms.SplitterBar control now: VwdCms.SplitterBar Online Examples


Below are some screenshots of 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.

VwdCms.SplitterBar - Splitter Bar for ASP.NET

Using the control

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>

This code sample has been automatically colorized by the VwdCms.CodeViewer control, an ASP.NET server control code colorizer that supports HTML, ASPX, XML, C#, and JavaScript code formats.


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

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

This code sample has been automatically colorized by the VwdCms.CodeViewer control, an ASP.NET server control code colorizer that supports HTML, ASPX, XML, C#, and JavaScript code formats.


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"
    OnResize="splitterOnResize"
    style="background-image:url(vsplitter.gif);
    background-position:center center;
    background-repeat:no-repeat;"/>

This code sample has been automatically colorized by the VwdCms.CodeViewer control, an ASP.NET server control code colorizer that supports HTML, ASPX, XML, C#, and JavaScript code formats.


An example function for use with of the VwdCms.SplitterBar.OnResize:

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

This code sample has been automatically colorized by the VwdCms.CodeViewer control, an ASP.NET server control code colorizer that supports HTML, ASPX, XML, C#, and JavaScript code formats.


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>
                <asp:TreeNode 
                Text="System.Diagnostics" 
                Value="System.Diagnostics">asp:TreeNode>
                <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>
                </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>

This code sample has been automatically colorized by the VwdCms.CodeViewer control, an ASP.NET server control code colorizer that supports HTML, ASPX, XML, C#, and JavaScript code formats.


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 behaiving 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 (just commment it out) and see how the browser renders your page.

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">

This code sample has been automatically colorized by the VwdCms.CodeViewer control, an ASP.NET server control code colorizer that supports HTML, ASPX, XML, C#, and JavaScript code formats.

Enhancements: Horizontal SplitterBar

The immediate needs of my project called for a vertical SplitterBar, so that is what I built. Now that I have completed it, I can see places in my application that would benefit from a horizontal SplitterBar too. It should not be too hard to do now that the vertical functionality is complete. At some point I will work on this and post an update to this article when it is ready.

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.
  • Added the OnResizeStart property.
  • Better support for dealing with IFrames.
  • Clean-up of the JavaScript code in VwdCmsSplitterBar.js.
  • More code examples in the demo project including PostBacks and IFrames.

Copyright (c) 2008 vwd-cms.com   |   VWD-CMS was designed and developed by Jeff Bazinet   |   Google Analytics