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
{ ….

GridView: how to add a confirmation box to delete button

In case you use delete buttons in a GridView (like below) it would be nice to ask the user for confirmation (message box).

There are two ways to achieve this:

1. By using the ConfirmButtonExtender in Ajax.
2. By adding a confirmation box to each row when the grid rows are bound.

The first options is the easiest to implement (only design, no code-behind). The second the most flexible: you can add information about the record in your question.

1. By using the ConfirmButtoExtender in Ajax

• Be sure Ajax is available (see ajax.asp.net).
• Add a reference to the toolkit in you web page

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit”
    TagPrefix=”ajaxToolkit” %>

• In the GridView, use a template field for the delete column containing the (image button) for the delete command.
• Add the ConfirmButtonExtender to the ItemTemplate of the delete column and link the TargetControlID to the delete button.
  The source for the delete column should look something like this (the squared area is the part where the delete button is defined, the rest is the complete GridView-definition):

<asp:GridView ID=”gridOverview” runat=”server” AutoGenerateColumns=”False”
    AllowSorting=”false”
    DataKeyNames=”selectcolId” DataSourceID=”odcColumns” AllowPaging=”false”
    OnRowCommand=”gridOverview_OnRowCommand”
    OnRowDataBound=”gridOverview_OnRowDataBound”>
    <Columns>
        <asp:BoundField DataField=”bookTitle” HeaderText=”Title” >
            ItemStyle CssClass=”grid-column-small” />

        <asp:TemplateField HeaderText=”Delete” >
            <ItemStyle CssClass=”grid-column-buttons” />
            <ItemTemplate>
                <asp:ImageButton ID=”ibDelete” runat=”server”
                    CausesValidation=”False” CommandName=”Delete”
                    ImageUrl=”~/Images/icon-delete.gif” />
                <ajaxToolkit:ConfirmButtonExtender ID=”ConfirmBtExt1″
                    runat=”server” TargetControlID=”ibDelete”
                    ConfirmText=’Are you sure about deleting this record?’ />
            </ItemTemplate>
        </asp:TemplateField>

 
        <asp:CommandField ButtonType=”Image”
             SelectImageUrl=”~/Images/icon-pencil.gif” HeaderText=”Edit”
             ShowHeader=”True” ShowSelectButton=”True” CausesValidation=”False”
             sItemStyle-CssClass=”grid-column-buttons” />

        <asp:TemplateField HeaderText=”Order”>
            <ItemTemplate>
                <asp:ImageButton ID=”ibColDown” runat=”server”
                      CommandName=”ColDown” ImageUrl=”~/Images/down.gif”
                      CommandArgument=”<%# Container.DataItemIndex %>“ />
                <asp:ImageButton ID=”ibColUp” runat=”server”
                      CommandName=”ColUp” ImageUrl=”~/Images/up.gif”
                      CommandArgument=”<%# Container.DataItemIndex %>“ />
            </ItemTemplate>
            <ItemStyle CssClass=”grid-column-buttons” />
        </asp:TemplateField>    
    </Columns>
</asp:GridView>

For more information, see ConfirmButton

2. By adding a confirmation box to each row when the rows are bound

• Add a reference to an event handler in the GridView (see also the example above):

OnRowDataBound=”gridOverview_OnRowDataBound”

• The delete column (ItemTemplate) should be an (image) button in a template field (replace the squared area in the example above with this code):

        <asp:TemplateField HeaderText=”Delete” >
            <ItemStyle CssClass=”grid-column-buttons” />
            <ItemTemplate>
                <asp:ImageButton ID=”ibDelete” runat=”server”
                    CausesValidation=”False” CommandName=”Delete”
                    ImageUrl=”~/Images/icon-delete.gif” />
            </ItemTemplate>
        </asp:TemplateField>

• Create the event handler ‘gridOverview_OnRowDataBound’ in the code behind. When each row is bound, this procedure will add a message box to the image button.

protected void gridOverview_OnRowDataBound(object sender, GridViewRowEventArgs e)
//Add delete msgbox to each row containing field
//information to identify the row
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // reference the Delete ImageButton
        ImageButton ib = (ImageButton)e.Row.FindControl(“ibDelete”);
        ib.Attributes.Add(“onclick”,“javascript:return ” +

            confirm(‘Are you sure about deleting ” +
            DataBinder.Eval(e.Row.DataItem, “bookTitle”) + “?’);”);
    }
}

First blog

I cannot count the hours I have spend searching for solutions to my ASP.NET problems. Too many. And as developing is not my daily work, I sometimes forget the how-to’s.
That’s why I started this blog: too gather this info in one place so that I do not have to look for it again. And maybe it wil help others too. Leave a comment if it is of any help.
PS: All the code is in C#