TextBox component with custom dropdown

[Michael Salzlechner]

Need to build a textbox component with a custom dropdown (not a list but something completely custom) to select data

Any examples on how to get started? 

Textbox should have an icon to show the dropdown, dropdown should be a custom object with other sf components

thanks for any poi

[Yohapuja Selvakumaran]

Hi Michael,

Thank you for reaching out to us. We have validated your requirement, and if you simply need to add a dropdown icon to the textbox without performing any action, you can achieve this using the Created event of the textbox component with the public method AddIconAsync. Kindly check out the sample below for further reference:

Sample: https://blazorplayground.syncfusion.com/BjhzjxBpJVgIfzar

Code Snippet:

 

  <SfTextBox @ref="textObj" Created="CreateHandler"></SfTextBox>

 

  @code{

      SfTextBox textObj;

      public void CreateHandler(){

      textObj.AddIconAsync("append", "e-icons e-chevron-down-fill");

      }

  }

 

 

If you need to perform actions with the dropdown icon and use data, we have components like AutoComplete, ComboBox, and DropDownList. You can find more information about these components in the documentation links provided below. If these components suit your needs, we kindly recommend using them.

Documentation:

https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app

https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app

https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app

Regards,

Yohapuja S

[Michael Salzlechner]

thanks

i am looking to build something similar to an autocomplete but the dropdown should be a custom form that i can fill with other controls

so step 1 would be to add the icon as you have shown in your example

step 2 would be to show a dropdown component with other components inside. 

[Yohapuja Selvakumaran]

Hi Michael,

We suspect that you are expecting to open the empty popup by clicking on icon. We would like to inform you that we have a component called dialog and by clicking on button you can able to open the popup and you can customize content inside the popup as per your wish.

Kindly check out the below sample for further reference,

Sample: https://blazorplayground.syncfusion.com/rZhfZHVTKpNkvuxD

Kindly refer to the below documentation and demos for further reference.

Documentation:  https://blazor.syncfusion.com/documentation/dialog/getting-started

Demos:  https://blazor.syncfusion.com/demos/dialog/default-functionalities?theme=fluent2

Regards,

Yohapuja S

[Michael Salzlechner]

yes but i dont want a dialog. i want a modeless dropdown like in an autocomplete that goes away if you click outside of it

[Yohapuja Selvakumaran]

Hi Michael,

Thank you for your patience and cooperation. We have validated your requirement and achieved this functionality using our dialog component. The component is displayed like a dropdown popup and can be closed by clicking outside of it. Please find the code snippet below for your reference, and a runnable sample has also been attached for further reference.

Code snippet:

[Index.razor]

 

@using Syncfusion.Blazor.Popups

@using Syncfusion.Blazor.Buttons

@inject IJSRuntime JS

 

<div id="target">

    <SfButton @onclick="@OpenDialog">Open Dialog</SfButton>

 

    <SfDialog ID="dialog" @ref="Dialog" Target="#target" Width="250px" EnableResize="true" AllowDragging="true" ResizeHandles="@dialogResizeDirections" ShowCloseIcon="true" @bind-Visible="@IsVisible">

        <DialogTemplates>

            <Header> Dialog </Header>

            <Content> This is a Dialog with drag enabled </Content>

        </DialogTemplates>

        <DialogButtons>

            <DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialog" />

            <DialogButton Content="Cancel" OnClick="@CloseDialog" />

        </DialogButtons>

    </SfDialog>

</div>

 

<style>

    #target {

        min-height: 500px;

        height: 100%;

        position: relative;

    }

 

    .e-popup.e-popup-open.e-dialog {

        left: 0px !important;

        top: 50px !important;

    }

</style>

 

@code {

    private bool IsVisible { get; set; } = false;

    private SfDialog Dialog { get; set; }

 

    private ResizeDirection[] dialogResizeDirections { get; set; } = new ResizeDirection[] { ResizeDirection.All };

 

    private async void OpenDialog()

    {

        this.IsVisible = true;

        await JS.InvokeVoidAsync("detectOutsideClick", DotNetObjectReference.Create(this));

        this.IsVisible = true;

    }

 

    private void CloseDialog()

    {

        this.IsVisible = false;

    }

 

    [JSInvokable]

    public void CloseDialogFromJs()

    {

        this.IsVisible = false;

        StateHasChanged();

    }

}

 

 

[Host.cshtml]

 

 

    <script>

        function detectOutsideClick(dotNetHelper) {

            debugger;

            setTimeout(function () {

                const dialogElement = document.querySelector('.e-dialog')

                document.addEventListener('click', function (event) {

                    if (!dialogElement.contains(event.target) && event.target.tagName != "BUTTON") {

                        dotNetHelper.invokeMethodAsync('CloseDialogFromJs');

                    }

                });

            }, 200)

        }

    </script>

 

If you need any further reference about dialog component, Kindly refer to the below documentation and demos.

Documentation:https://blazor.syncfusion.com/documentation/dialog/getting-started

Demos:https://blazor.syncfusion.com/demos/dialog/default-functionalities?theme=fluent2

We hope this implementation effectively addresses your requirement. And you can customize the popup based on your needs. Should you have any further inquiries or need additional assistance, please don't hesitate to reach out.

Regards,

Yohapuja S

Attachment: Dialog_dropdownpopup_cccf2e38.zip