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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

150263 Dec 30,2019 05:29 AM UTC Jan 6,2020 01:59 PM UTC Angular - EJ 2 7
loading
Tags: Grid
Remy
Asked On December 30, 2019 05:36 AM UTC

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.





Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Remy
Replied On 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

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Remy
Replied On 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

Dhivya Rajendran [Syncfusion]
Replied On 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 


Remy
Replied On 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

Balaji Sekar [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon