Prevent Drop down List mobile behaviour popup on full page in Blazor .Net 8

[Fahad]

I tried this code but not working in .Net 8 blazor.

window.OnOpen = function (id) { 

    

setTimeout(() => { 

        if (ej.base.Browser.isDevice) { 

            var multiObj = document.getElementById("multiselect").blazor__instance; 

            var parentElement = multiObj.containerElement; 

            multiObj.popupObj.position = { X: 'left', Y: 'bottom' }; 

            multiObj.popupObj.width = parentElement.offsetWidth; 

            multiObj.popupObj.dataBind(); 

            multiObj.popupObj.element.classList.remove( 

            'e-ddl-device', 

            'e-popup-full-page' 

        ); 

      } 

    },30); 

} 

[Kokila Poovendran]

Hi Fahad,

We've thoroughly reviewed your query regarding preventing the dropdown list mobile behavior popup on the full page in Blazor .NET 8. After careful consideration, we've devised a simple solution that should meet your requirements. Please refer to the following code snippet:

<SfDropDownList TValue="string" Placeholder="e.g. Australia" AllowFiltering=true TItem="Countries" @bind-Value="@DropVal" DataSource="@Country" Width="300px">

    <DropDownListFieldSettings Value="Name"></DropDownListFieldSettings>

    <DropDownListEvents TItem="Countries" TValue="string" OnOpen="BeforeOpen" Closed="ClosedHanlder"></DropDownListEvents>

</SfDropDownList>

@code {

    private async Task BeforeOpen()

    {

        await JSRuntime.InvokeVoidAsync("setIsDevice", false);

    }

    private async Task ClosedHanlder()

    {

        await JSRuntime.InvokeVoidAsync("setIsDevice", false);

    }

}

[script]

 <script>

     window.setIsDevice = (isDevice) => {

         window.browserDetails.isDevice = isDevice;

     };

 </script>

In this solution, we're setting the window.browserDetails.isDevice parameter to false within the OnOpen event. This adjustment ensures that the dropdown popup opens in a desktop manner on mobile devices. Additionally, we're reverting the window.browserDetails.isDevice parameter to true within the Closed event. This ensures that the popup maintains its visibility as a desktop-style popup exclusively during its opening.

Attachment: BlazorWebApp_dfd761c2.zip

[Fahad]

Hi Kokila Poovendran,

This solution works for me. 

Thanks

[Volker]

nice, but possibly you can add this work-around as a feature in a future release...

[Yohapuja Selvakumaran]

Hi Volker,

Thank you for getting back to us.

We are pleased to inform you that we have introduced the PopupDisplayMode property in the SfDropdownList component. By setting this property to Inline, you can display the dropdown popup similar to the desktop view. Please refer to the following code snippet for implementation:

Code Snippet:

 

<SfDropdownList TValue="string" DataSource="@Data" PopupDisplayMode="PopupDisplayMode.Inline">

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

</SfDropdownList>

 

 

For more details, please refer to our API Documentation.

API Documentation: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupDisplayMode

If you have any further questions or need assistance, please do not hesitate to contact us.

Regards,

Yohapuja S