Change grid line colour and weight

1 Answer 66 Views
Grid
AP
Top achievements
Rank 1
Iron
Iron
Veteran
AP asked on 23 Mar 2023, 09:47 AM | edited on 23 Mar 2023, 09:48 AM

I have a grid using the bootstrap Nordic theme. The users have asked that the grid lines be made more prominent, rather than the light grey .

I have had a look at the new theme builder, but not only does it seem overkill for a small change, but also doesn't seem to allow the line colour and weight to be changed.

 

How can I make the grid lines black and increase the width slightly?

I'm using version 2022.3.1109

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 28 Mar 2023, 06:37 AM

Hello Andrew,

Thank you for the details provided.

I am not sure which lines should have a different style, but I guess we are talking about the rows in the Grid.

If this is the case, I would recommend using the following CSS:

<style>
    .k-master-row{
        background-color: black !important;
        color: white;
        font-weight: 600;
    }
</style>
This is the result:

Give a try to the pointed stylings and let me know if this is the desired result.

Kind Regards,
Anton Mironov
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/.

AP
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 28 Mar 2023, 10:02 AM | edited

Anton, thanks for this, but I don't want to change the font or the cell background (I have custom conditional formatting) I just need to change the grid line colour to black and make them slightly thicker, so cells are more easily distinguished from one another.

I've tried setting the border and border-color properties on the k-master-row class, but this doesn't seem to work.

Anton Mironov
Telerik team
commented on 31 Mar 2023, 06:39 AM

Hi Andrew,

Thank you for the additional details provided. Now I can see your point clearly.

In order to achieve the desired behavior, I would recommend using the following CSS:

<style>
    td {
        border: 1px solid black !important;
    }
</style>

There are some borders where the style is duplicated, so feel free to customize it as per the needs of your application.

I hope this is the desired result.

 

Best Regards,
Anton Mironov

 

Tags
Grid
Asked by
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Anton Mironov
Telerik team
Share this question
or