TreeView, TextArea, Table Column Resizing with
the VwdCms.SplitterBar ASP.NET Server Control

(Example 1-A)

This is the preferred version as it works in both IE 7 and Firefox.


This example demonstrates a VwdCms.SplitterBar implemented with a table that contains a TreeView in the left column and a TextArea in the right column.

The code in this example works well in Firefox and IE 7. It sets the LeftResizeTargets equal to "tdTree1;divTree1" which tells the SplitterBar to resize both the table cell and the div control that contains the tree view. Note: pay special attention to the styles that have been applied to each element, removing or modifying these settings can cause unpredictable behavior.

Current Width:



Notes:
1. The controls listed in the LeftResizeTargets and RightResizeTargets will be processed during the PostBack only if they have the runat="server" attribute set.
2. Resize the column, then click the 'Test PostBack' button to verify that the width selection by the user is persisted after the PostBack.

SplitterBar Declaration for Version A

    <VwdCms:SplitterBar runat="server" ID="vsbSplitter" 
    LeftResizeTargets="tdTree;divTree" 
    MinWidth="100" 
    MaxWidth="560"
    BackgroundColor="lightsteelblue" 
    BackgroundColorLimit="firebrick"
    BackgroundColorHilite="steelblue"
    BackgroundColorResizing="purple"
    SaveWidthToElement="txtWidth"
    style="background-image:url(../../images/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.

 

All SplitterBar examples presented here are using a Master Page with the following DOCTYPE declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">