How to dinamically change selected values

[Stanislav Gordenko]

I have the multiselect inside the in-place editor to assign user roles:

                                            <SfInPlaceEditor Type="Syncfusion.Blazor.InPlaceEditor.InputType.MultiSelect" TValue="string[]" Value="@SelectedUserRoles"

                                                Mode="RenderMode.Inline" CssClass="w-80" EmptyText="-" ShowButtons="true" ActionOnBlur="ActionBlur.Cancel" SubmitOnEnter="true">

                                                <InPlaceEditorEvents TValue="string[]" OnActionBegin="@(() => OnRoleConfirm())" />

                                                <EditorComponent>

                                                    <SfMultiSelect TValue="string[]" TItem="AutoCompleteItem" AllowCustomValue="false"

                                                                   @bind-Value="@SelectedUserRoles" DataSource="@CouldAssignRoles"

                                                                   ShowClearButton="false" Mode="@VisualMode.Box" ShowDropDownIcon="true" AllowFiltering="false">

                                                        <MultiSelectFieldSettings Text="@nameof(AutoCompleteItem.ShowThis)" Value="@nameof(AutoCompleteItem.Result)" />

                                                        <MultiSelectEvents TValue="string[]" TItem="AutoCompleteItem" OnValueSelect="@OnChipSelected" />

                                                    </SfMultiSelect>

                                                </EditorComponent>

                                            </SfInPlaceEditor>

Depending on selected role the list of already selected roles should be changed:

        private void OnChipSelected(SelectEventArgs<AutoCompleteItem> args)

        {

            SelectedUserRoles = CouldAssignRoles.FilterAvailableRoles(SelectedUserRoles, args.ItemData.Result);

        }

When the selection is finished, it could be saved:

        private async Task OnRoleConfirm()

        {

            List<string> AddRoles = SelectedUserRoles.Where(r => !UserRoles.Contains(r)).ToList();

            List<string> RemoveRoles = UserRoles.Where(r => !SelectedUserRoles.Contains(r)).ToList();

            if (AddRoles.Count > 0 || RemoveRoles.Count > 0)

            {

                ApplicationUser UmUser = await UserManager.FindByIdAsync(ProfileUser.Id).ConfigureAwait(false);

                if (RemoveRoles.Count > 0)

                    await UserManager.RemoveFromRolesAsync(UmUser, RemoveRoles).ConfigureAwait(false);

                if (AddRoles.Count > 0)

                    await UserManager.AddToRolesAsync(UmUser, AddRoles).ConfigureAwait(false);

                NavigationManager.NavigateTo($"Account/Profile/{ProfileUser.UserName}", true);

            }

        }

Everything works well except  OnChipSelected. It updates binded  SelectedUserRoles, but the viewed list is not changed and InvokeAsync(StateHasChanged) does not help. How can I enforce the change of shown value?

[Gunasekar Kuppusamy]

Hi Stanislav,

Greetings from Synfusion support.

We have validated your reported query from the end and we were able to reproduce the issue with the OnValueSelect event.

For your case, we suggest you use the ValueChange event and set ChangeOnBlur property value as false. In this case, you will receive the updated multi-select value.

Please refer to the below code snippets.

Code snippets:

<SfInPlaceEditor Type="Syncfusion.Blazor.InPlaceEditor.InputType.MultiSelect" TValue="string[]" Value="@MultiValue"

                 Mode="RenderMode.Inline" CssClass="w-80" EmptyText="-" ShowButtons="true" ActionOnBlur="ActionBlur.Cancel" SubmitOnEnter="true">

    <InPlaceEditorEvents TValue="string[]" OnActionBegin="@(() => OnRoleConfirm())" />

    <EditorComponent>

        <SfMultiSelect TValue="string[]" TItem="Countries" AllowCustomValue="false"  ChangeOnBlur="false"

                       @bind-Value="@MultiValue" DataSource="@Country"

                       ShowClearButton="false" Mode="@VisualMode.Box" ShowDropDownIcon="true" AllowFiltering="false">

            <MultiSelectFieldSettings Text="Name" Value="Code" />

            <MultiSelectEvents TValue="string[]" TItem="Countries" ValueChange="@OnChipSelected" />

        </SfMultiSelect>

    </EditorComponent>

</SfInPlaceEditor>

@code {

    private void OnChipSelected(Syncfusion.Blazor.DropDowns.MultiSelectChangeEventArgs<string[]> args)

    {

        //You can call your method here.

    }

}

Sample: https://www.syncfusion.com/downloads/support/forum/168316/ze/Blazor_App-1587403348
Please check the sample and let us know if the solution meets your requirement.

Regards,

Gunasekar

[Stanislav Gordenko]

Thank you, everything is work. Only one detail - I have  ShowButtons="true" in In-Place Editor, but buttons are not shown anyway.

[Gunasekar Kuppusamy]

Hi Stanislav,

Good you to you.

We have validated your reported query from our end "I have  ShowButtons="true" in In-Place Editor, but buttons are not shown anyway" but unfortunately, we were not able to reproduce the issue from end.

In the above shared sample also, we are enabled the ShowButtons Property and it is working fine.

Rendered Editor with Buttons:

If you are still facing the issue, please share the following details, 

• The code snippets of the In-place Editor which used in your application.
• If possible, Please modify the above sample to reproduce the issue.
• Video illustration of the Issue reproducing video
• The exact package version you are using.

  

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest.

Regards, 

Gunasekar