Using custom logics for grid cell customization
How to use custom logics for grid cell customization?
Customize Grid cells such as cell formatting, cell text, etc., with user’s custom logic
Solution
For cell level customization “queryCellIfo” event can be used. It have option to apply our own custom logics to cell formatting and text corrections. The “queryCellInfo” event will be triggered for every cell in grid with complete information about cell and arguments for transforming particular cell. Its event arguments are listed below
Name | type | Description |
Cell | object | Returns grid cell. |
Cancel | boolean | Returns the cancel option value. |
Data | object | Returns current row record object (JSON). |
Text | string | Returns the text value in the cell. |
Column | object | Returns the column object. |
foreignKeyData | Object | Returns the foreign key record object (JSON). |
Model | object | Returns the grid model. |
Type | string | Returns the name of the event. |
The below highlighted code is example for user can customize the cell through queryCellInfo event. In this example, we explain about how to change “Customer ID” column background color as “lightblue”, and the font color as a “green” using custom CSS. In “Employee ID” column the font color set as “red” using custom CSS if the value is greater than 3.
Please find the code snippet for initialize “queryCellInfo” event in Grid.
[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,
allowGrouping:true,
queryCellInfo:"queryCellInfo",
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 90 },
{ field: "CustomerID", headerText: 'Customer ID', width: 90 },
{ field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 90 },
{ field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, width: 90, format: "{0:C}" },
{ field: "ShipCity", headerText: 'Ship City', width: 90}
]
});
});
[MVC]
[razor]
@(Html.EJ().Grid<MvcApplication55.OrdersView>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging() /*Paging Enabled*/
.AllowGrouping()
.ClientSideEvents(evt => evt.QueryCellInfo("queryCellInfo"))
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(90).Add();
col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(90).Format("{0:C}").Add();
col.Field("ShipCity").HeaderText("Ship City").Width(90).Add();
}))
[controller]
public ActionResult GridFeatures()
{
var DataSource = new NorthwindDataContext().OrdersViews.ToList();
ViewBag.datasource = DataSource;
return View();
}
[ASP]
[Aspx]
<form id="form1" runat="server">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<div>
<ej:Grid ID="FlatGrid" runat="server" AllowPaging="True" AllowGrouping="true" >
<ClientSideEvents QueryCellInfo="queryCellInfo" />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="90" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="90" />
<ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="90" Format="{0:C}" />
<ej:Column Field="ShipCity" HeaderText="Ship City" Width="90" />
</Columns>
</ej:Grid>
</div>
</form>
[Aspx.cs]
public partial class _Default : Page
{
private List<Orders> order = new List<Orders>();
protected void Page_Load(object sender, EventArgs e)
{
BindDataSource();
}
private void BindDataSource()
{
int code = 10247;
for (int i = 1; i < 10; i++)
{
order.Add(new Orders(code + 1, "ALFKI", i + 0, 2.3 * i, new DateTime(1991, 05, 15), "Berlin"));
order.Add(new Orders(code + 2, "ANATR", i + 2, 3.3 * i, new DateTime(1990, 04, 04), "Madrid"));
order.Add(new Orders(code + 3, "ANTON", i + 1, 4.3 * i, new DateTime(1957, 11, 30), "Cholchester"));
order.Add(new Orders(code + 4, "BLONP", i + 3, 5.3 * i, new DateTime(1930, 10, 22), "Marseille"));
order.Add(new Orders(code + 5, "BOLID", i + 4, 6.3 * i, new DateTime(1953, 02, 18), "Tsawassen"));
code += 5;
}
this.FlatGrid.DataSource = order;
this.FlatGrid.DataBind();
}
[Serializable]
public class Orders
{
public Orders()
{
}
public Orders(long OrderId, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate, string ShipCity)
{
this.OrderID = OrderId;
this.CustomerID = CustomerId;
this.EmployeeID = EmployeeId;
this.Freight = Freight;
this.OrderDate = OrderDate;
this.ShipCity = ShipCity;
}
public long OrderID { get; set; }
public string CustomerID { get; set; }
public int EmployeeID { get; set; }
public double Freight { get; set; }
public DateTime OrderDate { get; set; }
public string ShipCity { get; set; }
}
}
Please find the JavaScript Code for queryCellInfo.
[JS]
<script type="text/javascript">
function queryCellInfo(args) {
/* write own custom script here */
var obj = $("#FlatGrid").ejGrid("instance");
/* apply own custom css with conditions check */
if (args.column.field == "CustomerID") {
args.cell.style.backgroundColor = "lightblue";
args.cell.style.color = "green";
}
if (args.model.groupSettings.groupedColumns.length == 0) {
if (args.column.field == "EmployeeID" && args.data.EmployeeID > 3) {
args.cell.style.color = "red"; /*custom css column based */
}
}
else {
/* apply own custom css with conditions check */
if (args.column.field == "EmployeeID" && args.data.EmployeeID > 3) {
args.cell.style.color = "red"; /*custom css group cell */
}
}
}
</script>
Screen Shot:
