grid aggregation

[Nemanja Cuckovic]

Hi, 

I am having trouble getting aggregation sum for time (HH:mm) format, for the field marked in red, it should show sum for the lines below that date dropdown, in this case (06:00 + 02:00). 
After that i would need to get, for the blue field, that red field sum minus (-) 08:00.

Thank you in advance for any help. 

here is my code:  

<div class="grid-wrap grid-wrap-spec-napl border-bottom">

    <ejs-grid id="PregledVDGrid"

              dataSource="@ViewBag.DataSource"

              dataBound="dataBound"

              allowPaging=true

              allowGrouping=true

              allowSelection=true

              allowFiltering=true

              allowExcelExport=true

              allowSorting=true

              enableHover=true

              allowTextWrap=true

              allowPdfExport="true"

              enableVirtualization=false

              height="100%"

              rowHeight=34

              toolbar="toolbarItems"

              toolbarClick="toolbarClick"

              actionComplete="actionComplete"

              beforeprint="beforeprint">

        <e-data-manager url="@Url.Action("IndexDatasource", new { IdKorisnik = Model.IdKorisnik, datumOd = Model.DatumOd, datumDo = Model.DatumDo})" adaptor="UrlAdaptor"></e-data-manager>

        <e-grid-pagesettings pageSize="50" pageSizes="@(new string[] { "50", "100", "500", "1000" })"></e-grid-pagesettings>

        <e-grid-aggregates>

            <e-grid-aggregate>

                <e-aggregate-columns>

                    <e-aggregate-column field="Opis" type="Sum" groupCaptionTemplate="UKUPNO:" ></e-aggregate-column>

                    <e-aggregate-column field="Trajanje" type="Sum" groupCaptionTemplate="${Sum}"></e-aggregate-column>

                    <e-aggregate-column field="Prekovermeni" type="Sum" groupCaptionTemplate="${Sum}"></e-aggregate-column>

                </e-aggregate-columns>

            </e-grid-aggregate>

        </e-grid-aggregates>

        <e-grid-filterSettings type="Menu" mode='OnEnter'></e-grid-filterSettings>

        <e-grid-groupsettings disablePageWiseAggregates="true" showDropArea="false" columns="@(new string[] {"ImePrezime", "Datum"})" >

        </e-grid-groupsettings>

        <e-grid-columns>

            <e-grid-column field="Datum"

                           headerText="Datum"

                           width=20

                           format="dd.MM.yyyy." />

            <e-grid-column field="ImePrezime"

                           headerText="Ime i prezime"

                           width=30 />

            <e-grid-column field="Klijent"

                           headerText="Klijent"

                           type="string"

                           width=40 />

            <e-grid-column field="Aplikacije"

                           headerText="Aplikacije"

                           type="string"

                           width=40 />

            <e-grid-column field="VrstePosla"

                           headerText="Vrste posla"

                           type="string"

                           width=40 />

            <e-grid-column field="Opis"

                           headerText="Opis"

                           type="string"

                           width=60 />

            <e-grid-column field="TrajanjeOd"

                           headerText="Od"

                           width=15

                           format="HH:mm"

                           textAlign="Center" />

            <e-grid-column field="TrajanjeDo"

                           headerText="Do"

                           width=15

                           format="HH:mm"

                           textAlign="Center" />

            <e-grid-column field="Trajanje"

                           headerText="Ukupno sati"

                           format="HH:mm"

                           width=15

                           textAlign="Center" />

            <e-grid-column field="Prekovremeni"

                           headerText="Prekovremeni"

                           format="HH:mm"

                           width=15

                           textAlign="Center" />

        </e-grid-columns>

    </ejs-grid>

</div>

[Rajapandi Ravi]

Hi Nemanja,

Greetings from Syncfusion support

We have checked your query and we could see that you are using Group caption template and expanding the parent you like to display the sum of the grouped records value. Before we start providing solution to your query, Please share the below details that will be helpful for us to provide better solution.

1)            Please share your exact requirement scenario with detailed description.

2)            In the blue field, what would you like to display. Please share your requirement scenario in pictorial representation.

Regards,

Rajapandi R

[Nemanja Cuckovic]

Hi Rajapandi,

Thank you for your answer.

I made some changes and transleted fields to english for better understanding.

What i would like to have is:

1. At the red marked field i would like to have sum of total work hours spent on each app written in time format (HH:mm), for certain date (at this case date is 15.06.2022) . In this case total hours spent working on KOD app which is 06:00 and total hours spent working on E-Recept app which is 02:00. So at the red marked field i woukld like to have written total sum of thath two which is 08:00.
2. At the blue marked field i would like to have written overtime hours if there is any. If sum of overtime hours is more then 08:00, for example 9:00, it should be written 01:00. if it's 08:00 or less then it should be 00:00.

Thank you in advance for your help.

here is changed code if necessary :

