How the autocomplete can be made to act as a dropdown in the filter menu?
In certain cases, you may like to have an ejDropDownList control in the filterMenu dialog for selecting the discrete values.
Solution
The following example explains in detail about changing the ejAutocomplete control rendered within the filter menu dialog to act like Dropdownlist control.
The showPopupButton API of the ejAutocomplete control is used to display the entire list from the dataSource. Thus, by enabling the showPopupButton property of the ejAutocomplete, the complete list of values are displayed from the dataSource corresponding to the column in the filter menu dialog.
- Render the Grid control.
JS
<div id="Grid"></div>
<script type="text/javascript">
$(function () {// Document is ready.
$("#Grid").ejGrid({
dataSource: window.gridData,
allowFiltering: true,
filterSettings: { filterType: "menu"},
allowPaging: true
columns: [
{ field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 100 },
{ field: "CustomerID", headerText: "Customer ID", width: 130 },
{ field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 100, format: "{0:C}" },
{ field: "ShipCountry", headerText: "ShipCountry", width: 100 }
],
create: "create"
});
});
</script>
MVC
[In View]
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowFiltering()
.FilterSettings(filter => filter.FilterType(FilterType.menu))
.AllowPaging()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(110).Add();
col.Field("Freight").HeaderText("Freight").Width(75).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width(110).Add();
})
.ClientSideEvents(eve => eve.Create("create"))
)
[In controller]
namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var DataSource = OrderRepository.GetAllRecords();
return View();
}
}
}
ASP.NET
[aspx]
<ej:Grid ID="Grid" runat="server" AllowFiltering="true" AllowPaging="true" >
<ClientSideEvents Create="create" />
<FilterSettings FilterType="Menu" />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" Width="100"/>
<ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="100"/>
<ej:Column Field="Freight" Format="{0:C2}" Width="100"/>
<ej:Column Field="ShipCountry" HeaderText="Ship Country" />
</Columns>
</ej:Grid>
- In the create event of the Grid, enable the showPopupButton property of the ejAutoComplete control. So that, the AutoComplete in the filter menu dialog acts as a Dropdownlist.
JS
<script type="text/javascript">
function create(args) {
this.element.on("mousedown", ".e-gridheader .e-filtericon", function () {
$("#Grid_stringDlg").ejDialog({
//open event of the filter menu dialog
open: function (e) {
//Disables the operator dropdownlist and equal as default operator such that only discrete values are filtered.
$("#Gridstring_ddinput").ejDropDownList("setSelectedText", "Equal");
$("#Gridstring_ddinput").ejDropDownList("model.enabled", false);
//Enables the 'showPopupButton' to act as dropdownlist
var dp = this.element.find(".e-autocomplete"), instance;
if (dp.length) {
instance = dp.data("ejAutocomplete");
if (!instance.option("model.showPopupButton"))
instance.option("model.showPopupButton", true);
}
}
});
});
}
</script>
Figure 1: DropDownList displayed in the filter menu dialog of the Grid
Conclusion
I hope you enjoyed learning about how the autocomplete can be made to act as a dropdown in the filter menu.
You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
