Popup Setting in MultiSelect

13 Dec 202416 minutes to read

Popup resize

You can dynamically adjust the size of the popup in the MultiSelect component by using the AllowResize property. When enabled, users can resize the popup, improving visibility and control, with the resized dimensions being retained across sessions for a consistent user experience.

RAZOR

@using Syncfusion.Blazor.DropDowns;

<SfMultiSelect TValue="string[]" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country" AllowResize="true">
    <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
</SfMultiSelect>

@code{

    public class Countries
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }

    private List<Countries> Country = new List<Countries>
    {
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" }
    };
}

Change the PopupHeight

Use the PopupHeight property to change the height of the popup. The default value of the PopupHeight is 300px.

RAZOR

@using Syncfusion.Blazor.DropDowns;

<SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" PopupHeight="@PopupHeight" > 
    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {

    public class Games
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }
    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Text= "American Football" },
    new Games() { ID= "Game2", Text= "Badminton" },
    new Games() { ID= "Game3", Text= "Basketball" },
    new Games() { ID= "Game4", Text= "Cricket" },
    new Games() { ID= "Game5", Text= "Football" },
    new Games() { ID= "Game6", Text= "Golf" },
    new Games() { ID= "Game7", Text= "Hockey" },
    new Games() { ID= "Game8", Text= "Rugby"},
    new Games() { ID= "Game9", Text= "Snooker" },
    new Games() { ID= "Game10", Text= "Tennis"},
    };

    public string PopupHeight { get; set; } = "200px";

}

Change the PopupWidth

To customize the width of the popup alone, use the PopupWidth property. The default value of the PopupWidth is 100%. If popup width unspecified, it sets based on the width of the MultiSelect component.

RAZOR

@using Syncfusion.Blazor.DropDowns;

<SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" PopupWidth="@PopupWidth"> 
    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {

    public class Games
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }
    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Text= "American Football" },
    new Games() { ID= "Game2", Text= "Badminton" },
    new Games() { ID= "Game3", Text= "Basketball" },
    new Games() { ID= "Game4", Text= "Cricket" },
    new Games() { ID= "Game5", Text= "Football" },
    new Games() { ID= "Game6", Text= "Golf" },
    new Games() { ID= "Game7", Text= "Hockey" },
    new Games() { ID= "Game8", Text= "Rugby"},
    new Games() { ID= "Game9", Text= "Snooker" },
    new Games() { ID= "Game10", Text= "Tennis"},
    };

    public string PopupWidth { get; set; } = "200px";

}

Change the popup z-index

Customize the z-index value of the component popup element.

Defaults to 1000.

Show popup on initial loading

You can achieve this by using ShowPopupAsync() in the Created Event.

RAZOR

@using Syncfusion.Blazor.DropDowns;

<SfMultiSelect @ref="multiObj" TValue="string[]" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
    <MultiSelectFieldSettings Value="ID" Text="Text"></MultiSelectFieldSettings>
    <MultiSelectEvents TValue="string[]" TItem="Games" Created="CreateHanlder"></MultiSelectEvents>
</SfMultiSelect>

@code {

    SfMultiSelect<string[], Games> multiObj;
public class Games
{
public string ID { get; set; }
public string Text { get; set; }
}

List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Text= "American Football" },
new Games() { ID= "Game2", Text= "Badminton" },
new Games() { ID= "Game3", Text= "Basketball" },
new Games() { ID= "Game4", Text= "Cricket" },
new Games() { ID= "Game5", Text= "Football" },
new Games() { ID= "Game6", Text= "Golf" },
new Games() { ID= "Game7", Text= "Hockey" },
new Games() { ID= "Game8", Text= "Rugby"},
new Games() { ID= "Game9", Text= "Snooker" },
new Games() { ID= "Game10", Text= "Tennis"},
};

public void CreateHanlder()
{
    multiObj.ShowPopupAsync();
}

}

Preventing opening and closing

Prevent the popup open and close in the event argument like BeforeOpenEventArgs.cancel and PopupEventArgs.cancel as true. It is achieved by the OnOpen and OnClose events.

RAZOR

@using Syncfusion.Blazor.DropDowns;

<SfMultiSelect @ref="MultiObj" TValue="string[]" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData" >
    <MultiSelectFieldSettings Value="ID" Text="Text"></MultiSelectFieldSettings>
    <MultiSelectEvents TValue="string[]" TItem="Games" OnOpen="OnOpenHandler" ></MultiSelectEvents>
</SfMultiSelect>

<SfMultiSelect @ref="MultiObj" TValue="string[]" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData" >
    <MultiSelectFieldSettings Value="ID" Text="Text"></MultiSelectFieldSettings>
    <MultiSelectEvents TValue="string[]" TItem="Games" OnClose="OnCloseHandler" ></MultiSelectEvents>
</SfMultiSelect>

@code {
    SfMultiSelect<string[], Games> MultiObj;
    public class Games
    {  
        public string ID { get; set; }
        public string Text { get; set; }
    }

    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
    };

    private void OnOpenHandler(BeforeOpenEventArgs args)
    {
        args.Cancel = true;
    }
    private void OnCloseHandler(PopupEventArgs args)
    {
        args.Cancel = true;
    }

}

The following events are used to trigger when opening and closing popup.

