How to hide drag icon while using drag and drop feature for rearranging the grid rows.

Question

Hi Syncfusion Team,The requirement is, the drag icon for rearranging the grid rows should be hidden. As in attached image, the drag icon should not be visible in UI, while using drag and drop feature for rearranging the grid rows. How to achieve this? Thanks,Bhagyasri

Rajapandi Ravi · Answer

Hi Bhagyasri,

Greetings from Syncfusion support

From your update we could see that you like to hide the drag and drop icon in the Grid. Based on your query we have prepared a sample and achieved your requirement by using CSS. Please refer the below code example and sample for more information.

<style>

.e-grid .e-icon-rowdragicon{

display: none;

}

</style>

Sample: https://stackblitz.com/edit/angular-p6bdjp?file=index.html

Screenshot:

Regards,

Rajapandi R

Bhagyasri · Answer

Hi  Rajapandi Ravi,Thank you for your reply.How can we hide the entire reorder option column not only the drag icon. It should not allow reorder option column to be visible. How can we achieve this?Thanks,Bhagyasri.

Rajapandi Ravi · Answer

Hi Bhagyasri, 

Thanks for the update 

We understand that you like to remove the drag and drop icon column in the Grid to disable rowDragandDrop. You can remove the drag and drop and column by invoking below method. Please refer the below code example for more information. 





 
gridInstance.disableRowDD(true); //invoke this method to remove the drag and drop icon column 


Note: If you invoke this method, the row drag and drop feature was not going to be work in the Grid. So if you like to remove the drag and drop icon column, we suggest you don’t need to enable the row drag and drop feature in your application. 

So please share the below details that will be helpful for us to provide better solution. 

1)        Please share your purpose to remove the drag and drop icon column. 

2)        Please share your exact requirement scenario with detailed description. 

Regards, 
Rajapandi R

Bhagyasri · Answer

Hi Rajapandi Ravi,Thank you for the reply.After hiding of drag icon still the reorder column is taking the same width/space, is there any way we can reduce the drag and drop icon column width, without removing that column, so that it can take less space at front.I have attached screenshot below for reference. As mentioned, how to reduce the width of drag and drop icon column. Could you let me know how to achieve this? Thanks,Bhagyasri.

Rajapandi Ravi · Answer

Hi Bhagyasri, 

If you like to remove the drag and drop icon column, we suggest you don’t need to enable the row drag and drop feature in your application.  

Before we start providing solution on your query, we need some information for our clarification. Please share the below details that will be helpful for us to provide better solution. 

1)        Please share your purpose to remove the drag and drop icon column.  

2)        Please share your exact requirement scenario with detailed description. 

Regards, 
Rajapandi R

Bhagyasri · Answer

Hi Rajapandi Ravi,Thank you for your reply.our requirement is the rows that are selected in grid should be moved to top and on deselection they should rearrange automatically to bottom.we are using RowDDService for reorder of grid rows on selection and deselection respectively, so that reorderRows() method is working only after enabling of drag and drop feature.So our requirement is whether we could hide that drag icon and reduce that drag and drop icon column width, our requirement is not to remove that column only just reducing the column width and hiding the drag icon.​ So that drag and drop column would take less space at front after hiding of drag icon.Could you also let me know, if we can reorder the rows in grid to top on selection and can be moved to bottom on deselection, without enabling drag and drop feature.Thanks,Bhagyasri.

Joseph Christ Nithin Issack · Answer

Hi Bhagyasri, 

  Thanks for your update. 

  Query 1: Our requirement is not to remove that column only just reducing the column width and hiding the drag icon.​ 

    Based on your requirement, you want to hide the drag and drop icon from the grid but you want to be able to drag and drop the rows programmatically.  Your requirement can be achieved using the css style. 

Please find the below code example: 






.e-grid .e-gridheader .e-rowdragheader { 
  display: none; 
} 
.e-grid .e-gridcontent .e-rowdragdrop.e-rowdragdropcell { 
  display: none; 
} 
.e-drag-intent { 
  display: none; 
} 
 


Sample: https://stackblitz.com/edit/angular-qrwvnd-j2tnsv?file=app.component.css 

Query 2: Could you also let me know, if we can reorder the rows in grid to top on selection and can be moved to bottom on deselection, without enabling drag and drop feature. 

   Before we proceed to the solution please provide the following details so that we may be able to provide a better solution ASAP. 

-                      You have mentioned that when you select a row it should be moved to the top of the grid and when you deselect it should move to the bottom. Here when you say bottom are you mentioning that the row should be moved to the last position of the grid or do you want the row to be moved to the previous position? 
-                      Are you using single selection or multiple row selection in your grid. 
-                      Please share a video demonstration or screenshot for your requirement. 


Please get back to us for further details. 

Regards, 
Joseph I.