1. Home
  2. Forum
  3. Blazor
  4. SfMultiSelect in SfGrid

SfMultiSelect in SfGrid

I am trying to make a SfMultiSelect work inside a SfGrid row. 
I would like then to allow my users to select from multiple options .
Here the code:

@code {
    public class MyGridItem
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public IList<MyChoiceItem> ChosenItems { get; set; }
    }
    public class MyChoiceItem
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
    protected override Task OnInitializedAsync()
    {
        GridItems = new List<MyGridItem>()
            {
                new() {Id = 1, Name = "First Row", ChosenItems = new List<MyChoiceItem>()},
                new() {Id = 2, Name = "Second Row", ChosenItems = new List<MyChoiceItem>()},
                new() {Id = 3, Name = "Third Row", ChosenItems = new List<MyChoiceItem>()}
            };
        AvailableChoices = new List<MyChoiceItem>()
            {
                new MyChoiceItem(){Id = 1, Name = "First Choice"},
                new MyChoiceItem(){Id = 2, Name = "Second Choice"},
                new MyChoiceItem(){Id = 3, Name = "Third Choice"},
            };
        return base.OnInitializedAsync();
    }
    public IList<MyChoiceItem> AvailableChoices { get; set; }
    public IList<MyGridItem> GridItems { get; set; }
}
<SfGrid DataSource="@GridItems" Toolbar="@(new List<string>() { "Add","Edit","Delete","Update","Cancel" })">
    <GridEditSettings AllowEditing="true" />
    <GridColumns>
        <GridColumn IsPrimaryKey="true" Field="@nameof(MyGridItem.Id)"></GridColumn>
        <GridColumn Field="@nameof(MyGridItem.Name)"></GridColumn>
        <GridColumn Field="@nameof(MyGridItem.ChosenItems)">
            <EditTemplate>
                <SfMultiSelect ID="ChosenItems" TItem="MyChoiceItem" 
                   TValue="IList<MyChoiceItem>" @bind-Value="@((context as MyGridItem).ChosenItems)"
                   DataSource="AvailableChoices">
                    <MultiSelectFieldSettings Value="ID" Text="Name" />
                </SfMultiSelect>
            </EditTemplate>
        </GridColumn>
    </GridColumns>
</SfGrid>

Ideally, the user should be able to select from the drop down when editing a row. 
The selected items should be shown as list separated by comma when in Read mode.

Thanks a lot for your assistance 







3 Replies 1 reply marked as answer
RS Renjith Singh Rajendran Syncfusion Team February 26, 2021 06:35 AM UTC

Hi BAx, 

Greetings from Syncfusion support. 

We suggest you to use the Column Template feature to achieve this requirement. And we have used OnActionBegin event of Grid and OnValueSelect event of MultiSelect to save the selected values from Multiselect to Grid. We are attaching the sample for your reference, please download the sample from the link below, 
References :  
 
Please refer and use the codes below, 

<GridEvents OnActionBegin="OnActionBegin" TValue="MyGridItem"></GridEvents>
 
<GridColumn Field="@nameof(MyGridItem.ChosenItems)"> 
    <Template> 
        @{ 
            var matter = (context as MyGridItem); 
            List<string> names = new List<string> (); 
            @foreach (var a in matter.ChosenItems) 
            { 
                names.Add(a.Name); 
            } 
            @String.Join(",", names); 
        } 
    </Template> 
    <EditTemplate> 
        <SfMultiSelect @ref="MultiRef" ID="ChosenItems" TItem="MyChoiceItem" 
                       TValue="IList<MyChoiceItem>" @bind-Value="@((context as MyGridItem).ChosenItems)" 
                       DataSource="AvailableChoices"> 
            <MultiSelectEvents OnValueSelect="OnValueSelect" TItem="MyChoiceItem" 
                       TValue="IList<MyChoiceItem>"></MultiSelectEvents> 
            <MultiSelectFieldSettings Value="ID" Text="Name" /> 
        </SfMultiSelect> 
    </EditTemplate> 
</GridColumn> 

SfMultiSelect<IList<MyChoiceItem>,MyChoiceItem> MultiRef { get; set; }public void OnActionBegin(ActionEventArgs<MyGridItem> args){    if (args.RequestType.Equals(Action.Save))    {        args.Data.ChosenItems = MultiSelectedData;        MultiSelectedData = new List<MyChoiceItem>();    }}IList<MyChoiceItem> MultiSelectedData = new List<MyChoiceItem>();public void OnValueSelect(SelectEventArgs<MyChoiceItem> args){    MultiSelectedData.Add(args.ItemData);}
 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


Marked as answer
BA BAx February 28, 2021 05:43 PM UTC

Hello Renjith Singh Rajendran,

Thanks again for helping and providing the working example.
However I am experiencing two issues while editing the multiselect values.

I attach an image to show evidence of the problem.

  1. Start from clean situation, expand the selection list. All 3 options are offered for selection (correct)
  2. Select the `First Choice`. This gets listed in the box as selected item. (correct)
  3. Expand the list again to get an additional selection. Only `Second Choice` and `Third Choice` are offered (correct)
  4. Select `Second Choice`. This last selection is not shown in the box as selected item (ISSUE #1). 
  5. The Update gets executed correctly, `First Choice` and `Second Choice` are shown to the user as the performed selections (correct)
  6. If I edit again, it looks like no selection ever happened (ISSUE #2)
How can I solve these problems?
Thanks for you attention


Attachment: issuemultiselect_54f0eab9.zip

RS Renjith Singh Rajendran Syncfusion Team March 2, 2021 09:46 AM UTC

Hi Bax, 

We have prepared a modified sample for your reference. Please download the sample from the link below, 
 
We suggest you to ensure to set proper type and Value property values of MultiSelectFieldSettings(based on property value(Id) in MyChoiceItem) to overcome this problem. Please refer the codes below, 

 
<GridColumn Field="@nameof(MyGridItem.ChosenItems)" Width="700"> 
    ... 
    <EditTemplate> 
        <SfMultiSelect @ref="MultiRef" ID="ChosenItems" TItem="MyChoiceItem" TValue="List<MyChoiceItem>" ...> 
            ... 
            <MultiSelectFieldSettings Value="Id" Text="Name" />      @*Previously its provided as ID*@
        </SfMultiSelect> 
    </EditTemplate> 
</GridColumn> 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


Loader.
Up arrow icon