Grid with Multiple Select control: how to get grid-row-object in a Multiple Select control's Value changed event (MultiSelectEvents)

[Joost Molenaar]

      <SfGrid @ref="Grid" DataSource="@inspection.Plants">

            <SfToolbar>

                <ToolbarItems>

                    <ToolbarItem Type="ItemType.Input">

                        <Template>

                            @Loc["LabelGridHeaderDOCPlants"]

                        </Template>

                    </ToolbarItem>

                    <ToolbarItem Type="ItemType.Button" Align="ItemAlign.Right" Text="Add" OnClick="OnAddDOCPlantClick">

                        <Template>

                            <span class="icon-plus"></span> @Loc["LabelGridHeaderAddDOCPlant"]

                        </Template>

                    </ToolbarItem>

                </ToolbarItems>

            </SfToolbar>

            <GridEvents OnActionComplete="OnActionCompletedHandler" TValue="PlantModel"></GridEvents>

            <GridEditSettings AllowEditing="true" AllowDeleting="true" ShowConfirmDialog="true" Mode="EditMode.Normal" />

            <GridTemplates>

                <RowTemplate>

                    @{

                        var plant = (context as PlantModel);

                        <td>

                            <table>

                                <tbody>

                                    <tr>

                                            <td>

                                                <SfMultiSelect TValue="List<int>" TItem="PlantTechnicalFeaturesAndStructureModel" DataSource="@plantTechnicalFeaturesAndStructures" 

                                                               Mode="@VisualMode.CheckBox" ShowDropDownIcon="true" ShowSelectAll=true AllowFiltering="true"

                                                               SelectAllText="@Loc["DropdownSelectAll"]" UnSelectAllText="@Loc["DropdownUnSelectAll"]" Placeholder="@Loc["PlaceHolderPlantTechnicalFeaturesAndStructures"]">

                                                    <MultiSelectFieldSettings Text="MemberName" Value="PlantTechnicalFeaturesAndStructuresId"></MultiSelectFieldSettings>

                                                    <MultiSelectEvents TValue="List<int>" TItem="PlantTechnicalFeaturesAndStructureModel" ValueChange="OnPlantTechnicalFeaturesAndStructuresChanged"></MultiSelectEvents>

                                                </SfMultiSelect>

                                            </td>

                                    </tr>

                                </tbody>

                            </table>

                        </td>

                    }

                </RowTemplate>

            </GridTemplates>

            <GridColumns>

                <GridColumn>

                    <GridCommandColumns>

                        <GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() { IconCss = "icon-cross" })"></GridCommandColumn>

                    </GridCommandColumns>

                </GridColumn>

            </GridColumns>

        </SfGrid>

    private void OnPlantTechnicalFeaturesAndStructuresChanged(MultiSelectChangeEventArgs<List<int>> args)

    {

        //var PlantId = plantDais.PlantId of grid's row???????? 

        foreach (var Id in args.Value)

        {

            var data = new PlantTechnicalFeaturesAndStructureModel();

        }

        SaveModel();

    }

I have a grid with a embeded Multiple Select control.

I need the PlantId (or even better the PlantModel object instance) of the Grid row binded Plant in a Multiple Select Change Event.

How do I do this?

[Vignesh Natarajan]

Hi Joost,  

Thanks for contacting Syncfusion support.  

Query: “how to get grid-row-object in a Multiple Select control's Value changed event (MultiSelectEvents)” 

 

We have analyzed your query and we suggest you to achieve your requirement by sending the grid row object a parameter to MultiSelectEvents. Refer the below code example.  

 

<SfGrid @ref="Grid" DataSource="@Plants">     

    <GridEvents OnActionComplete="OnActionCompletedHandler" TValue="PlantModel"></GridEvents> 

    <GridEditSettings AllowEditing="true" AllowDeleting="true" ShowConfirmDialog="true" Mode="EditMode.Normal" /> 

    <GridTemplates> 

        <RowTemplate> 

            @{ 

                var plant = (context as PlantModel); 

                <td> 

                    <table> 

                        <tbody> 

                            <tr> 

                                <td> 

                                    <SfMultiSelect TValue="List<int>" TItem="PlantTechnicalFeaturesAndStructureModel" DataSource="@plantTechnicalFeaturesAndStructures" 

                                                   Mode="@VisualMode.CheckBox" ShowDropDownIcon="true" ShowSelectAll=true AllowFiltering="true" 

                                                   SelectAllText="DropdownSelectAll" UnSelectAllText="DropdownUnSelectAll" Placeholder="PlaceHolderPlantTechnicalFeaturesAndStructures"> 

                                        <MultiSelectFieldSettings Text="MemberName" Value="PlantTechnicalFeaturesAndStructuresId"></MultiSelectFieldSettings> 

                                        <MultiSelectEvents TValue="List<int>" TItem="PlantTechnicalFeaturesAndStructureModel" ValueChange="@((args)=>OnPlantTechnicalFeaturesAndStructuresChanged(args,plant))"></MultiSelectEvents> 

                                    </SfMultiSelect> 

                                </td> 

                            </tr> 

                        </tbody> 

                    </table> 

                </td> 

            } 

        </RowTemplate> 

    </GridTemplates> 

</SfGrid> 

 

  

  

@code { 

    SfGrid<PlantModel> Grid { get; set; } 

    public List<PlantModel> Plants { get; set; } 

    private void OnPlantTechnicalFeaturesAndStructuresChanged(MultiSelectChangeEventArgs<List<int>> args, PlantModel plantobject) 

    { 

        //var PlantId = plantDais.PlantId of grid's row????????  

 

        foreach (var Id in args.Value) 

        { 

            //  var data = new PlantTechnicalFeaturesAndStructureModel(); 

        } 

        //SaveModel(); 

    } 

 

 

For your convenience we have prepared a sample using above solution. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/161401/ze/BlazorApp1-437907084  

 

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan