Is there a way to customize the column that shows the drag indicator based on values in a row?
I found that you can change the drag indictor column using an "ng-template" with the "igxDragIndicatorIcon" directive for the entire tree grid but I haven't been able to figure out how to get access to the data within the row like you can with the "igxCell" directive.
Hello Nate,
Thank you for following up.
You can submit feature request in our GitHub repository here.
Remember when submitting your idea to explain the context in which a feature would be used and why it is needed as well as anything that would prevent you from accomplishing this today.
You can even add screenshots to build a stronger case.
Submitting a new feature request gives you the opportunity to directly communicate with our development team regarding the feature and get notifications whenever a new information is available. It is possible that they would have additional questions regarding the expected results and the use cases.
If you require any further assistance on the matter, please let me know.
Thank you for your cooperation.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics
Thanks for the quick response.
Only certain rows in my tree-grid are dragable. I am able to prevent them from being dragged by using the onRowDragStart event like you suggested but thought it would be clearer for a user to only show the drag indicator on rows that are dragable instead of it being more trial and error on which ones they can or cant drag.
Is there a page I can goto to make a feature request for this?
I have been looking into your question and currently igxDragIndicatorIcon does not provide data for a given row and there is no way to access a specific row data and change the Drag Indicator Icon because it is applied to the entire grid for all rows.
However, what I could suggest you in addition as an approach is to change the icon when starting the dragging. Thus, at the beginning, all icons will be the same, but when you start dragging, you can change a given icon according to the data from the given row and show more information.
This can be done by handling rowDragStart and when starting to drag a row, the dragData property of the event and then the data property can be accessed to get all the data of the given row. Based on the row data, the current icon can be accessed via the dragDirective property of the event and then the ghostElement and the innerText of the icon can be changed. The given icon can be changed for additional information to the user or different indicators can be added according to your custom logic.
public onRowDragStart(event){ //data console.log(event.dragData.data) //based on data change the ghost icon const currentIcon = event.dragDirective.ghostElement.querySelector('.igx-grid__drag-indicator > igx-icon'); currentIcon.innerText = 'remove'; }
The described scenario could be observed here:
In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.