e-stacked-columns

[Mohammad Abbasi]

Hello , i want to to have e-stacked-columns with three plain.

"

1<e-column headerText=' Header1 ' >

         2<e-stacked-columns>

                 3<e-stacked-column  headerText='Header2' width='100' textalign='center'>

                        4<e-stacked-columns>

                         5<e-stacked-column headerText=' Header3 ' width='100' textalign='center'></e-stacked-column>

                        4</e-stacked-columns>

                   3</e-stacked-column>

         2 </e-stacked-columns>

 1</e-column>

"

It dident worked !

I would be very grateful for an answer:-)

regards

Mohammad Abbasi

[Pavithra Subramaniyam]

Hi Mohammad Abbasi,

Thanks for contacting Syncfusion support.

From your update, we understood that you want to add three-level stacked columns in the EJ2 Grid. You can achieve your requirement by using the “column.columns” property. Please refer to the below code example and the sample link for more information.

 <e-column headerText="Order Details" [columns]="Header1"></e-column>

 

 

this.orderColumns = [

  {

    headerText: 'Header2',

    columns: [

      {

        headerText: 'Header3',

        columns: [

          {

            field: 'OrderDate', headerText: 'Order Date', format: 'yMd',

          }          

        ],

      },

    ],

  },

];

 

Sample: https://stackblitz.com/edit/angular-p4jpun-kwibjd?file=app.component.html

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

Regards,

Pavithra S

[Karthik Nani]

Hello,

How can we include header templates and column templates for the underlying columns of stacked header

[Vikram Sundararajan]

Hi Karthik,

Greetings from Syncfusion support,

We understand that you are looking to include header templates and column templates for the columns of a stacked header in the Syncfusion Angular Grid. To customize the header element of a Grid stacked header column, you can use the headerTemplate property. Below is a code snippet for your reference:

 app.component.html

 

  <e-column headerText="Order Details" [columns]="orderColumns">

       

        <ng-template #headerTemplate let-data>

          <div>

            <ejs-dropdownlist index="0"

            [dataSource]="dropdownData">

            </ejs-dropdownlist>

          </div>

        </ng-template>

      </e-column>

 

 

 

For rendering a column template within a stacked header column, you can use the template property. Here's an example code snippet:

 app.component.ts

 

  this.orderColumns = [

      {

        headerText: 'Header2',

        columns: [

          {

            headerText: 'Header3',

            columns: [

              {

                field: 'OrderDate',

                headerText: 'Order Date',

                format: 'yMd',

                width: 130,

                textAlign: 'Right',

                minWidth: 10,

              },

              {

                field: 'ShipCountry',

                headerText: 'Ship Country',

                width: 150,

                minWidth: 10,

                template:'<div><button class="empData">Ship Country</button></div>'

              },

            ],

          },

        ],

      },

 

Sample: https://stackblitz.com/edit/angular-p4jpun-9a7bpz?file=app.component.ts

Please let us know if you need any further assistance.

Regards,

Vikram S