Customize hint Element when using rowReorder functionality on Grid

[Alon]

Is it possible for me to customize the hint Element during a row reorder operation using the kendo Grid rowReorder functionality?

[Georgi Denchev]

Hello, Alon,

Yes, it is possible to modify the hint element.

The Kendo Grid initializes a Kendo Draggable widget on the table element when the "reorderable rows" configuration is enabled. You can use the instance of the Draggable and the setOptions method to override the default hint function.

          let grid = $("#inStockProductsGrid").data("kendoGrid");
          grid.bind("dataBound", function() {
          	grid._draggableRowsInstance.setOptions({
         	hint: function(target) {
                 const ITEMROW = "tr:not(.k-grouping-row):not(.k-detail-row):not(.k-footer-template):not(.k-group-footer):visible";
                
                 // You can modify the hint's div element here.
         	var hint = $('<div class="k-reorder-clue k-drag-clue"><span class="k-icon k-drag-status k-i-cancel"></span></div>');
                
                 hint.css({
                   "background-color": "red",
                   "color": "white"
                 });
                
                 // Clone the row that is currently being dragged and remove the edit/destroy buttons if they exist.
                 var clone = target.closest(ITEMROW).clone();
                 clone.find("td.k-command-cell").remove();
                
                 // Append the value of each cell to the hint.
                 clone.find("td").each(function(index, elm){
                     hint.append("<span>" + elm.innerText + "&nbsp;</span>");
                 });
                
                return hint;
         	}
         });

Runnable Dojo:

https://dojo.telerik.com/@gdenchev/UWOvujAn 

Let me know if you have any questions.

Best Regards,
Georgi Denchev
Progress Telerik