Search in combobox by ItemTemplate

I have the following combobox component

function runComboBoxCostElementDefault() {
    let comboBoxObject = new ej.dropdowns.ComboBox({
        dataSource: ej.data.DataUtil.parse.isJson(@Html.Raw(ViewBag.source)),
        fields: {
            text: "Id",
            value: "Id"
        },
        // set the template content for list items
        itemTemplate: ' ${Id}-${FirstName} ${LastName}',
        htmlAttributes: {
            name: "UserId"
        },
        value: 1,
        allowCustom: false,
        popupHeight: "230px",
        zIndex: 9999
    });

    comboBoxObject.appendTo('#userComboBox');
}

I want to search in the list FirstName and LastName and not only by Id.
Example, elements in list

1 - Mario Rossi
2 - Giorgio Bianchi
3 - Alex Verde
4 - Bob Giallo

I want to search with "Mario Rossi" (FisrtName and LastName) and not with "1". (Id)

Is it possible?
 Thanks

1 Reply

CI Christopher Issac Sunder K Syncfusion Team November 19, 2018 09:52 AM UTC

Hi Mini, 

Thank you for contacting Syncfusion Support. 

We have prepared a sample similar to your requirement. We suggest you to use ‘Predicate’ of dataManager to filter items based on multiple columns in filtering event of ComboBox as shown below. 

<script> 
   function runComboBoxCostElementDefault() { 
    let comboBoxObject = new ej.dropdowns.ComboBox({ 
        dataSource: @Html.Raw(JsonConvert.SerializeObject(ViewBag.source)), 
        fields: { 
            text: "Id", 
            value: "Id" 
        }, 
        // set the template content for list items 
        itemTemplate: ' ${Id}-${FirstName} ${LastName}', 
        htmlAttributes: { 
            name: "UserId" 
        }, 
        value: 1, 
        allowCustom: false, 
        popupHeight: "230px", 
        zIndex: 9999, 
        allowFiltering:true, 
        filtering: (e) => { 
            if (e.text!="") {  
                var predicate = new ej.data.Predicate('FirstName', 'contains', e.text, true); 
                predicate = predicate.or('LastName', 'contains', e.text); 
                var query = new ej.data.Query(); 
                query = (e.text !== '' && e.value !== '') ? query.where(predicate) : query; 
                e.updateData(@Html.Raw(JsonConvert.SerializeObject(ViewBag.source)), query); 
            } 
        } 
    }); 
 
    comboBoxObject.appendTo('#userComboBox'); 
} 
</script> 

We have attached a sample for your reference which can be downloaded from the below link 


Please let us know if you require any further assistance on this. 

Thanks, 
Christo 


Loader.
Up arrow icon