Category / Section
How the autocomplete can be made to act as a dropdown in the filter menu?
1 min read
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
