Customize hint Element when using rowReorder functionality on Grid

1 Answer 17 Views
Grid
Alon
Top achievements
Rank 1
Veteran
Alon asked on 30 Dec 2021, 02:42 PM
Is it possible for me to customize the hint Element during a row reorder operation using the kendo Grid rowReorder functionality?

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 04 Jan 2022, 09:04 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Alon
Top achievements
Rank 1
Veteran
Answers by
Georgi Denchev
Telerik team
Share this question
or