Eliminating border around sub-grid area

1 Answer 16 Views
Grid
Richard
Top achievements
Rank 1
Richard asked on 22 Jun 2021, 06:14 PM

I have a Radgrid with a detail table (a sub-grid).  The sub-grid rows always have a border around them (see the attached image) and I would like to eliminate the top and bottom lines.

I have already tried setting BorderStyle="None" and BorderWidth="0" on both the main grid and the detail table, but that has not changed anything.

How would I accomplish this?

1 Answer, 1 is accepted

Sort by
0
Doncho
Telerik team
answered on 25 Jun 2021, 10:34 AM

Hi Richard,

I would suggest you use custom CSS to modify the default appearance. You can use the DevTools of the Browser to inspect the Html elements on the page and the applied styles to define an appropriate CSS selector for overriding the built-in skin styles. The first two points in the Improve Your Debugging Skills with Chrome DevTools blog post may help you with that.

The Telerik controls are rendered on the page with certain predefined class names that you can use to style the desired piece.

For instance, here is a CSS you can try for removing the border around the DetailTable(s):

html body .RadGrid .rgDetailTable{
    border:none;
}

I hope this will help you achieve the desired.

Please let me know if further questions come up.

Kind regards,
Doncho
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Richard
Top achievements
Rank 1
Answers by
Doncho
Telerik team
Share this question
or