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

How to set full width for Drag row

Hi Syncfusion Support Team,
I'm using DragDrop feature in GridComponent.
By default, the width of Drag row is not equal with the grid's width.

My requirement is: set  the width of Drag row is equal with the grid's width.


How can I config to reach the requirement?

Thanks.


4 Replies 1 reply marked as answer

SI Santhosh Iruthayaraj Syncfusion Team March 7, 2023 04:07 PM UTC

Hi Ton,


We are currently investigating the reported scenario of "How to set full width for Drag row". Rest assured that we are doing our best to resolve this as soon as possible. We will provide you with a detailed update on or before March 9th, 2023. In the meantime, we appreciate your patience and understanding.


Regards,

Santhosh Iruthayaraj



SI Santhosh Iruthayaraj Syncfusion Team March 9, 2023 05:25 PM UTC

Hi Ton,


Query: set the width of Drag row is equal with the grid's width.


We have reviewed your query and are pleased to inform you that we have found a solution that can help you set the width of the drag row equal to the Grid's width. To achieve this, we recommend setting the drag row style using the cloneElement property inside the rowDragStartHelper event. We have prepared a code snippet that demonstrates how this can be achieved. Please see below for the code snippet:


[index.js]

 

  function rowDragStartHelper(args) {

    args.cloneElement.style.width = gridInstance.element.offsetWidth + 'px';

  }

 

<GridComponent

          ref={(g) => { gridInstance = g }}

          dataSource={orderDetails}

          allowRowDragAndDrop={true}

          height="400"

          selectionSettings={{ type: 'Multiple' }}

          rowDragStartHelper={rowDragStartHelper}

        >


[index.css]

 

.e-draganddrop > table > tbody > tr > td{

  width: fit-content !important;

}

 

.e-draganddrop > table {

  width: inherit !important;

}


We have also attached the sample for your reference.


Sample: https://stackblitz.com/edit/react-ypvgrr?file=index.css,index.js


If you have any further queries or concerns, please do not hesitate to reach out to us.


Regards,

Santhosh I


Marked as answer

TT Ton That Hung March 10, 2023 08:33 AM UTC

Thanks for your support.



SG Suganya Gopinath Syncfusion Team March 13, 2023 07:15 AM UTC

Hi Ton, 

Hope the provided solution helped to solve the issue. Please get back to us for further assistance. 

We are marking this forum as solved.  

Regards,

Suganya Gopinath. 


Loader.
Up arrow icon