Hello Nate,

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.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics