1. Home
  2. Forum
  3. Blazor
  4. Blazor -> Multiselect dropdown -> Double click a chip and get the underlying item

Blazor -> Multiselect dropdown -> Double click a chip and get the underlying item

Hello Team,

I have implemented a multiselect component in my blazor app and filled it with data. Selected chips are displayed in "box-mode".
Is there a way to catch the doubleclick-event of a chip (ValueTemplate) and get the underlying dataset?
I tried to add a button as the valuetemplate but just don't get the data of the clicked item:


<SfMultiSelect TValue="string[]" ModelType="@models" Placeholder="..." DataSource="@Contacts" Mode="@VisualMode.Box" >
            <MultiSelectTemplates>
                <ItemTemplate>
                    <span>@((context as Contact).Name)</span>
                </ItemTemplate>
                <ValueTemplate>
                    <SfTooltip Content="@((context as Contact).Email)">
                        <Syncfusion.Blazor.Buttons.SfButton @onclick="ClickOnChip" >
                            <span>@((context as Contact).Name)</span>
                        </Syncfusion.Blazor.Buttons.SfButton>
                    </SfTooltip>
                </ValueTemplate>
            </MultiSelectTemplates>
            <MultiSelectFieldSettings Text="Name" Value="Id"></MultiSelectFieldSettings>
        </SfMultiSelect>
@code
{
    public List<Contact> Contacts { get; set; }
    Type models = typeof(Contact);

     public class Contact
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
    }

     protected void ClickOnChip(MouseEventArgs e)
    {
        // I need to catch the doubleclick event and get the Id of the Contact bound to the chip
    }
}




1 Reply 1 reply marked as answer
SN Sevvandhi Nagulan Syncfusion Team July 23, 2020 10:42 AM UTC


Hi Dennis, 


Greetings from Syncfusion support. 


When you click the button twice, then double click event will be triggered. We would suggest to use the double event. Also, we cannot access the DOM elements in blazor. So, we cannot get the clicked element target. Therefore, we used JSInterop to bind the double-click event on the client side, we have returned the target of the item clicked on. Refer to the code below, 


<SfMultiSelect TValue="int[]" ModelType="models" Placeholder="..." DataSource="@Contacts" Mode="@VisualMode.Box"> 
    <MultiSelectTemplates> 
        <ItemTemplate> 
            <span>@((context as Contact).Name)</span> 
        </ItemTemplate> 
        <ValueTemplate> 
            <SfTooltip Content="@((context as Contact).Email)"> 
                <Syncfusion.Blazor.Buttons.SfButton ID="btn" @ref="buttonObj" Created="onCreated" @ondblclick="ClickOnChip"> 
                    <span>@((context as Contact).Name)</span> 
                </Syncfusion.Blazor.Buttons.SfButton> 
            </SfTooltip> 
        </ValueTemplate> 
    </MultiSelectTemplates> 
    <MultiSelectFieldSettings Text="Name" Value="Id"></MultiSelectFieldSettings> 
</SfMultiSelect> 
@code 
{  
    Syncfusion.Blazor.Buttons.SfButton buttonObj; 
 
    public string selectedItem { get; set; } = string.Empty; 
    public List<Contact> Contacts = new List<Contact>() 
{ 
        new Contact(){ Id= 1, Name= "American Football",Email = "[email protected]" }, 
        new Contact(){ Id= 2, Name= "Badminton",Email = "[email protected]" } 
    }; 
    Type models = typeof(Contact); 
 
    public class Contact 
    { 
        public int Id { get; set; } 
        public string Name { get; set; } 
        public string Email { get; set; } 
    } 
 
    public async Task onCreated() 
    { 
        JSRuntime.InvokeVoidAsync("OnCreated", buttonObj.ID); 
 
    } 
    protected async Task ClickOnChip(MouseEventArgs e) 
    { 
 
        selectedItem = await JSRuntime.InvokeAsync<string>("OnItem", buttonObj.ID); 
        // I need to catch the doubleclick event and get the Id of the Contact bound to the chip 
    }  
    } 


[item.js] 

var selectedValue = null; 
window.OnCreated = (id) => { 
        document.getElementById(id).ondblclick = function (e) { 
            selectedValue = e.target.innerText; 
        } 
}; 
 
window.OnItem = (id) => { 
    return selectedValue; 
};  




 

Regards, 
Sevvandhi N 



Marked as answer
Loader.
Up arrow icon