Search in combobox by ItemTemplate

[Mini Dev]

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

[Christopher Issac Sunder K]

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 

http://www.syncfusion.com/downloads/support/forum/140977/ze/Predicate-625690943 

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

Thanks, 

Christo