DropdownList Filtering by any column

[Dawo]

Hi team,

I have the following code:

 var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = ViewBag.Services, Query = "new ej.data.Query()", Width="650", AllowFiltering = true, HeaderTemplate = "<div class='row' style='background - color:transparent'><div class='col - sm' style='background - color:transparent'><span>Service ID</span></div> <div class='col - sm' style='background - color:transparent'><span>Service</span></div></div>", ItemTemplate = "<div class='row' style='background - color:transparent'><div class='col - sm' style='background - color:transparent'><span>${SERVICEID}</span></div> <div class='col - sm' style='background - color:transparent'><span>${DESCRIPTION}</span></div></div>", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "SERVICEID", Text = "SERVICEID" } };

 

and I would like to can filtering by any column (SERVICEID or DESCRIPTION), currently only can to do it by first column (SERVICEID).

Thanks,                        

[Ponmani Murugaiyan]

Hi Dawo, 

Greetings from Syncfusion support. 

If you want to search the item by more than one field. We can filter the value both in the field “Name” and “Designation” by using the conjunction OR in the predicate. But the selected value will the displayed in the input element based on the mapping with the Text field.  Please find the code snippet and test sample below for reference. 

 

[Index.cshtml] 

 

<div id="dropdown"> 

    @Html.EJS().DropDownList("employees").DataSource((IEnumerable<object>)ViewBag.data).Filtering("onfiltering").AllowFiltering(true).Placeholder("e.g. Andrew Fuller").PopupHeight("450px").Fields(new DropDownListFieldSettings { Value = "Name", Text = "Designation" }).ItemTemplate( 

             "<div><img class=\"empImage\" src=\"../Content/dropdownlist/images/Employees/${Eimg}.png\" alt=\"emp\"/><div class=\"ename\"> ${Name} </div><div class=\"job\"> ${Designation} </div></div>").HeaderTemplate( 

             "<div class=\"header\"> <span>Photo</span> <span class=\"info\">Employee Info</span></div>)").Render() 

</div> 

<script> 

    function onfiltering(e) { 

        var query = new ej.data.Query(); 

        var predicateQuery = query.where(new ej.data.Predicate('Name', 'contains', e.text, true).or('Designation', 'contains', e.text, true));  

        query = (e.text !== '') ? predicateQuery : query;  

        e.updateData(@Html.Raw(JsonConvert.SerializeObject(ViewBag.data)), query) 

    } 

</script> 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/predicate210094221  

 

Kindly check with the above sample. Please get back us, if you need further assistances. 

Regards, 

Ponmani M