Regards, Jan

• 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

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

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: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”) + “?’);”);
    }
}