Source code custom server control

The article about the custom grid control is finished. The post contains links to multiple page explaining the control and the source code has been added (with an example how to use the control).

Regards, Jan

Custom Server Control: build your own simple GridView

“This article consists of several pages describing the definition of a custom grid control. You can create your own controls in two ways:

• User Controls (ascx-extention): a small part of a page that will be reused in your web pages.
• Custom Server Controls: classes that will generate HTML. Custom Server Controls are compiled into DLL assemblies.

This example describes a Custom Server Control. This gives you total control over the HTML and makes it possible to add the control to your toolbox.

If you are interested in User Controls, see the following pages for more information:
http://www.15seconds.com/issue/020319.htm
http://quickstarts.asp.net/QuickStartv20/aspnet/doc/ctrlref/userctrl/default.aspx

The custom server control described in this article, is a simple databound grid. Easy to add to your web pages, for those cases where you do not need the extended features of the VS2005’s GridView. And you can modify this control to you own wishes.

This custom grid control is not a templated control. If you are interested in templated custom server controls, please see http://samples.gotdotnet.com/quickstart/aspplus/doc/webctrlauthoring.aspx for more information.

The custom grid control looks like this:

You can add the control by adding a reference in your web page and define the grid’s parameters:

<%@ Register Assembly=”WITControlsLibrary” Namespace=”WITControlsLibrary” TagPrefix=”wit” %>

<wit:WITGrid ID=”WITGridExample” runat=”server”
    DataSourceID=”AccessDataSource1″
    DataKeyName=”participantID”
    ShowDeleteColumn=”True”
    ShowEditColumn=”True”
    ShowOrderColumn=”True”
    HighLightSelectedRow=”true”
    HighLightCssClass=”GridView-Highlight”
    EmptyGridCssClass=”GridView-Empty”
    NoRecordsText=”No records where found.”
    EnableViewState=”False”
    OnRowDataBound=”gridExample_OnRowDataBound”
    OnRowCommand=”gridExample_OnRowCommand”>
    <wit:BoundField CssClass=”grid-column-max” DataField=”participantName” HeaderText=”Name” />
    <wit:BoundField CssClass=”grid-column-medium” DataField=”participantEMail” HeaderText=”E-mail” />
    <wit:CheckBoxField CssClass=”grid-column-medium” DataField=”participantLocked” HeaderText=”Locked” />
</wit:WITGrid>

The article is split up into different pages in order to avoid one very lengthy page. Click on one of the following items for more info, or click Next Page >> 

I hope these articles will help you further in building your own grid.

Regards, Jan

1. Getting started: adding the right resources, references and assembly information.
2. Designing the ‘inner’ elements of the grid (the data columns: BoundField.cs, CheckBoxField.cs, etc.).
3. The grid control itself (WITGrid.cs).
4. The grid’s event arguments.
5. The designer class (WITGridDesigner) that enables the grid to be shown in web page’s design view.
6. Adding smart tags: the designer action list class.
7. Add the control to your web page: The grid’s parameters and events explained.
8. The source code of the control and an example
   

Next Page >>

Custom Control: how to add a toolbar image

In case you want to have a custom image for your control in the Visual Studio toolbox, you can do this by adding the following directive to your user control:

namespace CustomControlsLibrary
{
[System.Drawing.ToolboxBitmap(@"c:\CustomControl\Resources\toolbox.bmp")]
public class CustomControl : Control, INamingContainer
{ ….