To delete data in WebHierarchicalDataGrid™, add the RowDeleting behavior to the Behaviors collection. This behavior allows your end-users to delete rows in WebHierarchicalDataGrid. You also need the Selection behavior enabled for deleting to function in the UI. When enabling RowDeleting in the designer you will be prompted to add the Selection behavior as well.
A row can be deleted by selecting the row and pressing the delete key.
You will learn to enable row deletion behavior in the WebHierarchicalDataGrid control.
Bind WebHierarchicalDataGrid to a WebHierarchicalDataSource™ component retrieving data from the Categories and Products table. For more information on doing this, see the Using WebHierarchicalDataSource topic. Set the DataKeyFields property for each Data source that you bind to the HierarchicalDataGrid so that changes can be updated to the data source.
In the Microsoft® Visual Studio property window, locate the Behaviors property and click the ellipsis (…) button to launch the Behaviors Editor dialog.
Set the EnableInheritance property of the EditingCore and Row Deleting Behaviors to True. This enables all the child levels to automatically inherit row deleting behavior. The property’s default value is False.
Check the checkbox next to Row Deleting from the list of behaviors on the left to enable the behavior. You are prompted to add Selection as well. Notice that the EditingCore behavior is also added.
Click Yes to confirm the prompt. The Selection behavior with the CellClickAction and RowSelectType properties set to Row and Single respectively is added to WebHierarchicalDataGrid.
Click Apply then Ok.
Set the WebHierarchicalDataGrid EnableAjax property to True. Now when you select a row in WebHierarchicalDataGrid and press the DELETE key, the row is deleted from the control as well as the underlying data source.
You can also use the following code to enable row deleting.
In HTML:
<ig:WebHierarchicalDataGrid ID="WebHierarchicalDataGrid1" runat="server"
Height="350px" Width="400px">
<Behaviors>
<ig:EditingCore EnableInheritance="True">
<Behaviors>
<ig:RowDeleting EnableInheritance="True" />
</Behaviors>
</ig:EditingCore>
<ig:Selection CellClickAction="Row" RowSelectType="Single">
</ig:Selection>
<ig:RowSelectors>
</ig:RowSelectors>
</Behaviors>
</ig:WebHierarchicalDataGrid>
In Visual Basic:
Me.WebHierarchicalDataGrid1.Behaviors.EditingCore.EnableInheritance = True Me.WebHierarchicalDataGrid1.Behaviors.EditingCore.Behaviors.RowDeleting.Enabled = True Me.WebHierarchicalDataGrid1.Behaviors.EditingCore.Behaviors.RowDeleting.EnableInheritance = True Me.WebHierarchicalDataGrid1.Behaviors.Selection.Enabled = True Me.WebHierarchicalDataGrid1.Behaviors.Selection.CellClickAction = CellClickAction.Row Me.WebHierarchicalDataGrid1.Behaviors.Selection.RowSelectType = SelectType.Single Me.WebHierarchicalDataGrid1.Behaviors.RowSelectors.Enabled = True
In C#:
this.WebHierarchicalDataGrid1.Behaviors.EditingCore.EnableInheritance = true; this.WebHierarchicalDataGrid1.Behaviors.EditingCore.Behaviors.RowDeleting.Enabled = true; this.WebHierarchicalDataGrid1.Behaviors.EditingCore.Behaviors.RowDeleting.EnableInheritance = true; this.WebHierarchicalDataGrid1.Behaviors.Selection.Enabled = true; this.WebHierarchicalDataGrid1.Behaviors.Selection.CellClickAction = CellClickAction.Row; this.WebHierarchicalDataGrid1.Behaviors.Selection.RowSelectType = SelectType.Single; this.WebHierarchicalDataGrid1.Behaviors.RowSelectors.Enabled = true;
You can also delete a row programmatically on the client by using the following code:
In Javascript:
var grid = $find("WebHierarchicalDataGrid1");
var parentGrid = grid.get_gridView();
// Remove first PARENT row parentGrid.get_rows().remove(parentGrid.get_rows().get_row(0)); var childGrid = grid.get_gridView().get_rows().get_row(0).get_rowIslands(0)[0]; // Remove first CHILD row childGrid.get_rows().remove(childGrid.get_rows().get_row(0));