Using a Dropdown list in a Dialog Box

[Randy]

I am unable to figure out how to add a dropdown in a dialog box using  Syncfusion Blazor  Controls. 

If anyone knows of a place I can checkout that has examples of this please let me know.

I am able to add a dropdown and I am able to add a dialog control but unable to put the two together.

Thanks

[Revanth Krishnan]

Hi Randy, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “I am unable to figure out how to add a dropdown in a dialog box using Syncfusion Blazor control”. 

 

This can be achieved by rendering the Dropdown list inside the Dialog template. We have prepared a sample for your reference, 

 

Code Snippet: 

 

<SfDialog @ref="@dialogObj" @bind-Visible="@isVisible" Height="400px" Width="70%"> 

    <DialogTemplates> 

        <Header>Dialog Header</Header> 

        <Content> 

            <p>Dialog Content with dropdown</p> 

            <SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData"> 

                <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings> 

            </SfDropDownList> 

        </Content> 

    </DialogTemplates> 

</SfDialog> 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dialog_App-626432663 

 

Documentation: https://blazor.syncfusion.com/documentation/dialog/template/ 

 

Please check the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth 

[bossink]

Hello Syncfusion,

I use something like this as well and it works on the web, but not on the phone.

See images.

 

<SfDialog Width="25%" @bind-Visible="@isVisible" IsModal="true" ShowCloseIcon="false">

    <DialogTemplates>

        <Header>@header </Header>

        <Content>

            @content <br/>

            Selecteer Medewerker:

            <Syncfusion.Blazor.DropDowns.SfDropDownList TValue="int" TItem="Inzicht_Storing.Persoon" DataSource="@PersonenList">

                <Syncfusion.Blazor.DropDowns.DropDownListFieldSettings Value="ID" Text="VolledigeNaam"></Syncfusion.Blazor.DropDowns.DropDownListFieldSettings>

                <Syncfusion.Blazor.DropDowns.DropDownListEvents OnValueSelect="OnSelectMedewerker" TValue="int" TItem="Inzicht_Storing.Persoon"></Syncfusion.Blazor.DropDowns.DropDownListEvents>

            </Syncfusion.Blazor.DropDowns.SfDropDownList>

            Selecteer Status:

            <Syncfusion.Blazor.DropDowns.SfDropDownList TValue="int" TItem="Status" DataSource="@StatusList">

                <Syncfusion.Blazor.DropDowns.DropDownListFieldSettings Value="ID" Text="StatusType"></Syncfusion.Blazor.DropDowns.DropDownListFieldSettings>

                <Syncfusion.Blazor.DropDowns.DropDownListEvents OnValueSelect="OnSelectStatusType" TValue="int" TItem="Status"></Syncfusion.Blazor.DropDowns.DropDownListEvents>

            </Syncfusion.Blazor.DropDowns.SfDropDownList>

        </Content>

    </DialogTemplates>

    <DialogButtons>

        <DialogButton Content="Save" IsPrimary="true" OnClick="SaveDialog"></DialogButton>

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

    </DialogButtons>

</SfDialog>

[Gunasekar Kuppusamy]

Hi Bossink, 

Greetings from Syncfusion support.

We have validated your reported query from our end with your shared code snippets, but we are unable to run the sample with your shared code.

So, we have prepared a sample from our end and checked but we didn't face any issues in the mobile mode. We have attached a sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/forum/164758/ze/Blazor_App1801383025

Screenshot:

If you are still facing the issue, please share the following details,  

• If possible, modify the above sample to reproduce the issue.
• or share us the issue sample with minimum code snippets.
• The exact package version you are using.
• Share us, If any console errors were thrown

  

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

 

Regards, 

Gunasekar 

[bossink]

I am sorry for the late reply.

I've found "the problem". When you open the dialog from lower in the page (scrolling needed) the dropdown position is not right.

In the updated file there is an example with a height of 1500px and the button at the bottom to open the dialog.

Is there a way that the dropdown will always position itself based on the dialog?

Attachment: Blazor_App_dropdownSyncFusion_21079492.7z

[Gunasekar Kuppusamy]

Hi Randy,

Good day to you.

We have checked your sample and we are able to reproduce the issue from our end. To resolve this issue, we suggest that set the OffsetY value to the PopupEventArgs of the Opened event.

We have modified the sample for your reference.

Code Snippets:

<SfDialog Width="25%" @bind-Visible="@isVisible" IsModal="true" ShowCloseIcon="true" Height="300px">

    <DialogTemplates>

        <Header>@header </Header>

        <Content>

            @content

            <br />

            Selecteer Medewerker:

            <SfDropDownList TItem="Countries" TValue="string" Placeholder="Select a country" PopupHeight="auto" DataSource="@Country">

                <DropDownListEvents TItem="Countries" TValue="string" ValueChange="ChangeCountry" Opened="OnOpen"></DropDownListEvents>

                <DropDownListFieldSettings Text="CountryName" Value="CountryId"></DropDownListFieldSettings>

            </SfDropDownList>

            Selecteer Status:

            <SfDropDownList TValue="string" TItem="State" @bind-Value="@StateValue" Placeholder="Select a state" Query="@StateQuery" PopupHeight="auto" DataSource="@States">

                <DropDownListEvents TItem="State" TValue="string" Opened="OnOpen"></DropDownListEvents>

                <DropDownListFieldSettings Text="StateName" Value="StateId"></DropDownListFieldSettings>

            </SfDropDownList>

        </Content>

    </DialogTemplates>

    <DialogButtons>

        <DialogButton Content="Save" IsPrimary="true"></DialogButton>

        <DialogButton Content="Cancel"></DialogButton>

    </DialogButtons>

</SfDialog>

@code {

    public void OnOpen(PopupEventArgs args)

    {

        args.Popup.OffsetY = 1;

    }

}

Sample: https://www.syncfusion.com/downloads/support/forum/164758/ze/Blazor_App_dropdownSyncFusion-640901019

Please check the solution and lets us know if the provided solution helps from your end.

Regards,

Gunasekar

[Valeriy Gorkaviy]

I also have this problem (iPad/iPhone). This crutch works.

PS It was fixed. It is working in the latest package (24.1.44)

PPS SfTimePicker still has a problem (list is opened in the center of dialog on iPad/iPhone)

[Kokila Poovendran]

Hi Randy,

Thank you for reaching out.

We've investigated the issue you reported regarding the SfTimePicker on iPad/iPhone. After thorough validation, we would like to inform you that the behavior you observed, where the Timepicker popup is displayed in the center of the screen on iPad/iPhone, is the intended design of the component. This is the default behavior for the Timepicker popup.

For your reference, you can view the video illustration of this behavior below:

 

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

If you have any further questions or concerns, please feel free to let us know. We appreciate your understanding.