Kendo Style Grid draggable Item similar to datatables

I ready like the style that datatables is using for row order but I have the Kendo grid and wanted to see if I can style is similar to the blue bolder. Any help would be great.

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({
                  "width": "300px",
                  "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;
              }
            });

https://dojo.telerik.com/@mcdevitt/AtihIhEj

https://dojo.telerik.com/iNoLErAx

https://editor.datatables.net/examples/extensions/rowReorder

Solution

You can use template to recreate the hint's markup to be similar to a Grid's data row and then add the desired blue border to it. Here is a modified example