Problems encountered when using frozen columns

[Renard]

Hi all

When using frozen columns, the following issues are encountered:,

Normal columns, I have set the freeze attribute, which can be achieved. But when my column has multiple headers. Freezing column attributes renders them invalid.

Thank you

[Rajapandi Ravi]

Hi Renard,

Greetings from Syncfusion support

To use frozen columns in a Syncfusion EJ2 Grid with a stacked header column, set the freeze property to Left within the column definition in the orderColumns array. Ensure that each nested column includes the Freeze property to enable the freezing behavior to the respective columns. Refer to the code example and sample below for more details.

App.component.ts

 

public ngOnInit(): void {

        this.orderColumns = [

            { 

                field: 'CustomerID',

                headerText: 'Customer Name',

                width: 160,

                minWidth:30,

                freeze: 'Left'

            },

            {

                field: 'OrderDate',

                headerText: 'Order Date',

                textAlign: 'Right',

                width: 140,

                format: 'yMd',

                minWidth: 50,

                editType: 'datepickeredit',

                freeze: 'Left'

            },

        ];

    }

 

App.component.html

 

 <ejs-grid [dataSource]="data" [allowPaging]='true' [allowResizing]="true" [toolbar]='toolbar'>

        <e-columns>

            <e-column field='OrderID' headerText='Order ID' width='130' textAlign="Center" freeze='Left' minWidth=10 isPrimaryKey='true' [validationRules]='orderidrules'></e-column>

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

            <e-column headerText='Ship Details' [columns]='shipColumns'></e-column>

        </e-columns>

    </ejs-grid>

 

 

Sample: https://stackblitz.com/edit/angular-zpjzqfq5-sbm4jqhk?file=src%2Fapp.component.ts,src%2Fapp.component.html

Screenshot:

Regards,

Rajapandi R