Version

WebHierarchicalDataGrid - Using ItemCommand Event

Before You Begin

The ItemCommand server-side event of WebHierarchicalDataGrid 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 for Parent and Child band, and handle WebHierarchicalDataGrid’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 WebHierarchicalDataGrid to a DataSet object at design time. For information on how to populate the WebHierarchicalDataGrid control, see the

Related Topics

ection at the end of this topic.

Add TemplateField to Parent Band:

You can follow the steps from Using ItemCommand Event to Access Cell Item (WebDataGrid)

Add TemplateField to Child Band:

  1. In Design View select the control/component and a Smart Tag anchor will appear. Select “Edit Bands”.

  2. “Edit WebHierarchicalDataGrid Bands” window will appear. From there select the desired band.

  3. From Properties window, locate the Columns collection, and click the ellipsis button (…).

Using ItemCommand Event to Access Cell Item [WHDG] 1.png

  1. 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 to Access Cell Item [WHDG] 2.png

  1. Another way to add TemplateField is to convert Grid Field into a Template Field.

Using ItemCommand Event to Access Cell Item [WHDG] 3.png

  1. Select some Grid field and press “Convert selected Grid Field into a Template Field”.

  2. 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 WebHierarchicalDataGrid’s smart tag and click on “Edit Templates”

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

Using ItemCommand Event to Access Cell Item [WHDG] 4.png

  1. From the toolbox, drag a standard ASP.NET button control onto ItemTemplate

  2. Select “End Template Editing” to finish editing.

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

In Visual Basic:

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

In C#:

protected void WebHierarchicalDataGrid1_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 to that event. The ItemCommand will be fired on the server and will expose to you event arguments through the HandleCommandEventArgs object.

Parent TemplateDataField

In ASPX:

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

Child TemplateDataField

In ASPX:

<ig:TemplateDataField Key="Country">
              <ItemTemplate>
                              <asp:Button ID="Button2" runat="server"
Text="Show country"
CommandArgument='<%# Eval("Country") %>'
                                      CommandName="ChildButtonClick" />
              </ItemTemplate>
              <Header Text="Country">
              </Header>
</ig:TemplateDataField>

In Visual Basic:

Protected Sub WebHierarchicalDataGrid1_ItemCommand(sender As Object, e As HandleCommandEventArgs)
        If (e.CommandName = "ChildButtonClick") Then
            'From Child Grid
            '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
            CountryValueLbl.Text = commandArgument.ToString()
        Else
            'From Parent Grid
            Dim commandArgument As Object = e.CommandArgument
            FreightValueLbl.Text = commandArgument.ToString()
        End If
 End Sub

In C#:

protected void WebHierarchicalDataGrid1_ItemCommand(object sender, HandleCommandEventArgs e)
{
      if (e.CommandName == "ChildButtonClick")
      {
                  //From Child Grid
                  //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
                  CountryValueLbl.Text = commandArgument.ToString();
      }
      else
      {
            //From Parent Grid
                  object commandArgument = e.CommandArgument;
                  FreightValueLbl.Text = commandArgument.ToString();
      }
}

  1. Run the application. Click one of the buttons, and notice that the field value is displayer above the WebHierarchicalDataGrid, as shown in the screen shot below.

Using ItemCommand Event to Access Cell Item [WHDG] 5.png

Related Topics

Using ItemCommand Event to Access Cell Item (WebDataGrid)

Using Item Templates

WebHierarchicalDataGrid Data Bindings

Binding WHDG to Xml Data Source