Category / Section
How to Group a Column based on Format?
1 min read
By default, a column will be grouped by the data or value present for the particular row. To group numeric or datetime column based on the mentioned format, you have to enable the enableGroupByFormat property of the corresponding Grid columns.
HTML
<div id="Grid"></div>
JS
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
columns: [
{ field: "OrderID" },
{ field: "CustomerID" },
{ field: "EmployeeID" },
{ field: "Freight", format: "{0:C1}", enableGroupByFormat: true },
{ field: "OrderDate", format: "{0:MM/dd/yyyy}", enableGroupByFormat: true }
]
});
});
</script>
Razor
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.AllowGrouping()
.Columns(col =>
{
col.Field("OrderID").Add();
col.Field("CustomerID").Add();
col.Field("EmployeeID").Add();
col.Field("Freight").Format("{0:C1}").EnableGroupByFormat().Add();
col.Field("OrderDate").Format("{0:MM/dd/yyyy}").EnableGroupByFormat().Add();
})
)
Controller
namespace MvcApplication66.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.datasource = order;
return View();
}
}
}
Aspx
<ej:Grid ID="Grid" runat="server" AllowPaging="True" AllowGrouping="true">
<Columns>
<ej:Column Field="OrderID" />
<ej:Column Field="CustomerID" />
<ej:Column Field="EmployeeID" />
<ej:Column Field="Freight" Format="{0:C1}" EnableGroupByFormat="true" />
<ej:Column Field="OrderDate" Format="{0:MM/dd/yyyy}" EnableGroupByFormat="true" />
</Columns>
</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();
}
}
}
The following screenshot shows the Columns Grouped on the basis of the Column format.
Figure 1: Grid with Freight Column Grouped based on the format though actual values differs
Figure 2: Grid with OrderDate Column Grouped based on the format though actual values differs
