Category / Section
How to place a calculated column in grid
1 min read
You can place calculated column in the grid by using queryCellInfo client side event of the grid. The following code example shows how to place the calculated column in the grid.
1. Render the Grid control.
JS
<div id="Grid"></div>
<script type="text/javascript">
$(function () {// Document is ready.
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
columns: [
{ field: "OrderID", headerText: "Order ID", width: 75 },
{ field: "CustomerID", headerText: "Customer ID", width: 90 },
{ field: "EmployeeID", headerText: "Employee ID", width: 75 },
{ field: "Freight", headerText: "Freight", width: 75, format: "{0:C}"},
{ field: "Total", headerText: "Total", width: 80 }
],
queryCellInfo: "calculate"
});
});
</script>
MVC
[In View]
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.data))
.AllowPaging()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID"). Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width(90).Add();
col.Field("Freight"). HeaderText("Freight").Width(75).Format("{0:C}").Add();
col.Field("Total").HeaderText(“Total").Width(80).Add();
})
.ClientSideEvents(eve => { eve.QueryCellInfo("calculate"); })
)
[Controller]
namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var DataSource = OrderRepository.GetAllRecords();
ViewBag.data = DataSource;
return View();
}
}
}
ASP.NET
[aspx]
<ej:Grid ID="Grid" runat="server" AllowPaging="True">
<ClientSideEvents QueryCellInfo="calculate"/>
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID Width=”90” />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width=”90” />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width=”75” />
<ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" Width=”75” />
<ej:Column Field="Total" HeaderText="Total" Width=”80” />
</Columns>
</ej:Grid>
[CS]
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.Grid.DataSource = new NorthwindDataContext().Orders;
this.Grid.DataBind();
}
}
2. The queryCellInfo event will be triggered each time when a request is made to access particular cell information, element and data. Using this event, you are able to get the column “headerText” in arguments. Using the condition and text jQuery property we updated the value in another column(“Total”)
<script type="text/javascript">
function calculate(args) {
if (args.column.headerText == "Total") {
$(args.cell).text(args.data.OrderID + args.data.EmployeeID);
}
}
</script>
The following output is displayed as a result of the above code example.
Figure: calculated column using “queryCellInfo event”.
