Freezing Column header and Columns

[Vaibhav More]

I want to freeze the column headers row and the some initial important columns. 

I tried achieving fixed column headers with below code:

 this.element.find(".e-headercontent").removeClass("e-headercontent");

1.It worked fine but when we navigate horizontally to right headers stay stagnant and only rows data move. So, alignment is not proper.

2. I tried using FrozenColumns property but it causes UI distortion in grid. (thin/thick line appear for freezing).

3. Freezing property not retained in export excel option.

Please help me out with it, if any solution is possible.

[Madhu Sudhanan P]

Hi Vaibhav, 

Thanks for contacting Syncfusion support. 

Query #1: It worked fine but when we navigate horizontally to right headers stay stagnant and only rows data move. So, alignment is not proper 

 

This is not a proper way to achieve this requirement. Because we have handled the Grid header actions by using this class name. So when you remove that class name this will be caused some issues. 

 

Query #2: I tried using FrozenColumns property but it causes UI distortion in grid. (thin/thick line appear for freezing). 

 

We are unable to find any issues while using Grid frozenColumns feature. So please provide the details about what type of issues you have faced with frozenColumns feature. This will help us to provide the solution as early as possible. 

 

We have prepared the sample with frozenColumns feature for your reference and that can be download from the below link, 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/F1426891888718950.zip 

 

Query #3:  Freezing property not retained in export excel option. 

 

From this query, we found that you want to maintain the frozenColumns in exported excel file. We suggest to use freeze property of the EJ2-ExcelExport to achieve this requirement. you need to customize the worksheet to use this property before its getting exported. Please refer the following code snippet to achieve this requirement, 

 

function toolbarClick(args) { 

        if (args.item.id === 'Grid_excelexport') { 

            var grid = document.getElementById("Grid").ej2_instances[0]; 

            var appendExcelExportProperties = { 

                multipleExport: { type: 'NewSheet' } 

            }; 

            var firstGridExport = grid.excelExport(appendExcelExportProperties, true); 

            firstGridExport.then(function (workbook) { 

                workbook.worksheets[0].freeze = { column: grid.frozenColumns }; 

                var book = new ej.excelexport.Workbook(workbook, 'xlsx'); 

                book.save('Export.xlsx'); 

            }); 

        } 

    } 

 

We have also prepared the sample with this requirement and that can be download from the below link, 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2Grid1186281720.zip 

 

Regards, 

Madhu Sudhanan P 

[Vaibhav More]

Thanks for your reply.

Please can you tell me way to freeze at least headers so that while vertical scrolling headers will remain and rows will scroll.

[Madhu Sudhanan P]

Hi Vaibhav, 

 

Thanks for the update. 

 

While vertical scrolling, header row will be frozen at all the time. Could you please provide more details such as screenshot or image to understand your requirement. For you reference we have prepared the below GIF which shows header row freeze behavior during vertical scrolling. 

 

http://www.syncfusion.com/downloads/support/directtrac/142689/ze/freeze-header783050918 

 

Regards, 

Madhu Sudhanan P 

[Vaibhav More]

Thanks for reply.

There was misunderstanding about freezing header row. It works fine.

I will get back if  I need more help freezing columns and export.

[Madhu Sudhanan P]

Hi Vaibhav, 

Thanks for the update. 

Regards, 

Madhu