FrozenColumn Row Height

[TaeWook Kang]

Fixed row height on grid.

Do not modify the row height of the displayed grid.

When you modify the contents of a cell, the height of the rows in the columns that are fixed and those that are not fixed is different.

I hope the row height of the grid remains the same when modifying cells.

Please solve the problem.

[Vinitha Balasubramanian]

Hi TaeWook,

Greetings from Syncfusion support.

Query : Frozen Column Row Height

Based on your query, we understand that you are experiencing an issue with the frozen columns feature and row height property while performing an edit action. We would like to inform you that this is the expected behavior. When you perform an edit action, the form is rendered based on the default row height, which may cause a variation in the row height. However, once the data is updated, it will revert to the defined row height.

Regards,

Vinitha Balasubramanian

[TaeWook Kang]

Will that solve this problem later?

Is there a way to increase the height of the fixed column when modifying the cell?

[Vinitha Balasubramanian]

TaeWook,

Before proceeding with your query, could you please provide us with the following details:

1. Could you please provide us with a detailed explanation of the issue you are facing?
2. It would be helpful if you could provide us with a video demo to demonstrate the issue you are experiencing. This will help us to better understand the problem and provide you with an appropriate solution.

[TaeWook Kang]

There is a grid fixed with the 'frozen column'.

The grid also has a row height of 20 fixed.

When modifying a cell, the selected cell appears to be greatly expanded.

I hope that the row height of the fixed column also looks extended when the cell is in modified mode.

Attachment: frozencolumn_cell_edit_514d58bc.zip

[Santhosh Iruthayaraj]

Hi TaeWook,

Query: FrozenColumn Row Height.

We have thoroughly reviewed your requirement and achieved your requirement by using rowSelected event and conditionally changing the height of the row which is in edit state. We have prepared a code snippet that will help you achieve your requirement. You can find the code snippet and the sample link below.

[index.js]

 

function rowSelected(args) {

    if ((args.previousRowIndex == undefined || args.rowIndex == args.previousRowIndex) && grid.isEdit) {

        for (let i=0; i<grid.getSelectedRows().length;i++) {

            grid.getSelectedRows()[i].style.height = 34 + 'px';

        }

    } else {

        for (let i=0; i<grid.element.querySelectorAll('.e-row').length;i++) {

            grid.element.querySelectorAll('.e-row')[i].style.height = 20 + 'px';

        }

    }

}

Sample: https://stackblitz.com/edit/ulntyz-innrcm?file=index.js

Please let us know if you have any further queries. We are always here to help.

Regards,

Santhosh I