1. Home
  2. Forum
  3. Blazor
  4. Open Dropdownlist on hover

Open Dropdownlist on hover

Hi, I'd like to be able to open the Dropdown List by hovering over the component instead of having to click it to open.

How can I open the Dropdown List by hovering over the component with my mouse? Thanks!


3 Replies
BC Berly Christopher Syncfusion Team June 24, 2021 02:43 PM UTC

Hi Kenney, 
  
Greetings from Syncfusion support. 
  
We can achieve the requested requirement by calling the ShowPopup() method in the mouse hover event by using JS interop and invoke the server side method as mentioned in the below example. 
  
using Syncfusion.Blazor.DropDowns 
 
<SfDropDownList @ref="DropDownObj" TValue="string" ID="dropdown" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country"> 
    <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings> 
    <DropDownListEvents TValue="string" TItem="Countries" Created="OnCreate"></DropDownListEvents> 
</SfDropDownList> 
 
@code { 
    public static string ParaContent { get; set; } 
    SfDropDownList<string, Countries> DropDownObj; 
    public class Countries 
    { 
        public string Name { get; set; } 
 
        public string Code { get; set; } 
    } 
 
    List<Countries> Country = new List<Countries> 
{ 
        new Countries() { Name = "Australia", Code = "AU" }, 
        new Countries() { Name = "Bermuda", Code = "BM" }, 
        new Countries() { Name = "Canada", Code = "CA" }, 
        new Countries() { Name = "Cameroon", Code = "CM" }, 
        new Countries() { Name = "Denmark", Code = "DK" }, 
        new Countries() { Name = "France", Code = "FR" }, 
        new Countries() { Name = "Finland", Code = "FI" }, 
        new Countries() { Name = "Germany", Code = "DE" }, 
        new Countries() { Name = "Greenland", Code = "GL" }, 
        new Countries() { Name = "Hong Kong", Code = "HK" }, 
        new Countries() { Name = "India", Code = "IN" }, 
        new Countries() { Name = "Italy", Code = "IT" }, 
        new Countries() { Name = "Japan", Code = "JP" }, 
        new Countries() { Name = "Mexico", Code = "MX" }, 
        new Countries() { Name = "Norway", Code = "NO" }, 
        new Countries() { Name = "Poland", Code = "PL" }, 
        new Countries() { Name = "Switzerland", Code = "CH" }, 
        new Countries() { Name = "United Kingdom", Code = "GB" }, 
        new Countries() { Name = "United States", Code = "US" }, 
    }; 
    private static Action action; 
    public DateTime? dateval { get; set; } = DateTime.Now; 
    [Inject] 
    protected IJSRuntime JsRuntime { get; set; } 
    protected override void OnInitialized() 
    { 
        action = UpdateValue; // call the method where we want to perform actions for the component 
    } 
    public async Task OnCreate() 
    { 
        await JsRuntime.InvokeVoidAsync("ChangeContentJS", "dropdown");  
    } 
 
    [JSInvokable] 
    public static void ReturnValue() 
    { 
        action.Invoke(); // For invoking the server side method from the client-side 
    } 
    private void UpdateValue() 
    { 
        this.DropDownObj.ShowPopup(); 
    } 
 
} 
window.ChangeContentJS = (id) => { 
    var dropObj = document.getElementById(id); 
    dropObj.parentElement.addEventListener("mouseover", function (e) { 
        DotNet.invokeMethodAsync('Blazor_Server', 'ReturnValue') // call the server-side method for perform the required action 
    }) 
} 
 
  
  
Regards, 
Berly B.C 


KP Kenney Phan June 24, 2021 05:24 PM UTC

Hi thank you for your reply. 


It works great, however, the Dropdown List stays open even when the mouse is not hovering over the component anymore.

How do you close the Dropdown List when the mouse is not hovering over the list?


Thank you


BC Berly Christopher Syncfusion Team June 25, 2021 04:21 PM UTC

Hi Kenney, 
  
We have achieved the requested requirement with help of binding the mouseover event for the document and conditionally called the ShowPopup and HidePopup method. Kindly refer the below code example. 
  
@using Syncfusion.Blazor.DropDowns 
 
<SfDropDownList @ref="DropDownObj" TValue="string" ID="dropdown" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country" > 
    <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings> 
    <DropDownListEvents TValue="string" TItem="Countries" Created="OnCreate"></DropDownListEvents> 
</SfDropDownList> 
 
@code { 
    public static string ParaContent { get; set; } 
    SfDropDownList<string, Countries> DropDownObj; 
    public class Countries 
    { 
        public string Name { get; set; } 
 
        public string Code { get; set; } 
    } 
 
    List<Countries> Country = new List<Countries> 
{ 
        new Countries() { Name = "Australia", Code = "AU" }, 
        new Countries() { Name = "Bermuda", Code = "BM" }, 
        new Countries() { Name = "Canada", Code = "CA" }, 
        new Countries() { Name = "Cameroon", Code = "CM" }, 
        new Countries() { Name = "Denmark", Code = "DK" }, 
        new Countries() { Name = "France", Code = "FR" }, 
        new Countries() { Name = "Finland", Code = "FI" }, 
        new Countries() { Name = "Germany", Code = "DE" }, 
        new Countries() { Name = "Greenland", Code = "GL" }, 
        new Countries() { Name = "Hong Kong", Code = "HK" }, 
        new Countries() { Name = "India", Code = "IN" }, 
        new Countries() { Name = "Italy", Code = "IT" }, 
        new Countries() { Name = "Japan", Code = "JP" }, 
        new Countries() { Name = "Mexico", Code = "MX" }, 
        new Countries() { Name = "Norway", Code = "NO" }, 
        new Countries() { Name = "Poland", Code = "PL" }, 
        new Countries() { Name = "Switzerland", Code = "CH" }, 
        new Countries() { Name = "United Kingdom", Code = "GB" }, 
        new Countries() { Name = "United States", Code = "US" }, 
    }; 
    private static Action action; 
    private static Action action2; 
    public DateTime? dateval { get; set; } = DateTime.Now; 
    [Inject] 
    protected IJSRuntime JsRuntime { get; set; } 
    protected override void OnInitialized() 
    { 
        action = UpdateValue; // call the method where we want to perform actions for the component 
        action2 = UpdateValue2; // call the method where we want to perform actions for the component 
    } 
    public async Task OnCreate() 
    { 
        await JsRuntime.InvokeVoidAsync("ChangeContentJS", "dropdown");  
    } 
   
    [JSInvokable] 
    public static void ReturnValue() 
    { 
        action.Invoke(); // For invoking the server side method from the client-side 
    } 
    [JSInvokable] 
    public static void ReturnValue2() 
    { 
        action2.Invoke(); // For invoking the server side method from the client-side 
    } 
    private void UpdateValue() 
    { 
        this.DropDownObj.ShowPopup(); 
    } 
    private void UpdateValue2() 
    { 
        this.DropDownObj.HidePopup(); 
    } 
 
} 
window.ChangeContentJS = (id) => { 
    var dropObj = document.getElementById(id); 
    document.addEventListener("mouseover", function (e) {         
        if (e.target.classList.contains("e-ddl") || e.target.classList.contains("e-dropdownlist")) { 
            DotNet.invokeMethodAsync('Blazor_Server', 'ReturnValue') 
        } else if (e.target.classList.contains("e-list-item")) { 
            return false; 
        } else { 
            DotNet.invokeMethodAsync('Blazor_Server', 'ReturnValue2') 
        } 
    })    
} 
 
  
  
Regards, 
Berly B.C 


Loader.
Up arrow icon