Version

WebDataGrid Using ItemCommand Event

Before You Begin

The ItemCommand server-side event of WebDataGrid allows you to easily respond to events (e.g., button click) from controls placed inside TemplateField column.

What You Will Accomplish

This walkthrough demonstrates how to add an ASP.NET button inside an bound TemplatedField column, and handle WebDataGrid’s ItemCommand server-side event to display some information when the button is clicked.

Follow these Steps

Note
Note:

This walkthrough assumes you have bound WebDataGrid to a DataSet object at design time. For information on how to populate the WebDataGrid control, see the

ection at the end of this topic.

  1. Before you start writing any code, you should place using/Imports directives in your code-behind so you don’t need to always type out a member’s fully qualified name.

In Visual Basic:

Imports Infragistics.Web.UI.GridControls

In C#:

using Infragistics.Web.UI.GridControls;
  1. In Design View select the control/component and select Properties.

  2. In the Properties window, locate the Columns collection, and click the ellipsis button (…).

  3. Add a TemplateField to the collection.

    1. From Available Fields section select TemplateField and click the Add Field Button.

    2. New column of type TemplateField will be added to the columns collection.

Using ItemCommand Event 1.png
  1. Another way to add TemplateField is to convert Grid Field into a Template Field. Select some Grid field and press “Convert selected Grid Field into a Template Field”.

Using ItemCommand Event 2.png
  1. Click OK button to close the Columns Collection Editor

  1. Add an ASP.NET Button control to the TemplatedField.

    1. From the Design view of your page select the WebDataGrid’s smart tag and click on “Edit Templates”

    2. After the Template Editing Mode is open find the “Freight” TemplateField.

Using ItemCommand Event 3.png
  1. From the toolbox, drag a standard ASP.NET button control into ItemTemplate

  2. Select “End Template Editing” to finish the edit.

  1. Add a server-side event handler to the ItemCommand event (code-behind).

In Visual Basic:

Protected Sub WebDataGrid1_ItemCommand(sender As Object, e As HandleCommandEventArgs)
End Sub

In C#:

protected void WebDataGrid1_ItemCommand(object sender, HandleCommandEventArgs e){ }
  1. Add code to the ItemCommand event to retrieve some row information. When a control sends back an event, the server will want to respond that event. The ItemCommand event will capture the event thrown by the control and expose that event to you through the HandleCommandEventArgs object.

In ASPX:

<ig:TemplateDataField Key="Freight"><ItemTemplate>
      <asp:Button ID="Button1" runat="server"
            Text="Button"
            CommandArgument='<%# Eval("Freight") %>'
            CommandName="Button1Click" />
      </ItemTemplate>
      <Header Text="Freight">
      </Header>
</ig:TemplateDataField>

In Visual Basic:

Protected Sub WebDataGrid1_ItemCommand(sender As Object, e As HandleCommandEventArgs)
    'e.CommandArgument will give you the value from CommandArgument attribute of the corresponding button
    Dim commandArgument As Object = e.CommandArgument
    'Make some calculations with Freight field value and pass it to a Label
    FreightValueLbl.Text = commandArgument.ToString()
End Sub

In C#:

protected void WebDataGrid1_ItemCommand(object sender, HandleCommandEventArgs e)
{
    //e.CommandArgument will give you the value from CommandArgument
      attribute of the corresponding button
    object commandArgument = e.CommandArgument;
    //Make some calculations with Freight field value and pass it to a Label
    FreightValueLbl.Text = commandArgument.ToString();
}
  1. Run the application. Click one of the buttons, and notice that Freight field value is displayed above the WebDataGrid, as shown in the screen shot below.

Using ItemCommand Event 4.jpg
Note
Note:

You can change the button caption to something more appropriate by opening the templated column at design time and changing the button’s Text property. In addition, you can add a header caption to the Template Field by selecting the column and selecting its Header’s Caption property using the Columns Collection Editor (for more information, see step 3 of this procedure).

Related Topics