Popup Setting in Dropdown List

30 Jan 202317 minutes to read

Change the popup width

Customize the width of the popup using the PopupWidth property. The default value of the PopupWidth is 100%. If popup width unspecified, it sets based on the width of the DropdownList component.

In the following sample, the PopupWidth is set as 300px.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfDropDownList  TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" PopupWidth="300px">
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    @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"},
        };
    
    }

    Blazor DropdownList with customizing popup width

    Handling TextOverflow

    When the width of the popup is less than text’s width, then the text-overflow:ellipsis style will be added automatically.

    In the following sample, the PopupWidth is set as 100px then the text-overflow:ellipsis is automatically applied

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfDropDownList TItem="GameFields" TValue="string" Width="100px" PopupWidth="100px" Placeholder="Select a favourite game" DataSource="@Games"> 
        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings> 
    </SfDropDownList> 
     
    @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" }, 
            new GameFields(){ ID= "Game5", Text= "Football" }, 
            new GameFields(){ ID= "Game6", Text= "Golf" }, 
            new GameFields(){ ID= "Game7", Text= "Hockey" }, 
            new GameFields(){ ID= "Game8", Text= "Rugby"}, 
            new GameFields(){ ID= "Game9", Text= "Snooker" }, 
            new GameFields(){ ID= "Game10", Text= "Tennis"}, 
         }; 
    }

    TextOverflow in Blazor DropdownList

    Change the popup height

    Customize the height of the popup using the PopupHeight. The default value of the PopupHeight is 300px.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfDropDownList  TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData" PopupHeight="500px">
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    @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"},
        };
    
    }

    Blazor DropdownList with customizing popup height

    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;
    
    <SfDropDownList @ref="DDLObj" TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData" >
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
      <DropDownListEvents TValue="string" TItem="Games" Created="CreateHandler"></DropDownListEvents>
    </SfDropDownList>
    
    @code {
        SfDropDownList<string, Games> DDLObj;
        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 CreateHandler()
        {
            DDLObj.ShowPopupAsync();
        }
    
    }

    Blazor DropdownList with Show popup on initial loading

    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;
    
    <SfDropDownList @ref="DDLObj" TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData" >
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
      <DropDownListEvents TValue="string" TItem="Games" OnOpen="OnOpenHandler" ></DropDownListEvents>
    </SfDropDownList>
    
    <SfDropDownList @ref="DDLObj" TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData" >
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
      <DropDownListEvents TValue="string" TItem="Games" OnClose="OnCloseHandler" ></DropDownListEvents>
    </SfDropDownList>
    
    @code {
        SfDropDownList<string, Games> DDLObj;
        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;
        }
    
    }

    Blazor DropdownList with Preventing opening and closing

    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
    
    <SfDropDownList TItem="GameFields" TValue="string" DataSource="@Games">
        <DropDownListEvents TItem="GameFields" TValue="string" OnOpen="@OnOpenHandler" ></DropDownListEvents>
        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
    </SfDropDownList>
    
    @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
    
    <SfDropDownList TItem="GameFields" TValue="string"  DataSource="@Games">
        <DropDownListEvents TItem="GameFields" TValue="string" Opened="@Openedhandler" ></DropDownListEvents>
        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
    </SfDropDownList>
    
    @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
    
    <SfDropDownList TItem="GameFields" TValue="string" DataSource="@Games">
        <DropDownListEvents TItem="GameFields" TValue="string" OnClose="@OnCloseHandler" ></DropDownListEvents>
        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
    </SfDropDownList>
    
    @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
    
    <SfDropDownList TItem="GameFields" TValue="string" DataSource="@Games">
        <DropDownListEvents TItem="GameFields" TValue="string" Closed="@CloseHandler" ></DropDownListEvents>
        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
    </SfDropDownList>
    
    @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.
        }
    }

    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
    @inject IJSRuntime JsRuntime
    <div class="game-drop-down-wrapper">
        <SfDropDownList TValue="string"
                        TItem="GameField"
                        ID="dropdown"
                        Width="300px"
                        Placeholder="Supervisor"
                        @bind-Value="@DropVal"
                        DataSource="@Games"
                        >
            <DropDownListFieldSettings Value="id" Text="text"></DropDownListFieldSettings>
        </SfDropDownList>
       
    </div>
    
    <style>
    
    </style>
    
    @code{
    
        public string DropVal { get; set; }
        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 }
            };
    
       
    }
    <script>
        window.addEventListener("resize", function (e) {
            var wrapper = document.getElementById("dropdown").parentElement;
            var popupEle = document.getElementById("dropdown_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>

    Popup height based on available space in Blazor DropdownList

    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 dropdown list. 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>
    
    <SfDropDownList  @ref="DDLObj" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@GameValue" >
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    @code {
        SfDropDownList<string, Games> DDLObj;
    
        public string GameValue { get; set; } = "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.DDLObj.ShowPopupAsync();
        }
    
        public void Hide () 
        {
            this.DDLObj.HidePopupAsync();
        }
    
    }

    Show or Hide Popup in Blazor DropdownList