EditTemplate with SfMultiSelect

[Ian Gaskill]

Is it possible to use a MultiSelect control in the EditTemplate of a GridColumn? If possible, could you provide an example of such?

[Rahul Narayanasamy]

Hi Ian, 

Greetings from Syncfusion. 

Query: Is it possible to use a MultiSelect control in the EditTemplate of a GridColumn? If possible, could you provide an example of such? 

We have validated your query and created a sample based on your requirement. Here, we have prepared a sample with MultiSelect control in EditTemplate. Find the below code snippets and sample for your reference. 

 

 

<SfGrid @ref=@Table DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 

    <GridEvents OnActionBegin="ActionBeginHandler" TValue="Order"></GridEvents> 

    <GridPageSettings PageSize=10 /> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"> 

            <EditTemplate> 

                <SfMultiSelect @ref="MultiSelect" ID="CustomerID" TValue="string[]" @bind-Value="@((context as Order).CustomerID)" Placeholder="e.g. Australia" DataSource="@Dropdown"> 

                    <MultiSelectFieldSettings Value="CustomerID" Text="CustomerID"></MultiSelectFieldSettings> 

                </SfMultiSelect> 

            </EditTemplate> 

            <Template> 

                @{ 

                    var d = (context as Order).CustomerID; 

                    <span>@String.Join(",", d)</span>    // for showing multi values in Grid column using Column template 

 

                } 

            </Template> 

        </GridColumn> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    SfMultiSelect<string[]> MultiSelect; 

    public SfGrid<Order> Table { get; set; } 

    . . . 

 

 

    public void ActionBeginHandler(ActionEventArgs<Order> args) 

    { 

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save) 

        { 

            args.Data.CustomerID = MultiSelect.Value;     //Save the multiselect value in Grid datasource. 

        } 

    } 

 

    . . . 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/159673/ze/SampleEdittemplate1063565018  

Please let us know If you have any concerns. 

Regards, 

Rahul