Kendo 风格网格可拖动项目类似于数据表

Question

我准备好喜欢数据表用于行顺序的样式，但我有 Kendo 网格，想看看我是否可以设计类似于蓝色粗体的样式。任何帮助都会很棒。

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

Answer 1

您可以使用模板重新创建类似于网格数据行的提示标记，然后向其添加所需的蓝色边框。 这是一个修改后的示例