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 + " </span>");
});
return hint;
}
});
https://dojo.telerik.com/@mcdevitt/AtihIhEj
https://dojo.telerik.com/iNoLErAx
https://editor.datatables.net/examples/extensions/rowReorder
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