Reactive Aggregate

21 Dec 20225 minutes to read

Auto update aggregate value in batch editing

When using batch editing, the aggregate values will be refreshed on every cell save. The footer, group footer, and group caption aggregate values will be refreshed.

NOTE

Adding a new record to the grouped grid will not refresh the aggregate values.

CSHTML

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" allowGrouping="true" height="273" toolbar="@(new List<string>() { "Add","Delete","Update","Cancel" })">
    <e-grid-groupsettings showDropArea="false" columns="@(new string[] { "ShipCountry" })"></e-grid-groupsettings>
    <e-grid-editSettings allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings>
    <e-grid-aggregates>
        <e-grid-aggregate>
            <e-aggregate-columns>
                <e-aggregate-column field="Freight" type="Sum" footerTemplate="Sum: ${Sum}" format="C2"></e-aggregate-column>
                <e-aggregate-column field="Freight" type="Sum" groupFooterTemplate="Sum: ${Sum}" format="C2"></e-aggregate-column>
                <e-aggregate-column field="Freight" type="Average" groupCaptionTemplate="Average: ${Average}" format="C2"></e-aggregate-column>
            </e-aggregate-columns>
        </e-grid-aggregate>
    </e-grid-aggregates>
    <e-grid-columns>
        <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="160"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" textAlign="Right" width="130"></e-grid-column>
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

Reactive-agg-batch-edit.cs

public IActionResult Index()
{
    var Order = Product.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Refresh aggregate values in inline editing

By default, reactive aggregate update is not supported by inline and dialog edit modes as it is not feasible to anticipate the value change event for every editor. But, you can refresh the aggregates manually in the inline edit mode using the refresh method of aggregate module.

In the following code, the input event for the Freight column editor has been registered and the aggregate value has been refreshed manually.

CSHTML

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" allowGrouping="true" height="273" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })" actionBegin="actionBegin" load="load">
    <e-grid-editSettings allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
    <e-grid-aggregates>
        <e-grid-aggregate>
            <e-aggregate-columns>
                <e-aggregate-column field="Freight" type="Sum" footerTemplate="Sum: ${Sum}" format="C2"></e-aggregate-column>
            </e-aggregate-columns>
        </e-grid-aggregate>
    </e-grid-aggregates>
    <e-grid-columns>
        <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="160"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" textAlign="Right" width="130"></e-grid-column>
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    let selectedRecord = {};

    function load(args) {
        this.columns[1].edit = { params: { change: changeFn } };
    }

    function actionBegin(args) {
        if ((args.requestType === 'beginEdit')) {
            selectedRecord = {};
            selectedRecord = args.rowData;
        }
    }

    function changeFn(args) {
        let gridObj = document.getElementById("Grid").ej2_instances[0];
        selectedRecord['Freight'] = args.value;
        gridObj.aggregateModule.refresh(selectedRecord);
    }
</script>

Reactive-agg-inline-edit.cs

public IActionResult Index()
{
    var Order = Product.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}