Some problems with the stacked columns of grid

[lorryl]

Hi,

I am using the Stacked Column, I have some problems, can you help me?

1. I set the "1 Month" align center, not working

2. I have multi status, how to set the multi status's template ? My code seems is incorrect. I cannot get current column.field in the template.

3. How to set the red color and brackets style for negative number

My web demo:

My code:

What I want is that:

[Praveenkumar Gajendiran]

Hi Lorryl, 

Greetings from Syncfusion support.




Query1: “1. I set the "1 Month" align center, not working” 

We have validated your query and provided screenshot. We suggest you to achieve your requirement by using textAlign property of Grid in the stacked-header column. Please find the code example. 

 

for(var i =1;i<=2;i++){ 

          let columnsdetail:ColumnModel[] =[ 

              { field: 'OrderDate', headerText: 'Order Date', textAlign: 'Right', width: 125, minWidth: 10, format: 'yMd' }, 

              { field: 'Freight', headerText: 'Freight($)', textAlign: 'Right', width: 100, format: 'C2', minWidth: 10 }, 

              { field: 'ShipCity', headerText: 'Ship City', width: 100, minWidth: 10,  }, 

              { field: 'ShipCountry', headerText: 'Ship Country', width: 120, minWidth: 10 }, 

              {headerText: 'Ship Region',template:this.template, width: 120, minWidth: 10 } 

          ]; 

 

          this.columns.push({ 

                headerText: 'Ship Details', columns:columnsdetail, textAlign:'Center'}); 

        } 

 

Query2: “2. I have multi status, how to set the multi status's template ? My code seems is incorrect. I cannot get current column.field in the template.”


We suspect that you have an issue to get column field value in the template. We suggest you to follow the below way to achieve your requirement. 

<div class="control-section"> 

    <ejs-grid [dataSource]="data" [allowPaging]='true' [allowResizing]="true" [columns]="columns" (queryCellInfo)="customiseCell($event)"> 

        

    </ejs-grid> 

 

  <ng-template #template let-data> 

     <div *ngIf="data.ShipRegion==1">Up</div>   //you can get your field value like this 

     <div *ngIf="data.ShipRegion==0">Down</div>  
    <div *ngIf="data.ShipRegion==2">Left</div>                                                              

  </ng-template> 

 

Query3: “3. How to set the red color and brackets style for negative number”




You can customize the appearance of cell by using queryCellInfo event of Grid.


The queryCellInfo event triggers for every cell rendering and returns the current cell and column information . Please refer the below code example and documentation for your reference. 

[app.component.ts]  

 

customiseCell(args: QueryCellInfoEventArgs) { 

        if (args.column.field === 'Freight') { 

            if (args.data[args.column.field] < 0) { 

             args.cell.classList.add('below-0');      //here we have add the custom class for cells which are negative values 

             args.cell.innerText = "("+args.cell.innerText +")" // here we have add brackets for cells which are negative values 

                  

            }  

        } 

    } 

---------------------------------------------------------------------------------------------------------------------
[app.component.html]

<ejs-grid [dataSource]="data" [allowPaging]='true' [allowResizing]="true" [columns]="columns" (queryCellInfo)="customiseCell($event)"> 

        

    </ejs-grid> 

-----------------------------------------------------------------------------------------------------------------------
[app.component.css] 

.e-rowcell.below-0 {  

  color: red;    

} 

Documentation Link: https://ej2.syncfusion.com/angular/documentation/grid/cell/#customize-cell-styles


Here we have prepared a sample based on your requirement for your reference,

Sample: https://stackblitz.com/edit/angular-swfdte-p1g4im?file=app.component.ts 

Please get back to us if you need further assistance. 

 

Regards, 

Praveenkumar G