Disable all other values when Select all is selected

[Pavel]

Hello,

I want to have a Multiselect Dropdown with 5 values:

View All
Pizza
Burgers
Sides
Drinks

When I select View All, I would like to disable other values in the list and make them NON-selectable until View All has been unchecked. So basically I want the multi select to work like a single select for the View All field.

[UdhayaKumar Duraisamy]

Hi Pavel,

We have created a sample for the requested requirement and shared the sample below for reference. Please refer the code snippet and documentation for reference.

[Index.razor]

@page "/"

 

@using Syncfusion.Blazor.DropDowns

@inject IJSRuntime JSRuntime

 

<SfMultiSelect TItem="GameFields" TValue="string[]" @bind-Value="@MultiVal" AllowFiltering="true" EnableChangeOnBlur="false" DataSource="@Games" Width="250px">

    <MultiSelectEvents TItem="GameFields" TValue="string[]" ValueChange="@OnValueSelecthandler" Opened="@Openedhandler"></MultiSelectEvents>

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

</SfMultiSelect>

 

@code {

    public string[] MultiVal { get; set; } = new string[] { };

    public bool IsDisable = false;

    public class GameFields

    {

        public string ID { get; set; }

        public string Text { get; set; }

    }

 

    private List<GameFields> Games = new List<GameFields>() {

        new GameFields(){ ID= "Game1", Text= "View All" },

        new GameFields(){ ID= "Game2", Text= "Pizza" },

        new GameFields(){ ID= "Game3", Text= "Burgers" },

        new GameFields(){ ID= "Game4", Text= "Sides" },

        new GameFields(){ ID= "Game5", Text= "Drinks" },

     };

 

    private void OnValueSelecthandler(MultiSelectChangeEventArgs<string[]> args)

    {

        if(args.Value != null)

        {

            for (int i = 0; i < args.Value.Length; i++)

            {

                if (args.Value[i] == "Game1")

                {

                    MultiVal = new string[] { "Game1" };

                    IsDisable = true;

                }

                else

                {

                    IsDisable = false;

                }

            }

        }

    }

    private async Task Openedhandler(PopupEventArgs args)

    {

        if (IsDisable)

        {

            await JSRuntime.InvokeAsync<object>("Disable");

            IsDisable = false;

        }

        else

        {

            await JSRuntime.InvokeAsync<object>("Enable");

        }

    }

}

[_Layout.cshtml]

function Disable()

        {

            setTimeout(function(){

                for (var i = 1; i < 5; i++) {

                    document.getElementsByClassName('e-list-item')[i].classList.add('e-disabled');

                }

            },100);

            console.log("disabled");

        }

        function Enable() {

            setTimeout(function () {

                for (var i = 1; i < 5; i++) {

                    document.getElementsByClassName('e-list-item')[i].classList.remove('e-disabled');

                }

            }, 100);

            console.log("Enable");

        }

Documentation : https://blazor.syncfusion.com/documentation/multiselect-dropdown/events

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiSelect_Disable1434516168

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Udhaya Kumar D