We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. Angular - EJ 2
  4. rowDragAndDrop intermittent issue with column width not being calculated correctly at runtime

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

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.





7 Replies
PS Pavithra Subramaniyam Syncfusion Team December 31, 2019 09:02 AM UTC

Hi Remy, 

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

 
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. 


RE Remy December 31, 2019 08:39 PM UTC

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) : 


Thank you

PS Pavithra Subramaniyam Syncfusion Team January 2, 2020 06:57 AM UTC

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, 

 
Please get back to us if you have any further queries. 
 
Regards, 
Pavithra S. 


RE Remy January 2, 2020 07:02 AM UTC

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

DR Dhivya Rajendran Syncfusion Team January 3, 2020 09:49 AM UTC

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, 


Regards, 
R. Dhivya 


RE Remy January 5, 2020 08:02 AM UTC

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

BS Balaji Sekar Syncfusion Team January 6, 2020 01:59 PM UTC

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, 
 
 
Regards, 
Balaji Sekar. 


Loader.
Live Chat Icon For mobile
Up arrow icon