Grouping

9 Mar 20171 minute to read

Grouping technique is also supported in DataManager. When you want to analyze any particular record based on its category simply you can group that column and analyze the records based on category. The following code example illustrates the grouping behavior in table.

CSHTML

/*ej-Tag Helper code to render DataManager*/
    <ej-grid query="new ej.Query().page(1,5).group('CustomerID')" id="FlatGrid" dataamanager-id="myData">
        <e-datamanager  url="http://mvc.syncfusion.com/Services/Northwnd.svc/Orders"></e-datamanager>
        <e-columns>
            <e-column field="OrderID" header-text="Order ID" text-align="Right" width="70"></e-column>
            <e-column field="CustomerID" header-text="Customer ID" width="80"></e-column>
            <e-column field="EmployeeID" header-text="Employee ID" text-align="Left" width="75"></e-column>
        </e-columns>
    </ej-grid>

RAZOR

/*Razor code to render DataManager*/
    @{Html.EJ().DataManager("FlatData").URL("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders").Render();}
    @{Html.EJ().Grid<object>("myGrid")
            .DataManagerID("FlatData")
            .Query("new ej.Query().page(1,5).group('CustomerID')")
            .Columns(col =>
            {
                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
                col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
                col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
            }).Render();
    }

Result of the above code example is illustrated as follows.