Custom aggregates auto update

[Eddie Willcox]

Hi,

Below is my grid code:

@Html.EJS().Grid("products").DataSource((IEnumerable<object>)ViewBag.products).EnableStickyHeader(true).Width("auto").Columns(col =>

   {

       col.Field("ProductCode").HeaderText("Code").HeaderText("Code").IsPrimaryKey(true).AutoFit(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();

       col.Field("Description").HeaderText("Item").Width("400px").HeaderText("Item").AllowEditing(false).Add();

       col.Field("Colour").HeaderText("Colour").AllowEditing(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();

       col.Field("Price").HeaderText("Price Ex VAT").Format("C2").Width("150px").AllowEditing(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();

       col.Field("Pack").HeaderText("Pack").AllowEditing(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();

       col.Field("Barcode").HeaderText("Barcode").AllowEditing(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();

       col.HeaderText("Image").Template("#template").AllowEditing(false).Width("90px").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();

       col.Field("QtyToOrder").HeaderText("Order").EditType("numericedit").ValidationRules(new { required = true }).Edit(new { @params= new Syncfusion.EJ2.Inputs.NumericTextBox() { ShowSpinButton = false, Min = 0, ValidateDecimalOnType=true,Decimals=0,Format="N" }}).Width("100px").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();

       col.Field("LineTotal").HeaderText("Total").AllowEditing(false).Format("C2").Width("150px").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();

   }).CellSave("calcTotal").Locale("en-ZA").GridLines(Syncfusion.EJ2.Grids.GridLine.Both).EnableAltRow(true).Load("load").Height("400px").EditSettings(edit => { edit.AllowEditing(true).AllowAdding(false).AllowDeleting(false).Mode(Syncfusion.EJ2.Grids.EditMode.Batch).ShowConfirmDialog(false); }).Toolbar(new List<string>() { "Search" }).ActionBegin("actionBegin").ActionComplete("actionComplete").Aggregates(agg =>

   { agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "LineTotal", Format = "C2", Type = "Sum", FooterTemplate = "Excl Total: ${Sum}" } }).Add();

       agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "LineTotal", Format = "C2", Type = "Custom", FooterTemplate = "VAT: ${Custom}", CustomAggregate = "vatFn" } }).Add();

       //agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "LineTotal", Format = "C2", Type = "Custom", FooterTemplate = "Total: ${Custom}", CustomAggregate = "totalFn" } }).Add();

   }).BeforeBatchSave("btchSave").DataBound("calcAggs").Render()

As you can see, I currently have an aggregate on the Line Total column that sums up the line totals. As the grid is in batch editing mode, this aggregate sums every time one of the rows are edited. Now I need to add to more aggregates that will need to do some math based on the first aggregate column.

The first one of the custom aggregates, needs to take the sum of the Line Total values and multiply it by 0.15

The second custom aggregate needs to take the sum of the line totals and add it to the second custom aggregate value and then be displayed.

The aggregate values must all be responsive as with the first sum aggregate.

Is this possible

[Farveen Sulthana Thameeztheen Basha]

Hi Eddie, 

We are working on this query with high priority and update you further details by on or before 31^st January 2022. 

Regards, 

Farveen sulthana T 

[Rajapandiyan Settu]

Hi Eddie, 

Thanks for contacting Syncfusion support. 

Query: The aggregate values must all be responsive as with the first sum aggregate. 

Based on your requirement, you want to calculate customAggregate on other columns based on the first column’s sum aggregate value. You can achieve this by using following code in the customAggregate function. 

@Html.EJS().Grid("products").DataSource((IEnumerable<object>)ViewBag.DataSource).EnableStickyHeader(true).Width("auto").Columns(col => 

 

{ 

    --- 

    col.Field("Freight").HeaderText("Total").AllowEditing(true).Format("C2").Width("150px").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add(); 

}).Aggregates(agg => 

 

{ 

    agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Format = "C2", Type = "Sum", FooterTemplate = "Excl Total: ${Sum}" } }).Add(); 

    agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Format = "C2", Type = "Custom", FooterTemplate = "VAT: ${Custom}", CustomAggregate = "vatFn" } }).Add(); 

    agg.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Format = "C2", Type = "Custom", FooterTemplate = "Total: ${Custom}", CustomAggregate = "totalFn" } }).Add(); 

 

}).BeforeBatchSave("btchSave").DataBound("calcAggs").Render() 

 

<script> 

 

    function vatFn(data, aggColumn) { 

        if (data.aggregates && data.aggregates['Freight - sum']) { 

          return data.aggregates['Freight - sum'] * 1.5; // get the Freight column aggregate sum 

        } else { 

          return null; 

        } 

    }; 

    function totalFn (data, aggColumn) { 

        if (data.aggregates && data.aggregates['Freight - sum']) { 

          return ( 

            data.aggregates['Freight - sum'] + data.aggregates['Freight - sum'] * 1.5 // get the Freight column aggregate sum 

          ); 

        } else { 

           return null; 

        } 

    }; 

 

</script> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/mvc_grid_customAggregate821766623.zip 

Please let us know if you have any concerns. 

Regards, 

Rajapandiyan S 

[Eddie Willcox]

Thank you. This works perfectly.

Now, is there a way to customize the aggregate CSS? The values become quite large and the display suffers a bit:

[Rajapandiyan Settu]

Hi Eddie, 

We are glad that you have achieved your requirement with the provided solution. 

Query: Now, is there a way to customize the aggregate CSS? The values become quite large and the display suffers a bit 

Before proceeding with this query, we need a confirmation from your end. Are you want to show the innerText of summary cell in single line instead of wrapping into next line? Please confirm this to proceed further. 

If this is not your requirement, kindly explain it in detail. 

Regards, 

Rajapandiyan S 

[Eddie Willcox]

That's exactly what I need. The innerText must be in single line and not wrap to next line.

[Rajapandiyan Settu]

Hi Eddie, 

Thanks for your update. 

If the innerText of summary cell exceeds the column width, then the text will automatically wrapped to the next line. If you want to show the innerText in single line, you need to increase the column's (LineTotal) width. 

    col.Field("LineTotal").HeaderText("Total").AllowEditing(false).Format("C2").Width("220px").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add(); 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S 

[Eddie Willcox]

I can't believe I missed that. It works perfectly. Thank you

[Rajapandiyan Settu]

Hi Eddie, 

We are glad that you have resolved the reported problem. 

Please get back to us if you need further assistance. 

Regards, 

Rajapandiyan S