<div class="grid-wrap grid-wrap-spec-napl border-bottom">

    <ejs-grid id="PregledVDGrid"

              dataSource="@ViewBag.DataSource"

              dataBound="dataBound"

              allowPaging=true

              allowGrouping=true

              allowSelection=true

              allowFiltering=true

              allowExcelExport=true

              allowSorting=true

              enableHover=true

              allowTextWrap=true

              allowPdfExport="true"

              enableVirtualization=false

              height="100%"

              rowHeight=34

              toolbar="toolbarItems"

              toolbarClick="toolbarClick"

              actionComplete="actionComplete"

              beforeprint="beforeprint">

        <e-data-manager url="@Url.Action("IndexDatasource", new { IdKorisnik = Model.IdKorisnik, datumOd = Model.DatumOd, datumDo = Model.DatumDo})" adaptor="UrlAdaptor"></e-data-manager>

        <e-grid-pagesettings pageSize="50" pageSizes="@(new string[] { "50", "100", "500", "1000" })"></e-grid-pagesettings>

        <e-grid-aggregates>

            <e-grid-aggregate>

                <e-aggregate-columns>

                    <e-aggregate-column field="Opis" type="Sum" groupCaptionTemplate="Total:"></e-aggregate-column>

                    <e-aggregate-column field="Trajanje" type="Sum" groupCaptionTemplate="${Sum}"></e-aggregate-column>

                    <e-aggregate-column field="Prekovremeni" type="Sum" groupCaptionTemplate="${Sum}"></e-aggregate-column>

                </e-aggregate-columns>

            </e-grid-aggregate>

        </e-grid-aggregates>

        <e-grid-filterSettings type="Menu" mode='OnEnter'></e-grid-filterSettings>

        <e-grid-groupsettings disablePageWiseAggregates="true" showDropArea="false" columns="@(new string[] {"ImePrezime", "Datum"})">

        </e-grid-groupsettings>

        <e-grid-columns>

            <e-grid-column field="Datum"

                           headerText="Datum"

                           width=20

                           format="dd.MM.yyyy." />

            <e-grid-column field="ImePrezime"

                           headerText="Person"

                           width=30 />

            <e-grid-column field="Klijent"

                           headerText="Client"

                           type="string"

                           width=40 />

            <e-grid-column field="Aplikacije"

                           headerText="App"

                           type="string"

                           width=40 />

            <e-grid-column field="VrstePosla"

                           headerText="Job type"

                           type="string"

                           width=40 />

            <e-grid-column field="Opis"

                           headerText="Description"

                           type="string"

                           width=60 />

            <e-grid-column field="TrajanjeOd"

                           headerText="Start"

                           width=15

                           format="HH:mm"

                           textAlign="Center" />

            <e-grid-column field="TrajanjeDo"

                           headerText="Finish"

                           width=15

                           format="HH:mm"

                           textAlign="Center" />

            <e-grid-column field="Trajanje"

                           headerText="Total hours"

                           format="HH:mm"

                           width=15

                           textAlign="Center" />

            <e-grid-column field="Prekovremeni"

                           headerText="Overtime"

                           format="HH:mm"

                           width=15

                           textAlign="Center" />

        </e-grid-columns>

    </ejs-grid>

</div>

@*grouping in grid *@

<script id="captiontemplate" type="text/x-template">

    ${key}

</script>

[Rajapandi Ravi]

Hi Nemanja,

Thanks for your update

Currently, we are working on this query with your shared information, and we will update you the details on or before 1^st July 2022. Until then we appreciate your patience.

Regards,

Rajapandi R

[Rajapandi Ravi]

Hi Ismail,

Tanks for your update

Since you are using functional component in your application, based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

 

function Home() {

  const beforeRender = args => {

    const tooltip = document.getElementById('Tooltip').ej2_instances[0];

    // event triggered before render the tooltip on target element.

    tooltip.content = args.target.closest("td").innerText;

}

  return (

    <div>

      {' '}

      <p>Grid-1 using Functional Components</p>

      <TooltipComponent id="Tooltip" target='.e-rowcell' beforeRender={beforeRender}>

      <GridComponent id="Grid" dataSource={dataSources} allowPaging={true} editSettings={editSettings}>

      <ColumnsDirective>

                <ColumnDirective field='Name.0.id' headerText='ID' width='140' textAlign='Right' isPrimaryKey={true}></ColumnDirective>

                <ColumnDirective field='Name.0.name' headerText='Name'  width='150' ></ColumnDirective>

                <ColumnDirective field='Name.0.username' headerText='User Name' width='140'></ColumnDirective>

                <ColumnDirective field='Name.0.email' headerText='Mail' width='140'></ColumnDirective>

              </ColumnsDirective>

              <Inject services={[Edit]} />

      </GridComponent>

      </TooltipComponent>

    </div>

  );

}

 

Sample: https://stackblitz.com/edit/react-t64b7e-v98e2h?file=index.js

Regards,

Rajapandi R

[Nemanja Cuckovic]

Hi  Rajapandi,

I think your reply is posted at the wrong discussion. 

[Pavithra Subramaniyam]

Hi Nemanja,

Sorry for the inconvenience.

Please ignore our previous update and we will update further details shortly.

Regards,

Pavithra S

[Rajapandi Ravi]

Hi Nemanja,

Thanks for your patience

We have checked your query and we could see that you like to display the sum of the date. Based on your query we have prepared, and we suggest you use the groupCaption template feature of Grid. In this Group caption, you need to write the custom function and by using customAggregate you can perform the calculations here and return the result as you want. Please refer the below code example and sample for more information.

 

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

{

    .  .  .  .  .  .  .  .  .  .  .  .  .  .  .

    .  .  .  .  .  .  .  .  .  .  .  .  .  .  .

}).GroupSettings(group => group.ShowDropArea(false).Columns(new string[] { "CustomerID" })).Height("300px").Aggregates(agg =>

{

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

.  .  .  .  .  .  .  .  .  .  .  .  .  .  .

.  .  .  .  .  .  .  .  .  .  .  .  .  .  .

}).Render()

 

<script>

 

    function captionFn(data, column) {

         //here by using these arguments you can perform your calculation and return the result

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

            return data.aggregates['Freight - sum'];

        } else {

            return null;

        }

 

    }

</script>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/New_Compressed_(zipped)_Folder-1142707976.zip

Sample Demos: https://ej2.syncfusion.com/demos/#/material/grid/aggregate-group.html

Screenshot:

Regards,

Rajapandi R