[Solved] Changing the appearance of the drop hint line using reorderable (k-drop-hint)

[Kris]

We are using reorderable.rowson a very wide grid with many columns (maybe 2 times the width of the screen, horizontal scroll is enabled) and the line that hints at where you're dropping a dragged row can be out of view in some situations, making it quite difficult to figure out where exactly you're moving a row to. Is there a way to customize its appearance?

 

Thanks,

Kris

[Neli]

Hello Kris,

You can customize the appearance of the drop hint line (.k-drop-hint) used during row reordering in the Kendo UI Grid by applying custom CSS.

You can also target the .k-drop-hint-start and .k-drop-hint-line to customize the styles of the pointer and the line of the drop hint

For example, you can make the line thicker, change its color, or add a shadow to make it stand out more:

 .k-drop-hint {
        border-color: red !important;
        color: purple !important;
        border-width: 4px !important;
        box-shadow: 0 0 8px red;
      }

      .k-drop-hint-h .k-drop-hint-start {
        border-inline-start-width: 10px;
        border-inline-start-color: orchid;
      }
      .k-drop-hint-line{
        background-color: violet !important;
        height: 3px !important;
      }

Add this CSS to your page to override the default appearance. Here you will find a runnable example: https://dojo.telerik.com/wPsaHOJh/2.

Customizing the drop hint's position and width can be challenging due to the grid's complex layout, especially when features like virtual scrolling are enabled. If you encounter specific issues with the hint being out of view or not spanning the grid, please share a sample or more details about your grid setup so I can suggest a more targeted solution.

I hope this helps. 

Regards,
Neli
Progress Telerik

[Kris]

Hi Neli,

The issue we're having can be easily replicated. Here's an example https://dojo.telerik.com/lFHRKdSN/2

You can see that when many columns are present, the hint line isn't always visible since it doesn't span the entire grid horizontally. Like I said, we have many columns, so users are having trouble knowing where they're dropping rows if they happen to be at the wrong end of the grid. With only a few rows you might get by, but we easily have over 100 rows, and some of our users even like seeing the entire data set which is around 1000.

I tried to target the line with css as well, with some simple changes like:

.k-drop-hint {
        width: 100%;
}

But this introduced a horizontal scroll on the entire page (not just the grid itself), with the line going over the grid's vertical scroll bar, which is quite ugly.

Like I said, ideally the line would simply span across all the columns in the grid and be easily visible at all times. Another thought we had would be to have the hint line appear in the column that the drag handle is in, which we use in our grid (the order of the columns can be freely customized by our users, so simply moving the handle to the first position in the order wouldn't solve it for us).

Cheers,

Kris

[Neli]

Hi Kris,

To acheive the desired appearance I would suggest listening to mousemove and mousedown events on the grid element. When the .k-drop-hint is present in the DOM during a row drag, you can set its width to match the grid's visible container width ($("#grid").width()). This ensures the hint spans the full visible grid area without causing a horizontal scrollbar.

 $("#grid").on("mousemove mousedown", function() {   
     var $hint = $(".k-drop-hint");
     if ($hint.length) {
       $hint.css("width", $("#grid").width() + "px");
     }
 });

The approach is demonstrated in the Dojo linked here: https://dojo.telerik.com/whxynRVC 

Regards,

Neli