New Row/Delete Button in Master Details

[Alfred Smith]

I wish to have it so that when a Master Details is shown for my Data Grid that it allow the user to add a new row and also delete selected rows.

In addition if a the parent object does not have any child objects yet, the grid should still allow the user to expand the view to show the empty master details and allow them to add a row through that.

I have attached an image to show roughly what I am trying to do. The square boxes on the left represent check boxes so that a user may select the rows he wants to delete. Also the "Add Row" and "Delete Selected" buttons should not be visible when the Master Details is collapsed.

Attachment: 1_7784d9ab.png

[Rabina Murugan]

Hi Alfred Smith,

Please find the responses for your queries below,

SI.NO	Queries	Responses
1.	I wish to have it so that when a Master Details is shown for my Data Grid that it allow the user to add a new row and also delete selected rows.	Your requirement to add a new row in the DetailsView can be achieved by setting the AddNewRowPosition property.   Code snippet to use AddNewRowPosition:   <dataGrid:SfDataGrid.DetailsViewDefinition>     <!-- FirstLevelNestedGrid1: Sales -->     <dataGrid:GridViewDefinition RelationalColumn="Sales">         <dataGrid:GridViewDefinition.DataGrid>             <dataGrid:SfDataGrid x:Name="FirstLevelNestedGrid1"                              AddNewRowPosition="Top"                              AllowEditing="True"                                                                      AllowDeleting="True"                              GridLinesVisibility="Both"                              AutoGenerateColumns="True">                 <dataGrid:SfDataGrid.Columns>                     <dataGrid:GridCheckBoxSelectorColumn MappingName="IsChecked" Width="50"/>                 </dataGrid:SfDataGrid.Columns>             </dataGrid:SfDataGrid>         </dataGrid:GridViewDefinition.DataGrid>     </dataGrid:GridViewDefinition>  </dataGrid:SfDataGrid.DetailsViewDefinition>   Image illustration of AddNewRow:
2.	In addition if a the parent object does not have any child objects yet, the grid should still allow the user to expand the view to show the empty master details and allow them to add a row through that.	The parent object supports expanding even when no child objects are present, and it allows adding new rows in the details view.   Please refer to the below image for reference:
3.	The square boxes on the left represent check boxes so that a user may select the rows he wants to delete. Also the "Add Row" and "Delete Selected" buttons should not be visible when the Master Details is collapsed.	The requirement to select rows using checkboxes and delete the selected rows can be achieved by adding a GridCheckBoxSelectorColumn in the Details View. The selected rows can then be removed by pressing the 'Delete' key. Please refer to the attached sample for detailed implementation.

Find a sample demo and video in the attachment.

Please let us know if you have any concerns on this.

Regards,

Rabina M

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: Sample_Video_a88963c8.zip

[Alfred Smith]

Hi thanks for the reply Rabina. The code you provided solved most of my issues. 

The only issue I still have is with regards to deleting a row. I see the checkboxes showing up, but I can still delete the row it even if it the box is not checked. That said I wasn't aware that one could simply push the Delete key to remove a row which kind of negates the need for the checkbox. 

So only my remaining question now is that say I wanted to select multiple rows and delete all of with one press of the Delete key, how would I go about doing that?

[Rabina Murugan]

Hi Alfred Smith,

We have investigated the reported scenario. Your requirement to delete a row only when the checkbox is checked, and to select and delete multiple rows using the Delete key, can be achieved by setting the SelectionMode of the details view grid to "Extended". This ensures that only the rows with the checkbox checked can be deleted and multiple rows can be selected and deleted at once using the Delete key.

Code snippet to set SelectionMode in DetailsView:

 <dataGrid:SfDataGrid.DetailsViewDefinition>

     <dataGrid:GridViewDefinition RelationalColumn="Orders" >

         <dataGrid:GridViewDefinition.DataGrid>

             <dataGrid:SfDataGrid x:Name="FirstLevelNestedGrid2"

                              AddNewRowPosition="Top"

                              AllowEditing="True"                                    

                              AllowDeleting="True"                                        

                              SelectionMode="Extended"

                              GridLinesVisibility="Both"

                              AutoGenerateColumns="True">

                 <dataGrid:SfDataGrid.Columns>

                     <dataGrid:GridCheckBoxSelectorColumn AllowCheckBoxOnHeader="False" MappingName="IsChecked" Width="50"/>

                 </dataGrid:SfDataGrid.Columns>

             </dataGrid:SfDataGrid>

         </dataGrid:GridViewDefinition.DataGrid>

     </dataGrid:GridViewDefinition>

 </dataGrid:SfDataGrid.DetailsViewDefinition>

For more information about the Selection , kindly refer to the following user guide document,

UG link : Selection

Find a sample demo and video in the attachment.

Please let us know if you need any further assistance.

Regards,

Rabina M

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: Sample_Video_c89df3ec.zip

[Alfred Smith]

Thanks Rabina that solved my issue :)

[Rabina Murugan]

Hi Alfred Smith,

 

Glad that your issue is resolved!. Please get back to us if you need any further assistance, we will be happy to help you.

 

Regards,

Rabina M