Popup Setting in AutoComplete

20 Mar 202412 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 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"},
    };

}

Change the popup height

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

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;

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

}

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.
    }
}

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;

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