_1.png)
This topic details how to enable the Row Editing behavior in the WebHierarchicalDataGrid ™ .
The following topics are prerequisites to understanding this topic:
This topic contains the following sections:
By default, row editing is disabled. You can enable it from the WebHierarchicalDataGrid Designer, from the ASPX markup, or in the code-behind. Each of these is explained in detail below.
The following table summarizes the ways to enable row editing for the WebHierarchicalDataGrid . The full procedures are available after this summary table.
This example shows how to enable the Row Editing and Editing Core behaviors of the WebHierarchicalDataGrid using the control’s designer.
The following screenshot is a preview of the final result.
To complete the procedure, you need the following:
An ASP.NET Visual Studio® web site or web application
A ScriptManager or WebScriptManager™ added to the web form
A WebHierarchicalDataGrid bound to a hierarchical data source
Following is a conceptual overview of the process:
1. Accessing a Band’s Behaviors options
2. Enabling row editing on an individual band
3. (Optional) * Enabling row editing on all bands*
4. (Optional) * Verifying the result*
The following steps demonstrate how to enable row editing in the designer.
Open the WebHierarchicalDataGrid smart tag.
In the ASPX page designer, click the smart tag button to open the WebHierarchicalDataGrid designer.
image::images/Enabling_Row_Editing_(WebHierarchicalDataGrid)_2.png[] 2. Click the Edit Bands link.
This opens the Designer for editing the available bands.
_3.png)
1. Open the Behaviors Designer.
Select the parent band and expand the Behavior node of the tree. Select the Behaviors property and click the ellipsis […] button.
image::images/Enabling_Row_Editing_(WebHierarchicalDataGrid)_4.png[] 2. Select the Row Editing Behavior.
Select the checkbox next to the Row Editing behavior. Enabling this checkbox also enables the Editing Core behavior.
1. Open the Bands Designer.
In the ASPX Page Designer, click the smart tag button to open the WebHierarchicalDataGrid Designer and click Edit Bands.
image::images/Enabling_Row_Editing_(WebHierarchicalDataGrid)_3.png[] 2. Enable Inheritance on both the EditingCore and Row Editing behaviors.
Ensure the parent data view is selected. In this case, it is called SqlDataSource1_DefaultView . Set the EnableInheritance property of the EditingCore and RowEditing behavior in the property grid.
_6.png)
3. Close the Designer.
To verify the result, run the project. You will see that you can edit the rows of the parent band and all of the child bands.
You enable the Row Editing and Editing Core behaviors by adding the respective ASPX markup to the web form. This is the same markup that is generated when using the designer (See Enabling Row Editing with the WebHierarchicalDataGrid Designer). Because the Row Editing behavior requires the EditingCore behavior, you will add that as well.
The following screenshot is a preview of the final result.
To complete the procedure, you need the following:
An ASP.NET Visual Studio web site or web application
A WebHierarchicalDataGrid bound to a hierarchical data source
The ig_res folder and styleset included in the project and configured in the web.config file
The Infragistics.Web.UI and Infragistics.Web.UI.GridControls namespaces registered on the web form with the ig tag prefix
Following is a conceptual overview of the process:
1. Enabling Row Editing in ASPX Markup on the parent grid.
2. (Optional) Enabling row editing in a child band.
3. (Optional) Enabling row editing on all bands.
4. (Optional) * Verifying the result.*
The following steps demonstrate how to enable the Row Editing behavior in ASPX markup.
1. Add the EditingCore behavior to the WebHierarchicalDataGrid behaviors collection
The Behaviors tag is nested within the WebHierarchicalDataGrid tags. If you already have other behaviors defined, the EditingCore behavior is added as a sibling of those behaviors within the Behaviors tag.
In ASPX:
<ig:WebHierarchicalDataGrid ID="WebHierarchicalDataGrid1" runat="server">
<Behaviors>
<ig:EditingCore>
</ig:EditingCore>
</Behaviors>
</ig:WebHierarchicalDataGrid>*2. Add the RowEditing behavior within the EditingCore’s behaviors collection.* The EditingCore behavior has a `Behaviors` collection similar to the grid. The RowEditing behavior is defined within the `Behaviors` tag of the `EditingCore` tag.
In ASPX:
<ig:EditingCore>
<Behaviors>
<ig:RowEditing></ig:RowEditing>
</Behaviors>
</ig:EditingCore>3. Save the ASPX of the page.
At this point, the code and grid should have the following code elements and functionality.
In ASPX:
<ig:WebHierarchicalDataGrid ID="WebHierarchicalDataGrid1" runat="server">
<Behaviors>
<ig:EditingCore>
<Behaviors>
<ig:RowEditing></ig:RowEditing>
</Behaviors>
</ig:EditingCore>
</Behaviors>
</ig:WebHierarchicalDataGrid>1. Add the EditingCore Behavior to the individual band’s behaviors collection
Each band defined in ASPX has its own Behaviors collection. If you already have other behaviors defined, the EditingCore behavior is added as a sibling of those behaviors within the Behaviors tag.
In ASPX:
<ig:Band AutoGenerateColumns=" DataMember="SqlDataSource2_DefaultView" Key="SqlDataSource2_DefaultView">
<Behaviors>
<ig:EditingCore>
</ig:EditingCore>
</Behaviors>
</ig:Band>*2. Add the RowEditing behavior within the EditingCore’s behaviors collection* The EditingCore behavior has a `Behaviors` collection similar to the grid. The RowEditing behavior is defined within the `Behaviors` tag of the `EditingCore` tag.
In ASPX:
<ig:EditingCore>
<Behaviors>
<ig:RowEditing></ig:RowEditing>
</Behaviors>
</ig:EditingCore>3. Save the ASPX for your page.
At this point, the code and grid should have the following code elements and functionality.
In ASPX:
<ig:Band AutoGenerateColumns=" DataMember="SqlDataSource2_DefaultView" Key="SqlDataSource2_DefaultView" >
<Behaviors>
<ig:EditingCore>
<Behaviors>
<ig:RowEditing></ig:RowEditing>
</Behaviors>
</ig:EditingCore>
</Behaviors>
</ig:Band>Set EnableInheritance to true on the EditingCore and RowEditing behaviors
On the grid’s behaviors collection, set EnableInheritance to true for the EditingCore and RowEditing behaviors.
In ASPX:
<ig:WebHierarchicalDataGrid ID="WebHierarchicalDataGrid1" runat="server">
<Behaviors>
<ig:EditingCore EnableInheritance="true">
<Behaviors>
<ig:RowEditing EnableInheritance="true"></ig:RowEditing>
</Behaviors>
</ig:EditingCore>
</Behaviors>
</ig:WebHierarchicalDataGrid>To verify the result, run the project. You will see the Row Editing behavior enabled for the desired bands.
This procedure adds the RowEditing behavior to the WebHierarchicalDataGrid at runtime in the code-behind. This approach is useful when you want to add the behavior conditionally. The RowEditing behavior is added to the EditingCore behavior’s Behaviors collection so you will add the EditingCore behavior at runtime as well.
It is best to use the InitializeBand event to change the behaviors on each band, including the parent WebHierarchicalDataGrid . To determine the band initializing, use the DataMember property of the band which serves as a unique identifier. Whenever you change a band during this event, you should call the WebHierarchicalDataGrid RefreshBehaviors method to ensure the changes are applied. Finally, the behavior definitions are saved in ViewState by default so you only need to perform these changes on initial load and not on postback unless you make changes to the behaviors during a postback.
The following screenshot is a preview of the final result.
To complete the procedure, you need the following:
An ASP.NET Visual Studio web site or web application
A WebHierarchicalDataGrid bound to a hierarchical data source
The ig_res folder and styleset included in the project and configured in the web.config file
A using statement for the Infragistics.Web.UI.GridControls namespace
Following is a conceptual overview of the process:
1. Creating an event handler for the InitializeBand event
2. Enabling Row Editing in the code-behind in the InitializeBand event
3. (Optional) Enabling row editing on all bands in the code-behind
4. (Optional) * Verifying the result*
The following steps demonstrate how to enable the Row Editing behavior in the code-behind.
Create an event and event handler for the InitializeBand event.
In C#:
using Infragistics.Web.UI.GridControls;
protected void Page_Init(object sender, EventArgs e)
{
this.WebHierarchicalDataGrid1.InitializeBand += new InitializeBandEventHandler(WebHierarchicalDataGrid1_InitializeBand);
}
void WebHierarchicalDataGrid1_InitializeBand(object sender, BandEventArgs e)
{
}*1. Add the EditingCore and RowEditing behaviors to the desired band(s).* Because the InitializeBand event fires for each band, you must check the DataMember property of the band in order to apply the changes to one band. For this example, I want to add the EditingCore and RowEditing behaviors to the _SqlDataSource1_DefaultView_ band.
In C#:
void WebHierarchicalDataGrid1_InitializeBand(object sender, BandEventArgs e)
{
WebHierarchicalDataGrid grid = sender as WebHierarchicalDataGrid;
if (grid != null)
{
if (!this.IsPostBack && e.Band.DataMember == "SqlDataSource1_DefaultView")
{
e.Band.Behaviors.CreateBehavior<EditingCore>();
e.Band.Behaviors.EditingCore.Behaviors.CreateBehavior<RowEditing>();
}
}
}3. Call RefreshBehaviors after the band changes have been made.
In C#:
grid.RefreshBehaviors();4. Save the code-behind file.
The code and grid should have the following code elements and functionality.
In C#:
void WebHierarchicalDataGrid1_InitializeBand(object sender, BandEventArgs e)
{
WebHierarchicalDataGrid grid = sender as WebHierarchicalDataGrid;
if (grid != null)
{
if (!this.IsPostBack && e.Band.DataMember == "SqlDataSource1_DefaultView")
{
e.Band.Behaviors.CreateBehavior<EditingCore>();
e.Band.Behaviors.EditingCore.Behaviors.CreateBehavior<RowEditing>();
}
grid.RefreshBehaviors();
}
}Set EnableInheritance to true on the EditingCore and RowEditing behaviors.
In the InitializeBand event handler, set EnableInheritance to true for the EditingCore and RowEditing behaviors.
In C#:
void WebHierarchicalDataGrid1_InitializeBand(object sender, BandEventArgs e)
{
WebHierarchicalDataGrid grid = sender as WebHierarchicalDataGrid;
if (grid != null)
{
if (!this.IsPostBack && e.Band.DataMember == "SqlDataSource1_DefaultView")
{
e.Band.Behaviors.CreateBehavior<EditingCore>();
e.Band.Behaviors.EditingCore.Behaviors.CreateBehavior<RowEditing>();
e.Band.Behaviors.EditingCore.EnableInheritance = true;
e.Band.Behaviors.EditingCore.Behaviors.RowEditing.EnableInheritance = true;
}
grid.RefreshBehaviors();
}
}To verify the result, run the project. Choose a band that you enabled with Row Editing and double click a row. You will see the row enter Edit mode.
The following topics provide additional information related to this topic.
The following samples provide additional information related to this topic.