Click here to Skip to main content
15,884,778 members
Articles / Web Development / ASP.NET

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

Rate me:
Please Sign up or sign in to vote.
4.75/5 (44 votes)
10 Mar 2008CPOL5 min read 700.8K   4.9K   195  
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.
<%@ Page 
Language="C#" 
AutoEventWireup="true"  
CodeFile="Example8.aspx.cs" 
Inherits="Example8"
%>

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Example 8: VwdCms SplitterBar</title>
<!-- NOTE: the following server-side include is used while testing 
		   and debugging because the javascript code gets inserted 
		   into the page source code which makes it easier to find
		   javascript errors when reported with a line number by IE.
		   
		   You will want to remove the server-side include and use 
		   the script tag below it when you deploy your application.
-->		   
<script type="text/javascript"> 
<!-- #include virtual="VwdCmsSplitterBar.js" -->
</script> 
<!--     <script src="VwdCmsSplitterBar.js" type="text/javascript"></script> -->
</head>

<body>
<!--
//---------------------------------------------------
//     Copyright (c) 2007 Jeffrey Bazinet, VWD-CMS 
//     http://www.vwd-cms.com/  All rights reserved.
//---------------------------------------------------
-->
<form id="form1" runat="server">
	<div>
		<div style="width:800px;margin:0px auto 0px auto;">

		<table border="0" style="width:800px;background-color:gainsboro;border:solid 1px black;">
			<tr>
				<td align="left" valign="middle">
					<h1 style="font-family:Verdana;font-size:13pt;text-align:left;
						padding:5px;color:steelblue;">VwdCms.SplitterBar : Example 8</h1>
				</td>
				<td align="right" valign="middle">
					<a href="http://www.vwd-cms.com/"><img 
					src="vwd-cms-logo-small.jpg" style="width:150px;height:32px;border:none;"
					alt="The VwdCms.SplitterBar has been provided by VWD-CMS.com." /></a>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center" valign="middle">
					<a href="Example1.aspx">Example 1</a>
					&nbsp;|&nbsp;
					<a href="Example2.aspx">Example 2</a>
					&nbsp;|&nbsp;
					<a href="Example3.aspx">Example 3</a>
					&nbsp;|&nbsp;
					<a href="Example4.aspx">Example 4</a>
					&nbsp;|&nbsp;
					<a href="Example5.aspx">Example 5</a>
					&nbsp;|&nbsp;
					<a href="Example6.aspx">Example 6</a>
					<br /> 
					<a href="Example7.aspx">Example 7</a>
					&nbsp;|&nbsp; 
					<a href="Example8.aspx">Example 8</a>
					&nbsp;|&nbsp; 
					<a href="Example9.aspx">Example 9 (Horizontal)</a>
					 &nbsp;|&nbsp;
					<a href="Example10.aspx">Example 10 (Vertical + Horizontal)</a>
				</td>
			</tr>
		</table>
		<br />
		<div style="font-family:arial;font-size:10pt;text-align:left;">
		<b>GridView Column Resizing</b>:<br /><br />
		I put this example together quickly so it does not look or 
		function perfectly, but it demonstrates how to resize the colums and 
		overall width of a table that is generated by using the GridView control.
		</div>
	
		<br />
			
		<br />
		
		<asp:GridView runat="server" ID="gvTest1" GridLines="Both" BorderStyle="solid" 
		AutoGenerateColumns="false" AllowPaging="true" PageSize="10">
			<AlternatingRowStyle BackColor="#efefef" />
			<Columns>
				<asp:BoundField HeaderText="Col0" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" />
				<asp:BoundField HeaderText="Col1" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" />
				<asp:BoundField HeaderText="Col2" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" />
				<asp:BoundField HeaderText="Col3" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" />
			</Columns>
		</asp:GridView>
		
		<br />

	</div>

	
	</div>
	<VwdCms:SplitterBar runat="server" ID="vwdSplitter0" 
	 LeftResizeTargets="gvTest1_hr-1_hc0" 
	 MaxWidth="200" MinWidth="50" 
	 style="background-image:url(vsplitter.gif);
	 background-position:center center;
	 background-repeat:no-repeat;
	 border-left:solid 1px black;
	 border-right:solid 1px black;" 
	 LeftColumnWidth="125px" />

	<VwdCms:SplitterBar runat="server" ID="vwdSplitter1" 
	 LeftResizeTargets="gvTest1_hr-1_hc1" 
	 MaxWidth="200" MinWidth="50" 
	 style="background-image:url(vsplitter.gif);
	 background-position:center center;
	 background-repeat:no-repeat;
	 border-left:solid 1px black;
	 border-right:solid 1px black;" 
	 LeftColumnWidth="125px" />
	 
	 <VwdCms:SplitterBar runat="server" ID="vwdSplitter2" 
	 LeftResizeTargets="gvTest1_hr-1_hc2" 
	 MaxWidth="200" MinWidth="50" 
	 style="background-image:url(vsplitter.gif);
	 background-position:center center;
	 background-repeat:no-repeat;
	 border-left:solid 1px black;
	 border-right:solid 1px black;" 
	 LeftColumnWidth="125px" />

	 <VwdCms:SplitterBar runat="server" ID="vwdSplitter3" 
	 LeftResizeTargets="gvTest1_hr-1_hc3" 
	 MaxWidth="200" MinWidth="50" 
	 style="background-image:url(vsplitter.gif);
	 background-position:center center;
	 background-repeat:no-repeat;
	 border-left:solid 1px black;
	 border-right:solid 1px black;" 
	 LeftColumnWidth="125px" />
	 
</form>
    
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

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


Written By
Web Developer
United States United States
Professional software developer with a track record of delivering reliable production web applications.
Specializing in modern web application development with Azure, AWS, C#, .NET, NodeJs, Web API, REST, SQL Server, JavaScript, ReactJs, jQuery, Bootstrap, and CSS.

Comments and Discussions