Add buttons on combobox ?

[Frederic FOURGEOT]

Hi,

Can we add button(s) on combobox (like a group) ?

[Berly Christopher]

Hi Frederic, 

Greetings from Syncfusion support.  

We can achieve the requested requirement by using template for the grouping in the ComboBox component. Kindly refer the below code example. 

    <div class='control-wrapper'> 

        <div style='padding-top:75px;'> 

            <ejs-combobox id="customers" query="new ej.data.Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6).where(new ej.data.Predicate('City', 'equal','london').or('City','equal','seattle'))" placeholder="Select a customer" popupHeight="200px" 

                          groupTemplate="@Html.Raw("<button class='e-btn'>${City}</button>")"> 

                <e-combobox-fields groupBy="City" value="FirstName"></e-combobox-fields> 

                <e-data-manager url="https://services.odata.org/V4/Northwind/Northwind.svc/" adaptor="ODataV4Adaptor" crossDomain="true"></e-data-manager> 

            </ejs-combobox> 

        </div> 

    </div> 

 

Please find the sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/153279/ze/Syncfusion_EJ2_Core_App_153279_combobox985903154  

To know more about ComboBox component, please refer the below documentation link. 

UG Link: https://ej2.syncfusion.com/aspnetcore/documentation/combo-box/templates/?no-cache=1#group-template  

Regards, 

Berly B.C

[Frederic FOURGEOT]

Hi,

Thank your for your answer and your sample. I've used footer instead of group in my solution. In fact I search a solution more like this : https://getbootstrap.com/docs/4.4/components/input-group/#custom-forms

Buttons are at the same level as the control and are placed against it.

[Berly Christopher]

Hi Frederic, 

Thanks for the providing information.  

Currently, Syncfusion EJ2 input components does not have the requested requirement. We have already logged this feature request and this support will be included in any one of our upcoming releases.  

You can track the status of this feature from the below feedback link. 

Feedback Link: https://www.syncfusion.com/feedback/6649/  

But, we can achieve the requested requirement by making custom sample as mentioned below.  

[index.cshtml] 

 

<div class='control-wrapper'> 

        <div style='padding-top:75px;'> 

            <ejs-combobox id="customers" created="OnCreate" query="new ej.data.Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6).where(new ej.data.Predicate('City', 'equal','london').or('City','equal','seattle'))" placeholder="Select a customer" popupHeight="200px" 

                          groupTemplate="@Html.Raw("<button class='e-btn'>${City}</button>")"> 

                <e-combobox-fields groupBy="City" value="FirstName"></e-combobox-fields> 

                <e-data-manager url="https://services.odata.org/V4/Northwind/Northwind.svc/" adaptor="ODataV4Adaptor" crossDomain="true"></e-data-manager> 

            </ejs-combobox> 

        </div> 

    </div> 

<script> 

    function OnCreate(args) { 

        // Create the span element for insert phone icon  

        var span = document.createElement("span"); 

        // Add the phone icon class to the span element  

        span.setAttribute("class", "fa fa-phone"); 

        // append the span element after the input wrapper  

        this.inputWrapper.container.insertAdjacentElement('afterbegin', span);  

    } 

</script> 

<style> 

    span.fa.fa-phone { 

        position: absolute; 

        border: 0.5px solid #ced4da; 

        align-items: center; 

        justify-content: center; 

        line-height: 2; 

        min-width: 28px; 

        height: 30px; 

        text-align: center; 

        background-color: #e4e5e6; 

        border-radius: 4px 0 0 4px; 

        font-size: 14px; 

        margin-left: 0px; 

        margin-top: 0px; 

    } 

 

    .e-input.e-combobox { 

        text-indent: 27px !important; 

    }  

</style> 

[_Layout.cshtml] 

<link rel="stylesheet" rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  

 

Please find the sample from the below link. 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/153279/ze/Syncfusion_EJ2_Core_App_153279_combobox_addon1570373862  

Regards, 

Berly B.C