Does DropdownList have an intergrated spinner?

[Chris Mortimer]

Hi,

I have a grid with a spinner control. That works fine. However there is another spinner on the page which seems to be linked to DropdownLists

On checking the page source for the class "e-spinner-inner" I find the spinner control but also a instance after each SfDropDownList control.

Any ideas how to prevent this?

[Gunasekar Kuppusamy]

Hi Chris,

Greetings from Syncfusion support.

We have validated your reported query "On checking the page source for the class "e-spinner-inner" I find the spinner control but also a instance after each SfDropDownList control".

It is the default behavior of the Dropdown List component. We have rendered the spinner elements inside each Dropdown List to show the spinner for multiple cases.So we cannot remove this elements inside the Dropdown List.

Please check the solution and let us know if you have any concerns

Regards,

Gunasekar

[Chris Mortimer]

OK, I understand but doesn't look great. Would it be possible to use a different class or have an option to disable?

[Indrajith Srinivasan]

Hi Chris, 

 

Good day to you, 

 

We have validated your reported queries, 

 

Query 1: “OK, I understand but doesn't look great.” 

 

Are you facing any difficulties, with the same class names used in the page for the spinner control ?. If so, let us know your usecase so that we can suggest any possible alternate solutions. 

 

Query 2: “Would it be possible to use a different class” 

 

In Syncfusion, we used to maintain a set of class for the components. We can’t change the class names particularly for a component, when it is nested inside another component. 

 

Query 3: “ have an option to disable?” 

 

You can disable the spinner, by setting the disabled class for the spinner element wrapper element. Check the below shared code blocks for reference. 

 

Index.razor 

 

 

@using Syncfusion.Blazor.DropDowns 

@using Microsoft.JSInterop; 

 

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

    <DropDownListEvents TItem="Games" TValue="string" Created="@OnCreate"></DropDownListEvents> 

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

</SfDropDownList> 

 

@code { 

    [Inject] 

    IJSRuntime jsRuntime { get; set; } 

    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 async void OnCreate() 

    { 

        await jsRuntime.InvokeAsync<string>("DropDowmSpinner.disabled"); 

    } 

} 

 

_Host.cshtml 

 

 

   <script> 

        window.DropDowmSpinner = { 

            disabled: function (args) { 

                if (document.querySelector(''#spinDisable ~ .e-ddl-icon .e-spinner-pane ')) { 

                    document.querySelector(''#spinDisable ~ .e-ddl-icon .e-spinner-pane').classList.add('e-disabled'); 

                } 

            } 

        } 

    </script> 

 

Please let us know if the above solution helps, 

 

Regards, 

Indrajith 

[Chris Mortimer]

Unfortunately I can't get that to work with the code you have provided. It fires (added an alert to the _host script) but there are still spinners.

[Gunasekar Kuppusamy]

Hi Chris,

By current Dropdown behavior, we cannot remove the elements from the DOM. we can only hide the spinner elements.

Please refer the below code snippets to hide the spinner element,

<script>

    window.DropDownSpinner = {

        disabled: function (args) {

            if (document.querySelector('#spinDisable ~ .e-ddl-icon .e-spinner-pane')) {

                document.querySelector('#spinDisable ~ .e-ddl-icon .e-spinner-pane').style.display = "none";

                document.querySelector('#spinDisable ~ .e-ddl-icon .e-spinner-pane').classList.add('e-disabled');

            }

        }

    }

</script>

Sample: https://www.syncfusion.com/downloads/support/forum/168555/ze/DROPDO~3649633413

Please check the solution and let us know if you have any concerns,

Regards,

Gunasekar