how to destroy autocomplete in menu filter dialog?
By default, menu filter dialog will render the AutoComplete control for getting filter value. This can be replaced by normal input text box if the user needs. Since menu filter rendered using the Dialog control, we will use the beforeOpen event of the Dialog control.
HTML
<div id="Grid"></div>
JS
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData,
allowFiltering: true,
allowPaging: true,
filterSettings: { filterType: "menu" },
create: "create",
columns: [
{ field: "OrderID", headerText: "Order ID" },
{ field: "CustomerID", headerText: "Customer ID" },
{ field: "EmployeeID", headerText: "Employee ID" },
{ field: "Freight", format: "{0:C}" },
{ field: "ShipCity", headerText: "Ship City" },
{ field: "ShipCountry", headerText: "Ship Country" }
]
});
});
</script>
Razor
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.AllowFiltering()
.FilterSettings(filter => { filter.FilterType(FilterType.Menu); })
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Add();
col.Field("CustomerID").HeaderText("Customer ID").Add();
col.Field("EmployeeID").HeaderText("Employee ID").Add();
col.Field("Freight").Format("{0:C}").Add();
col.Field("ShipCity").HeaderText("Ship City").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Add();
})
.ClientSideEvents(eve =>
{
eve.Create("create");
})
)
Controller
namespace MvcApplication66.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.datasource = order;
return View();
}
}
}
Aspx
<ej:Grid ID="Grid" ClientIDMode="Static" runat="server" AllowPaging="True" AllowFiltering="true">
<FilterSettings FilterType="Menu" />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" />
<ej:Column Field="CustomerID" HeaderText="CustomerID" />
<ej:Column Field="EmployeeID" HeaderText="EmployeeID"/>
<ej:Column Field="Freight" Format="{0:C1}" />
<ej:Column Field="ShipCity" HeaderText="Ship City" />
<ej:Column Field="ShipCountry" HeaderText="Ship Country"/>
</Columns>
<ClientSideEvents Create="create" />
</ej:Grid>
namespace Sample
{
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.Grid.DataSource = new MyDataDataContext().Orders.ToList();
this.Grid.DataBind();
}
}
}
<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
beforeOpen: function (e) {
var proxy = this;
setTimeout(function(){
var dp = proxy.element.find(".e-autocomplete");
//Gridstring is Grid ID + type of column (Grid + string)
var width = proxy.element.find("#Gridstring_ddinput_wrapper").width();
dp.ejAutocomplete("destroy");
$("#Grid_acString").addClass("e-inputtext").width(width + "px").height(24 + "px");
dp.addClass("e-js");
}, 0)
}
});
})
}
</script>
The following screenshot shows the Filter menu with input text box replacing the AutoComplete control.
Figure: Grid with Filter menu and input text box for getting values.
Conclusion
I hope you enjoyed learning about how to destroy autocomplete in menu filter dialog.
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!