OnOpen event

The OnOpen event triggers when the popup is opened. If you cancel this event, the popup remains closed.

RAZOR

@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TItem="GameFields" TValue="string[]" DataSource="@Games">
    <MultiSelectEvents TItem="GameFields" TValue="string[]" OnOpen="@OnOpenHandler"></MultiSelectEvents>
    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {
    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= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };

    private void OnOpenHandler(BeforeOpenEventArgs args)
    {
        // Here you can customize your code
    }
}

Opened event

The Opened event triggers when the popup opens.

RAZOR

@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TItem="GameFields" TValue="string[]" AllowFiltering="true" DataSource="@Games">
    <MultiSelectEvents TItem="GameFields" TValue="string[]" Opened="@Openedhandler"></MultiSelectEvents>
    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {
    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= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };

    private void Openedhandler(PopupEventArgs args)
    {
        // Here you can customize your code
    }
}

OnClose event

The OnClose event triggers before the popup is closed. If you cancel this event, the popup will remain open.

RAZOR

@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TItem="GameFields" TValue="string[]" DataSource="@Games">
    <MultiSelectEvents TItem="GameFields" TValue="string[]" OnClose="@OnCloseHandler"></MultiSelectEvents>
    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {
    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= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };

    private void OnCloseHandler(PopupEventArgs args)
    {
        // Here you can customize your code
    }
}

Closed event

The Closed event triggers after the popup has been closed.

RAZOR

@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TItem="GameFields" TValue="string[]" DataSource="@Games">
    <MultiSelectEvents TItem="GameFields" TValue="string[]" Closed="@CloseHandler"></MultiSelectEvents>
    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {
    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= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };

    private void CloseHandler(ClosedEventArgs args)
    {
        // Here you can customize your code
    }
}

Popup height based on available space

You can achieve this by binding the resize event in window and update the height of the popup based on the window height.

RAZOR

@using Syncfusion.Blazor.DropDowns;


<SfMultiSelect TValue="string[]"
                TItem="GameField"
                ID="multiselect"
                Width="300px"
                Placeholder="Supervisor"
                DataSource="@Games">
    <MultiSelectFieldSettings Value="id" Text="text"></MultiSelectFieldSettings>
</SfMultiSelect>


@code{
    
public GameField CurrentSelection { get; set; }

public class GameField
{
    public string id { get; set; }
    public string text { get; set; }
    public bool isAvailable { get; set; }
}

List<GameField> Games = new List<GameField>() {
    new GameField(){ id= "Game1", text= "American Football", isAvailable = true },
    new GameField(){ id= "Game2", text= "Badminton", isAvailable = false },
    new GameField(){ id= "Game3", text= "Basketball", isAvailable = false  },
    new GameField(){ id= "Game4", text= "Cricket", isAvailable = true  },
    new GameField(){ id= "Game5", text= "Football", isAvailable = true  },
    new GameField(){ id= "Game6", text= "Golf", isAvailable = false  },
    new GameField(){ id= "Game7", text= "Hockey", isAvailable = true  },
    new GameField(){ id= "Game8", text= "Rugby", isAvailable = true },
    new GameField(){ id= "Game9", text= "Snooker", isAvailable = false },
    new GameField(){ id= "Game10", text= "Tennis", isAvailable = false }
};


}

Layout.razor

<script>
    window.addEventListener("resize", function (e) {
        var wrapper = document.getElementById("multiselect").parentElement;
        var popupEle = document.getElementById("multiselect_popup");
        var topVal = wrapper.getBoundingClientRect().top;
        window.innerHeight - topVal;
        if (popupEle) {
            popupEle.style.maxHeight = (window.innerHeight - topVal-50) + "px";
            popupEle.style.height = (window.innerHeight - topVal-50) + "px";

        }
    })
</script>

Programmatically opening and closing popup

You can programmatically open and close the popup by accessing the ShowPopupAsync() and HidePopupAsync() methods through an instance of the multiselect. Bind the click event of a button to these methods. When the button is clicked, it will trigger the respective method and open or close the popup.

RAZOR

@using Syncfusion.Blazor.DropDowns;


<button @onclick="Hide">Hide</button>

<button @onclick="Show">Show</button>

<SfMultiSelect  @ref="MultiSelect" TValue="string[]" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@GameValue" >
    <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
</SfMultiSelect>

@code {
SfMultiSelect<string[], Games> MultiSelect;

public string[] GameValue { get; set; } = new string[]{"Game3"};

public class Games
{
public string ID { get; set; }
public string Text { get; set; }
}

List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Text= "American Football" },
new Games() { ID= "Game2", Text= "Badminton" },
new Games() { ID= "Game3", Text= "Basketball" },
new Games() { ID= "Game4", Text= "Cricket" },
new Games() { ID= "Game5", Text= "Football" },
new Games() { ID= "Game6", Text= "Golf" },
new Games() { ID= "Game7", Text= "Hockey" },
new Games() { ID= "Game8", Text= "Rugby"},
new Games() { ID= "Game9", Text= "Snooker" },
new Games() { ID= "Game10", Text= "Tennis"},
};

public void Show ()
{
this.MultiSelect.ShowPopupAsync();
}

public void Hide ()
{
this.MultiSelect.HidePopupAsync();
}

}