 |
Web Development »
ASP.NET Controls »
General
Intermediate
License: The Code Project Open License (CPOL)
ASP.NET Splitter Bar - Resize panels, table cells, and controlsBy Jeff BazinetVwdCms.SplitterBar is a server control that allows you to easily add resizing to your web page layout, now supports both vertical and horizontal resizing. |
C# 2.0, Windows, .NET 2.0, ASP, ASP.NET, ADO.NET, VS2005, Dev
|
|
Advanced Search Add to IE Search |
|
|
|
||||||||||||||||
VwdCms.SplitterBar now supports both vertical and horizontal orientationsThe 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.
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:
<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>
You can download many other examples of how to use the SplitterBar by clicking the 'Download demo' link at the top of this article.
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">
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:
SplitterBar will handle IFrames.OnResizeFunction event to OnResize.OnResizeStart event.OnResizeComplete event.OnDoubleClick event.OnResizeStart, OnResize, and OnResizeComplete event handlers in the demo project.ClientID of an element.SplitterBar checks to see if it is in a NamingContainer so it can find the controls during the postback.SplitterBar with Master Pages.SplitterBar online demo.GridView Column Resizing example to the demo project.SplitterBar, and a new example to the demo project.scrollLeft and scrollTop so the SplitterBar will continue to work properly when the page has been scrolled down or to the right.MinWidth, MaxWidth, MinHeight, and MaxHeight properties.MinWidth, MaxWidth, MinHeight, and MaxHeight properties.SplitterBar.LeftColumnWidth or SplitterBar.TopRowHeight will automatically resize the target controls during a postback.
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 10 Mar 2008 Editor: Smitha Vijayan |
Copyright 2007 by Jeff Bazinet Everything else Copyright © CodeProject, 1999-2009 Web22 | Advertise on the Code Project |
