MultiSelect Dropdown will not work in DataGrid

[Judi Smith]

Greetings,

1. I have a MultiSelect inside an SfGrid Column as an EditTemplate. It appears that the multi select renders fine outside the grid but will not render correctly while inside the grid.

I have followed the direction here: https://blazor.syncfusion.com/documentation/datagrid/cell-edit-types#using-multiselect-dropdown-in-edittemplate for my implementation. You can see the results below.

 

My code is as follows:

<h4>Location Hours</h4>
<div>This sets the visible hours on the Calendar</div>
<hr/>
@****************** MultiSelect Outside Grid ******************@
<div class="col-12">
    <SfMultiSelect TValue="string[]" TItem="Enums.Days" DataSource="@_workingDays" @bind-Value="@_selectedDays" Mode="VisualMode.CheckBox">
        <MultiSelectFieldSettings Value="Id" Text="Name" />
        </SfMultiSelect>
</div>
<div class="col-12">
    <SfGrid TValue="Location" Toolbar=@ToolbarItems>
        <GridEditSettings AllowEditing="true" Mode="EditMode.Normal"></GridEditSettings>
        <SfDataManager Url="api/locations/locationschedule" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>
        <GridEvents TValue="Location" OnActionFailure="ActionFailure"></GridEvents>
        <GridColumns>
            <GridColumn Field="Id" IsPrimaryKey="true" Visible="false"/>
            <GridColumn Field="LocName" HeaderText="Location" AllowEditing="false"/>
            <GridColumn Field="LocStartTime" HeaderText="Start Time"
                        EditType="EditType.DateTimePickerEdit" Format="t" TextAlign="TextAlign.Right" Type="ColumnType.DateTime">
                <EditTemplate>
                    @{
                        var location = (context as Location);
                        <SfTimePicker TValue="DateTime?" @bind-Value="@location.LocStartTime"
                                      AllowEdit="true" Format="t" ShowClearButton="true"></SfTimePicker>
                    }
                </EditTemplate>
            </GridColumn>
            <GridColumn Field="LocEndTime" HeaderText="End Time"
                        EditType="EditType.DatePickerEdit" Format="t" TextAlign="TextAlign.Right" Type="ColumnType.DateTime">
                <EditTemplate>
                    @{
                        var location = (context as Location);
                        <SfTimePicker TValue="DateTime?" @bind-Value="@location.LocEndTime"
                                      AllowEdit="true" Format="t" ShowClearButton="true"></SfTimePicker>
                    }
                </EditTemplate>
            </GridColumn>
            <GridColumn Field="LocWorkingDays" HeaderText="Work Days">
                <EditTemplate>
  @*********************** MultiSelect Inside Grid ***********************@
                    @{
                        var location = (context as Location);
                        <SfMultiSelect TValue="string[]" TItem="Enums.Days" DataSource="@_workingDays" @bind-Value="@_selectedDays" Mode="VisualMode.CheckBox">
                            <MultiSelectFieldSettings Value="Id" Text="Name"/>
                        </SfMultiSelect>
                    }
                </EditTemplate>
            </GridColumn>
        </GridColumns>
    </SfGrid>
</div>


@code {
    [CascadingParameter] public ProcessError Error { get; set; }


    public string[] _selectedDays { get; set; } = { "1", "2", "3", "4", "5" };


    public string[] ToolbarItems = new string[] { "Edit", "Update", "Cancel" };
    private List<Enums.Days> _workingDays = new List<Enums.Days>
    {
        new Enums.Days {Name = "Monday", Id = "1" },
        new Enums.Days {Name = "Tuesday", Id = "2" },
        new Enums.Days {Name = "Wednesday", Id = "3" },
        new Enums.Days {Name = "Thursday", Id = "4"},
        new Enums.Days {Name = "Friday", Id = "5"},
        new Enums.Days {Name = "Saturday", Id = "6"},
        new Enums.Days {Name = "Sunday", Id = "7"}
    };


    private void ActionFailure(FailureEventArgs args)
    {
        Error.ProcessThisError("Error setting location times" + args.Error.Message);
    }
}

2. Another issue that I am having in the grid is that it appears the presence of the MultiSelect in the grid will not allow the grid to write back to the database,

Please advise.

Kind regards, Judi Smith 

[Monisha Saravanan]

Hi Judi,

Greetings from Syncfusion support.

Query: “I have a MultiSelect inside an SfGrid Column as an EditTemplate. It appears that the multi select renders fine outside the grid but will not render correctly while inside the grid.”

We  have checked your query and we suggest you to use Template feature of the DataGrid to bind the multiselect values to the Grid. Kindly check the attached code snippet for your reference.

<GridColumn Field=@nameof(Order.ChosenItems) HeaderText="Chosen Items" Width="150">

            <EditTemplate>

                <SfMultiSelect ID="ChosenItems" @bind-Value="@((context as Order).ChosenItems)" DataSource="@AvailableChoices" TValue="string[]" TItem="MyChoiceItem">

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

                </SfMultiSelect>

            </EditTemplate>

            <Template>

                @{

                    var d = (context as Order).ChosenItems;

                   <span>@String.Join(",", d)</span>

                }

            </Template>

        </GridColumn>

Query: “Another issue that I am having in the grid is that it appears the presence of the MultiSelect in the grid will not allow the grid to write back to the database”

Before proceeding further with your requirement kindly share the below details to validate further at our end.

1. Share us whether you are trying to save the selected multiselect values in the Database.
2. If it is for Display purpose you can use Grid Template column to show the selected values.
3. Share us the video demonstration of the issue with explanation.
4. If possible share us an simple issue reproduceable sample.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,

Monisha

[Judi Smith]

Monisha,

Thank you so much! I apologize for missing that detail in the sample. It displays correctly.

I have resolved my other issue with persisting the data in the database.

Kind regards,

Judi Smith

[Monisha Saravanan]

Hi Judi,

Welcome.

We are glad to hear that the reported query has been resolved. So we are proceeding to mark this ticket as closed. Kindly get back to us if you have further queries.

Regards,

Monisha