Popup Setting in Blazor AutoComplete Component

13 Dec 202415 minutes to read

You can dynamically adjust the size of the popup in the Autocomplete 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;

<SfAutoComplete TValue="string"  TItem="Countries" AllowResize="true" Placeholder="e.g. Australia" DataSource="@Country">
            <AutoCompleteFieldSettings Value="Name" />
</SfAutoComplete>


@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" }
    };
}

Blazor AutoComplete with AllowResize property

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 AutoComplete component.

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

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" PopupWidth="300px">
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
</SfAutoComplete>

@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 AutoComplete with customizing popup width

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

In the following sample, the PopupHeight is set as 200px.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" PopupHeight="200px">
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
</SfAutoComplete>

@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 AutoComplete with customizing popup height

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

Defaults to 1000.

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

RAZOR

@using Syncfusion.Blazor.DropDowns;

<SfAutoComplete @ref="AutoObj" TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData">
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
    <AutoCompleteEvents TValue="string" TItem="Games" Created="CreateHandler"></AutoCompleteEvents>
</SfAutoComplete>

@code {
    SfAutoComplete<string, Games> AutoObj;
    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()
    {
        AutoObj.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
@using Syncfusion.Blazor.Buttons

<SfAutoComplete TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData" >
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
  <AutoCompleteEvents TValue="string" TItem="Games" OnOpen="OnOpenHandler" ></AutoCompleteEvents>
</SfAutoComplete>

<SfAutoComplete TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData">
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
    <AutoCompleteEvents TValue="string" TItem="Games" OnClose="OnCloseHandler"></AutoCompleteEvents>
</SfAutoComplete>

@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"},
    };

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

}

Blazor AutoComplete with Preventing opening and closing

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

<SfAutoComplete TItem="GameFields" TValue="string" DataSource="@Games">
    <AutoCompleteEvents TItem="GameFields" TValue="string" OnOpen="@OnOpenHandler"></AutoCompleteEvents>
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
</SfAutoComplete>

@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

<SfAutoComplete TItem="GameFields" TValue="string" DataSource="@Games">
    <AutoCompleteEvents TItem="GameFields" TValue="string" Opened="@Openedhandler"></AutoCompleteEvents>
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
</SfAutoComplete>

@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

<SfAutoComplete TItem="GameFields" TValue="string" DataSource="@Games">
    <AutoCompleteEvents TItem="GameFields" TValue="string" OnClose="@OnCloseHandler"></AutoCompleteEvents>
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
</SfAutoComplete>

@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

<SfAutoComplete TItem="GameFields" TValue="string" DataSource="@Games">
    <AutoCompleteEvents TItem="GameFields" TValue="string" Closed="@CloseHandler"></AutoCompleteEvents>
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
</SfAutoComplete>

@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;

<SfAutoComplete ID="autocomplete" TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData">
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
</SfAutoComplete>

@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"},
    };
}

Layout.razor
<script>
    window.addEventListener("resize", function (e) {
        var wrapper = document.getElementById("autocomplete").parentElement;
        var popupEle = document.getElementById("autocomplete_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

Popup Setting in AutoComplete

Popup resize

Change the popup width

Change the popup height

Change the popup z-index

Show popup on initial loading

Preventing opening and closing

OnOpen event

Opened event

OnClose event

Closed event

Popup height based on available space