ERROR: In filter menu, Number, Date and Boolean columns have incorrect operators
Problem
In filter menu, Number, Date and Boolean columns contain incorrect operators.
Solution
The Grid can get the column’s data type from the first record of data source by default. When you bind the empty data source, Grid cannot find the actual data type of a column. In this case, you have to set the data type of the column explicitly. The available column data type is tabulated as follows.
Type | Description |
string | Returns the text value in the column cells. |
number | Returns the numeric value in the column cells. |
date | Returns the date format of the column cells and the date picker renders automatically on edit and time without specifying the editType Property. |
datetime | Returns the datetime format of the column cells and the date time picker renders automatically on edit time without specifying the editType Property. |
boolean | Returns the true or false value. |
Refer to the following code example to enable Type property in Grid.
columns: [ { field: "Number", type: "string", width: 90 } ] |
The highlighted code in the following code example illustrates the customization of Column types. The code example explains about how to render the filter menu even when the database contain NULL values in certain records, and to render the date picker on edit mode without specifying the editType of the column.
JS
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
allowPaging: true,
allowFiltering: true,
filterSettings: { filterType: "menu" },
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", width: 85 },
{ field: "CustomerID", headerText: 'Customer ID', type: "string", width: 90 },
{ field: "OrderDate", headerText: 'Order Date', type: "date", width: 100 },
{ field: "EmployeeID", headerText: 'Employee ID', type: "number", width: 80 },
{ field: "Freight", headerText: 'Freight', width: 80 },
{ field: "ShipCity", headerText: 'Ship City', width: 100 },
{ field: "Verified", headerText: 'Verified', type: "boolean", width: 90 }
]
});
});
</script>
MVC
@(Html.EJ().Grid<MvcSample55.OrdersView>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
.AllowFiltering()
.FilterSettings(filter => { filter.FilterType(FilterType.Menu); })
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
})
.AllowPaging()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(85).Add();
col.Field("CustomerID").HeaderText("Customer ID").Type("string").Width(90).Add();
col.Field("OrderDate").HeaderText("Order Date").Type("date").Width(100).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Type("number").Width(80).Add();
col.Field("Freight").HeaderText("Freight").Width(80).Add();
col.Field("ShipCity").HeaderText("Ship City").Width(100).Add();
col.Field("Verified").HeaderText("Verified").Type("boolean").Width(90).Add();
})
)
Controller
public ActionResult GridFeatures()
{
var DataSource = new NorthwindDataContext().OrdersViews.ToList();
ViewBag.datasource = DataSource;
return View();
}
ASPX
<div>
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True">
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="75">
<ValidationRule>
<ej:KeyValue Key="required" Value="true" />
<ej:KeyValue Key="number" Value="true" />
</ValidationRule>
</ej:Column>
<ej:Column Field="CustomerID" HeaderText="Customer ID" Type="string" Width="80">
<ValidationRule>
<ej:KeyValue Key="required" Value="true" />
<ej:KeyValue Key="minlength" Value="3" />
</ValidationRule>
</ej:Column>
<ej:Column Field="OrderDate" HeaderText="Order Date" Type="date" Width="90" TextAlign="Right" Format="{0:MM/dd/yyyy HH:mm:ss}"
EditType="DateTimePicker" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" Type="number" TextAlign="Right" Width="70" EditType="Dropdown" />
<ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="80" Format="{0:C}" EditType="Numeric">
<NumericEditOptions DecimalPlaces="2"></NumericEditOptions>
</ej:Column>
<ej:Column Field="ShipCity" HeaderText="Ship City" Width="100" EditType="Dropdown" />
<ej:Column Field="Verified" HeaderText="Verified" Type="boolean" Width="80" EditType="Boolean"></ej:Column>
</Columns>
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Batch"></EditSettings>
<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
</ej:Grid>
</div>
ASPX.CS
public partial class Editing : System.Web.UI.Page
{
List<Orders> order = new List<Orders>();
protected void Page_Load(object sender, EventArgs e)
{
BindDataSource();
}
private void BindDataSource()
{
int orderId = 10248;
int empId = 0;
for (int i = 1; i < 9; i++)
{
order.Add(new Orders(orderId + 1, "ALFKI", empId + 1, 32.38, "Alfreds Futterkiste ", "Germany"));
order.Add(new Orders(orderId + 2, "ANATR", empId + 2, 11.61, "Ana Trujillo Emparedados y helados", "Mexico"));
order.Add(new Orders(orderId + 3, "ANTON", empId + 3, 45.34, "Antonio Moreno Taquería", "Mexico"));
order.Add(new Orders(orderId + 4, "AROUT", empId + 4, 37.28, "Around the Horn", "UK"));
order.Add(new Orders(orderId + 5, "BERGS", empId + 5, 67.00, "Berglunds snabbköp", "Sweden"));
order.Add(new Orders(orderId + 6, "BLONP", empId + 6, 23.32, "Blondel père et fils", "France"));
orderId += 6;
empId += 6;
}
this.OrdersGrid.DataSource = order;
this.OrdersGrid.DataBind();
}
[Serializable]
public class Orders
{
public Orders()
{
}
public Orders(int orderId, string customerId, int empId, double freight, string shipName, string shipCountry)
{
this.OrderID = orderId;
this.CustomerID = customerId;
this.EmployeeID = empId;
this.Freight = freight;
this.ShipName = shipName;
this.ShipCountry = shipCountry;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public int EmployeeID { get; set; }
public double Freight { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
}
}
The following screenshot illustrates the output.
Customized Grid
