rowDragAndDrop intermittent issue with column width not being calculated correctly at runtime

[Remy]

Hello Syncfusion support,

I am having an issue with the [allowRowDragAndDrop] of the "Grid" control. It seems as though when enabled, it sometimes wrongly renders the dedicated drag&drop column width. Upon re-ordering or sometimes refreshing the page, the issue gets fixed. Also having the [allowRowDragAndDrop] disabled seems to fix the problem, but that isn't a solution for me as I need this functionality. Do you have an idea why this happens and how it can be fixed? I think this video will help you understand precisely what the issue is. Any help at this point would be appreciated. Thank you.

Video file

[Pavithra Subramaniyam]

Hi Remy, 

We checked your reported issue but unfortunately  were unable to reproduce it from our end. Please check below sample for your reference, 

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

 

We suspect you might be facing issue due to sample-level custom styles set in the application which is affecting the grid layout. So can you once ensure from your end if this is the cause of the issue.  

If issue is still not resolved please share us the following information, 

• Grid related code file.
• Have you used any custom styles for the grid or that might affect it.
• Syncfusion package version used.
• If possible share us a simple sample application to replicate the issue or try reproducing it in the above provided sample so that we can check and provide proper solution.

Let us know if you have any concerns. 

Regards, 

Pavithra S. 

[Remy]

Hello Pavithra,

Thank you for the quick reply. Indeed I believe it is an issue in the code. I tinkered with the code to remove all styling and I realize this is caused by the "rowSpan: 2" custom attribute in the HTML code for the last 2 columns. Removing this attribute does the trick but doesn't give the desired result in terms of cell display (the top and middle cell rows are not merged as desired - like in the video attached in my previous response). How can I achieve the desired result? I updated the code below for you to have a look (you must open it in full screen to see the problematic columns - https://angular-rqpc4p-ni8ygo.stackblitz.io) : 

https://stackblitz.com/edit/angular-rqpc4p-ni8ygo

Thank you

[Pavithra Subramaniyam]

Hi Remy, 

You need not set row span for the header columns. Instead of that you can achieve your requirement by overriding the border-bottom styles for the required header columns using the headerCellInfo event. This is demonstrated in below code snippet, 

// Grid’s headerCellInfo event function 

    headerCellInfo(args) { 

    if (args.cell.column.headerText === "LOAD COMPRESSOR" || args.cell.column.headerText === "POWER TURBINE") { 

      // Add a custom class to the required header column’s element 

      args.node.classList.add('custom-style'); 

    } 

  } 

 

<style> 

    // Override the border style for the custom class 

    .custom-style { 

        border-bottom: 0 !important; 

    } 

</style> 

We have modified the provided sample based on this which you can find below, 

Sample: https://stackblitz.com/edit/angular-rqpc4p-7ulpdj?file=app.component.ts 

 

Please get back to us if you have any further queries. 

 

Regards, 

Pavithra S. 

[Remy]

Hi Pavithra,

Thanks again for the great support. With this approach, would there be a way to vertically aligning the content in the middle since these remain 2 separate cells?

Regards,

Remy

[Dhivya Rajendran]

Hi Remy, 

Thanks for your update. 

You can set padding-top style to add custom class for achieving your requirement. 

<style> 

    .custom-style { 

        border-bottom: 0 !important; 

        padding-top: 5vh !important; 

    } 

</style> 

Please refer the Modified sample for more information, 

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

Regards, 

R. Dhivya 

[Remy]

Thanks for the update. Is there not a more robust alternative? The bottom border, which should be the vertical center, will always stay below the title. This doesn't really center the content, it approximately centers it and that won't scale well on different screen sizes... 

Thank again,

Remy

[Balaji Sekar]

Hi Remy, 

 

You would need to adjust the padding for the text based on the screen size if you wish to align it since there are two cells there. 

 

Alternatively you could also achieve this requirement by merging the two cells using column’s customAttributes property and then setting the row span to the header cell. But even then the padding must be set to align the text in the vertical center position since the two cells are merged. This is demonstrated in below code snippet, 

 

// Stacked header columns 

this.LoadCompressorColumn = [ 

        { 

            // Set custom css class to the empty header cell 

            customAttributes: { class: "merge-cell" }, 

            columns: [ 

                { 

                    field: "COLUMN8_TEXT", 

                    headerText: "ASS", 

                    width: "60", 

                    textAlign: "Center", 

                    maxWidth: 60 

                }, 

                { 

                    field: "COLUMN9_TEXT", 

                    headerText: "BAL", 

                    width: "60", 

                    textAlign: "Center", 

                    maxWidth: 60 

                } 

            ] 

        } 

]; 

 

this.PowerTurbineColumn = [ 

        { 

            // Set custom css class to the empty header cell 

            customAttributes: { class: "merge-cell" }, 

            columns: [ 

                { 

                    field: "COLUMN10_TEXT", 

                    headerText: "ASS", 

                    width: "60", 

                    textAlign: "Center", 

                    maxWidth: 60 

                }, 

                { 

                    field: "COLUMN11_TEXT", 

                    headerText: "RIV", 

                    width: "60", 

                    textAlign: "Center", 

                    maxWidth: 60 

                }, 

                { 

                    field: "COLUMN12_TEXT", 

                    headerText: "BAL", 

                    width: "60", 

                    textAlign: "Center", 

                    maxWidth: 60 

                } 

            ] 

        } 

    ]; 

 

// Grid’s headerCellInfo event function 

headerCellInfo(args) { 

        if (args.cell.column.headerText === "LOAD COMPRESSOR" || args.cell.column.headerText === "POWER TURBINE") { 

            // Add custom css class for aligning the header text 

            args.node.classList.add('custom-style'); 

            // Merge cells to one 

            args.node.setAttribute("aria-rowspan", "2"); 

            args.node.setAttribute("rowspan", "2"); 

        } 

    } 

 

<style> 

    // Merge header cells 

    .merge-cell { 

        display: none 

    } 

 

    // Align header text 

    .custom-style { 

        padding-bottom: 30px !important; 

    } 

</style> 

 

We have modified the previously provided sample based on this which you can find below, 

 

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

 

Regards, 

Balaji Sekar.