如何将Kendo Grid可拖拽行样式改为类似DataTables的蓝色粗体风格？

需求：偏好DataTables中行排序的蓝色粗体拖拽样式，需将Kendo Grid的可拖拽行提示修改为该效果。

修改后的实现代码：

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";

      // 构建拖拽提示容器
      var hint = $('<div class="k-reorder-clue k-drag-clue"><span class="k-icon k-drag-status k-i-cancel"></span></div>');

      // 应用DataTables风格的样式：蓝色背景、粗体文字
      hint.css({
        "width": "300px",
        "background-color": "#1377eb", // DataTables标志性蓝色
        "color": "#ffffff",
        "font-weight": "bold",
        "padding": "8px 12px",
        "font-size": "14px"
      });

      // 克隆当前拖拽行并移除操作按钮
      var clone = target.closest(ITEMROW).clone();
      clone.find("td.k-command-cell").remove();

      // 将单元格内容添加到提示容器
      clone.find("td").each(function(index, elm){
        hint.append("<span>" + elm.innerText + "&nbsp;</span>");
      });

      return hint;
    }
  });
});

关键修改说明：

• 替换背景色为DataTables常用的蓝色（#1377eb），匹配其行排序拖拽提示的视觉风格
• 添加font-weight: bold实现粗体文字效果
• 增加内边距（padding）和调整字体大小，优化提示框的视觉舒适度
• 保留原有的行克隆与内容拼接逻辑，确保提示内容与拖拽行一致

内容的提问来源于stack exchange，提问作者Jefferson