How to customize style of RadGrid drag & drop dotted line indicator

[Anthony]

Hi,

I have a client who wants to make the drag & drop functionality to be more prominent.  Namely the dotted line that appears on the target to indicate where it's going to be dropped.  What's the name of this style so I can modify it, please?

 

 

[Doncho]

Hi Anthony,

The dotted line in question is styled by the Telerik Skin stylesheets. The div element used for visualizing the drop position has a CssClass GridItemDropIndicator assigned.

You can override the style by using a stronger selector than the default one. The one below should normally be sufficient:

html body .GridItemDropIndicator {
    border-top: 1px dashed red;
}

I have captured a video of the way I inspected this issue in our live demo, you may find it useful -  http://somup.com/c36YiGvYRE.

I would also recommend checking out the following two-part blog post, as it shows some useful tips on effectively using the Browser's DevTools for inspecting Html, CSS, and debugging JavaScript on the page:

• Improve Your Debugging Skills with Chrome DevTools
• Improve Your Debugging Skills with Chrome DevTools (Part 2)

I hope this helps.

Kind regards,
Doncho
Progress Telerik