queryCellInfo (or aggregateCellInfo) on aggregate section of grid

[Remy]

Dear Syncfusion Team,

I am using Syncfusion's grid component in my project along with its aggregates functionality. One of my requirements is to be able to style an aggregate column depending on its values. As far as I know, the queryCellInfo event doesn't apply on the aggregate section, but only on the grid itself. I believe that for the pivot grid component there is an aggregateCellInfo event. Is there an equivalent for the aggregates of the grid component? If not, how could I apply different styling to an aggregate column depending on its values?

For example, if I wanted to color in red an aggregate column for which the percentage is over 50% would look like this :

Please refer to the following StackBlitz project :

https://stackblitz.com/edit/angular-ivy-s1yhzx

Regards,

Remy

[Rajapandiyan Settu]

Hi Remy, 

Greetings from syncfusion support. 

Query : how could I apply different styling to an aggregate column depending on its values? 

 

Based on your query we could see that you need customize the aggregate column cells based on the aggregate value. You can achieve your requirement by using dataBound event of grid. In that event, we get all the summary cells and added custom class to it when its column having more than 50% value.  

We have modified few code in the sample you have provided. Please find the  below code example and sample for more information. 

App.component.ts 

 

  // Dynamically create footer rows 

-------------this.footerRows[4]['columns'].push({ type: 'Custom', field: `arrayOfWeeks.week${i}.displayedText`, footerTemplate: '${Custom}%', customAggregate: this.displayRatio.bind(this, i),   customAttributes: {class: 'percentcell'}    }); 

  dataBound(args) { 

    this.vacationsGrid.autoFitColumns(['fullName']); 

// get the summary cell containing percent value by using the class percentcell 

    var percentcell = document.querySelectorAll('.e-movablefootercontent .e-summaryrow .percentcell') 

    for (var i=0; i<percentcell.length; i++){ 

      if((percentcell[i] as any ).innerText != ''){ 

// get the percent value 

     var percentcellval = parseInt( percentcell[i].getAttribute("aria-label").split(' ')[0]) 

     if( percentcellval >= 49 ){ 

// get the all the summary row 

      var summaryrows = document.querySelectorAll('.e-movablefootercontent .e-summaryrow') 

      for (var j=0; j<summaryrows.length ; j++){ 

//get the column cell which having more than 50% and add a custom class to it 

        summaryrows[j].querySelectorAll('.e-summarycell')[i].classList.add('styleclass') 

      }  

     } 

      } 

    } 

  } 

 

App.component.scss

/**************************************************************/ 

/*                  FOOTER CONTENT STYLING                    */ 

/**************************************************************/ 

.VacationsGrid .footerCell, .VacationsGrid .percentcell, .VacationsGrid .footerFirstCellOfMonth { 

  padding: 0 !important; 

  border-width: 1px 0 0 1px; 

  font-size: 11px; 

  font-family: HelveticaNeue-Medium, sans-serif !important; 

} 

/**************************************************************/ 

/*                   FOOTER CELL STYLING IF PERCENT EXCEEDS 50                 */ 

/**************************************************************/ 

.VacationsGrid .styleclass { 

  background-color: orangered; 

  border-color: orangered; 

} 

Sample : https://stackblitz.com/edit/angular-ivy-t42fju?file=src/app/app.component.ts 

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

Regards, 

Rajapandiyan S 

[Remy]

Hi Rajapandiyan,

The proposed solution worked out great. Thank you for your support.

Regards,

Remy

[Rajapandiyan Settu]

Hi Remy, 

We are glad that the provided solution is resolved your requirement. 

Regards, 

Rajapandiyan S