Master-Detail Many-To-Many relationship

Hello,

Inside of a Grid Edit Dialog I would like to have a detail grid that lists ALL of the possible Program options. The Grid would allow the user to check the ones that they want associated with the MemebershipOption. Those associated membership options would be stored. When the user goes to edit the MembershipOption, again, all of the possible Programs would be displayed with the previously selected Programs checked.

I understand that this functionality is similar to the MultiSelect DropDown. However, I would like all the options displayed as in the grid with the descriptions next to them.

Is there a way to accomplish this?

I have set out an abbreviated setup of my code below.

I have three tables:

Program
public int ProgramId
public string ProgramName
...
public List<MembershipOption> MembershipOptions

MembershipOption
public int OptionId
public string OptionName
...
public List<Program> Programs

ProgramMembershipOption
public in ProgramId
public int MembershipOptionId
public Program Programs
public MembershipOptions MembershipOptions

My Grid is setup as follows

<SfGrid TValue="MembershipOption">
<SfDataManager Url="api/membershipoption" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
<GridEditSettings ... Mode="EditMode.Dialog">
<HeaderTemplate>
...
</HeaderTemplate>
<Template>
[ Some Edit Controls in here]
</Templates>
</GridEditSettings>
<GridTemplates>
<DetailTemplate>
[In here I would like to have a Grid to list Programs as described above.]
</DetailTemplate>
</GridTemplates>
<GridColumns>​
Etc...
</GridColumns​>
</SfGrid>​



1 Reply

PS Prathap Senthil Syncfusion Team May 14, 2024 04:11 AM UTC


Hi Judi,

Based on your requirements, to achieve the functionality you described, you can implement a nested grid inside the detail template of your Syncfusion Blazor DataGrid. Utilize the Query property to display the list of programs associated with the current membership option being edited. Use checkboxes to allow the user to select programs associated with the MembershipOption. We have already documented related topics. Kindly refer to the below documentation to achieve your requirement accordingly.

Reference:
https://blazor.syncfusion.com/documentation/datagrid/detail-template

https://blazor.syncfusion.com/documentation/datagrid/selection#checkbox-selection

https://blazor.syncfusion.com/documentation/datagrid/detail-template#master-detail-datagrid


Regards,
Prathap Senthil


Loader.
Up arrow icon