Category Archive

You are currently browsing the category archive for the ‘Adding an Ajax Splitter Bar To Your ASP.NET Page’ category.

Adding an Ajax Splitter Bar To Your ASP.NET Page

December 16, 2007 in Adding an Ajax Splitter Bar To Your ASP.NET Page | Tags: | Leave a comment

Objective: This article describes how to add a horizontal VwdCms.SplitterBar to your asp.net page or pages. You can download this free server component from http://www.codeproject.com/KB/aspnet/VwdCmsSplitterBar.aspx. You’ll have to register and login to get access to the downloads.

Background: VwdCms.SplitterBar is a free server control that allows you to easily add resizing to your web page layout. Use the splitter bar to resize a panel, div, table cell, or just about any control. It is ideal replacement of frames for pages that have a tree or a list of data items that vary in width. I recently was building a mass email application and needed to be able to resize the upper or lower portion to make more room for one or the other. The splitter bar was a quick and stylish choice that worked exactly the way I envisioned it.

VwdCmsSplitterBar

Procedure:

  1. Download the free sever component and related files and extract them to a place of your choice.
  2. Create new site if you haven’t already.
  3. Create a new folder in your site and name it AjaxSplitter.
  4. Right click on the site name on top in your solution explorer, scroll to Add ASP_Net Folder and select App-Code folder. This is a special ASP.NET folder that will hold our SplitterBar server control.
  5. From the extracted files, open the App_Code folder and drag the SplitterBar.cs file into our newly created App_Code folder like shown in the picture below. Although the file is written C#, you can use it just fine in your VB.Net applications.

    SplitterBarCs

  6. Drag and drop the hsplitter.gif file into the root of your site. (that’s where the script files are looking for it)
  7. Drag and drop the following files into the AjaxSplitter folder we created earlier.
  8. hsplitter.gif, License.txt, vsplitter.gif, and VwdCmsSplitterBar.js
  9. Now if you haven’t already, add a web.config file to your site and open it.
  10. Find the <pages><controls> tags and paste inside the following code: <add tagPrefix=”VwdCms” namespace=”VwdCms”/>. This is to register the SplittBar server component with our site. It should look something like below: 
    <pages>
    <controls>
        <add tagPrefix="VwdCms" namespace="VwdCms"/>
    </controls>
</pages>

  11. Now that we have all the files in place, let’s create a new web form and replace all of the code with the following. There is no server side code here but make sure you go over it line by line to understand how the application comes together. 
    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <!-- ...........................Splitter Bar Javascript..................... -->
    <!-- Add a reference to the Javascript file -->

    <script src="AjaxSplitter/VwdCmsSplitterBar.js" type="text/javascript"></script>

    <!-- Create resize function for the Splitter Bar -->

    <script language="javascript" type="text/javascript">
    function splitterOnResize(width)
    {
        if (typeof width == "string")
        {
            width = new Number(width.replace("px",""));
        }
    }
    </script>
    <!-- ...........................Splitter Bar Javascript..................... -->
    <link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <!-- Table for Splitter Bar  -->
        <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 406px;
            border: solid 0px #6699CC; overflow: hidden;">
            <tr id="trTop">
                <td runat="server" id="tdTop" style="height: 200px;" align="left" valign="top">
                    <div style="height: 100%; overflow: auto;">
                        </div>
                </td>
            </tr>
            <tr style="height: 6px;">
                <td style="height: 6px; font-size: 0pt;">
                    &nbsp;
                </td>
            </tr>
            <tr id="trBottom">
                <td runat="server" id="tdBottom" style="height: 200px;" align="left" valign="top">
                    <div style="height: 100%; overflow: auto;">
                        </div>
                </td>
            </tr>
        </table>
        <!-- Splitter Bar Server Control -->
        <VwdCms:SplitterBar runat="server" ID="hsbSplitter" 
        Orientation="horizontal" 
        TopResizeTargets="tdTop"
        BottomResizeTargets="tdBottom" 
        MinHeight="30" 
        MaxHeight="370" 
        TotalHeight="406"
        BackgroundColor="lightsteelblue" 
        BackgroundColorLimit="firebrick" 
        BackgroundColorHilite="steelblue"
        BackgroundColorResizing="purple" 
        SaveHeightToElement="txtHeight" 
        Style="background-image: url(hsplitter.gif);
        background-position: center center; background-repeat: no-repeat;" />
    </div>
    </form>
</body>
</html>

  12. Load it up into your browser and give it a spin.

    splittBar-results

  13. That’s it! Enjoy.