Looking for some good grid stylings

[Joe]

I find the default Kendo Grid (MVC) is just plain ugly.  Everything about it is monstrously huge, so much padding, the text is huge, it's just really ugly for a modern looking web application.  Does anyone have any good tips or styles they'd care to share to make this thing look at least a little bit decent?

I tend to do this, which helps, but it's still pretty ugly (especially the filter row)

<style>
    /* the default Kendo Grid has waaay too much row padding so this reduces it */
    .k-grid-content tr td {
        padding: 0;
        font-size: small;
    }
</style>

 

[Eduardo Serra]

Hello Joe,

We encourage style customization in our controls; with this in mind, Kendo UI has been designed and developed to be easily customizable through the use of CSS.

If you want to switch between the different themes that are available by default, take a look at our own Kendo UI ThemeBuilder website. From what I could read in your post, I would recommend you take a look at the Metro theme.

I hope this helps.

Regards,
Eduardo Serra
Telerik by Progress

[Joe]

Unless I did something completely wrong, themes only seemed to change colors, but nothing else.  For example, I tried both the Default and Metro themes, but the grid were still huge (with a whole lot of padding), and the filter row itself was also huge and ugly looking. I was able to change the line-height and padding to get a decent enough looking grid, but the filter row is still just plain nasty, and doesn't fit with the rest of the look and feel.  

Messing about with the CSS is hugely problematic because of the complexity of the initial CSS itself. Especially with the amount of nesting in it. It really seems as if to get this looking decent enough, to match a corporate look and feel, one would have to be a full time CSS developer... And fully understand all CSS intricacies of the different components.

[Alex Gyoshev]

Hello Joe,

Some of the themes provide smaller cell padding on the grid -- for example, the padding in the Default theme is less than the padding in the Material / Nova themes. You are correct that the ThemeBuilder changes only the theme colors -- to customize the cell padding, inspect the styles you need changing, and override them with custom styles. We are working on next-generation themes that provide configure parameters, but these are not available at the time of writing this.

Regards,
Alex Gyoshev
Telerik by Progress

[Joe]

I've attached a screenshot of what my grid ends up looking like, and I'm just not all that satisfied with it.  Here too is the CSS I've changed or modified to even get this look (it used to be much worse)...

/*the default Kendo Grid has waaay too much row padding so this reduces it*/
.k-grid-content tr td {
    padding: .4em .4em;
}

.k-grid td{
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: small;
}

.k-grid-header th.k-header>.k-link {
    padding: .4em .4em;
    font-size: small;
    font-weight: bold;
    line-height: 1em;
    color: black;
}

.k-grid-header th.k-header {
    padding: .4em;
}

table {
    padding: .4em .4em;
    white-space: normal;
    line-height: 1em;
    font-weight: normal;
    font-size: small;
    font-style: normal;
    color: -internal-quirk-inherit;
    text-align: start;
    font-variant: normal normal;
}

 

I'm  using the CDN, and here are what I have included...  What is the easiest method to coming up with a style for this grid that'll make it compact, and where the filter row doesn't require so much space (i.e. much smaller)?

 

[Joe]

I wanted to add a reply, listing the things I specifically don;t like about the grid, hoping it'll prompt someone to tell me which CSS setting to override.  The huge nesting compexity of the styles themselves do not make it very easy to get these things looking how I want, especially without affecting other things.

1. I strongly dislike the light gray border color

2. I strongly dislike the light gray background on the column headers

3. I strongly dislike the gray color of the filter row

4. I strongly dislike the padding in the cells and rows of this grid

5. I strongly dislike the padding in the column headers

6. I strongly dislike the whole filter row altogether.  The colors, the padding, the size of the components...

7. Did I mention how much I strongly dislike the light gray color, everywhere.  The icons, the text, the borders, the backgrounds...

[Joe]

Coincidentally, I chose the"Default" theme from the ThemeBuider linked to here in the first response.  I removed my own style overrides, and when I used the theme it looks absolutely nothing like the grid on that theme builder.  There really needs to be better ways to make these think look how we want!

[Alex Gyoshev]

Hello Joe,

If the theme in the themebuilder looks as you desire, but does not look the same when it is used in your application, it is likely that there are conflicting styles on the page that override it. Instead of introducing more overrides of the grid styles, it is usually easier to make the clashing styles more specific, targeted at the content that they style. For example, td {} rules may apply to grid cells, therefore scoping them to .my-content td {}.

If you need customization of the themes apart from the one offered from the themebuilder, you can achieve this with CSS by inspecting the page and applying the styles to the desired elements.

Regards,
Alex Gyoshev
Telerik by Progress

[Joe]

Your replies always makes it sound so easy... "Oh, just change this...." or "Just change that...."  I wish it were truly that easy.  Have you seen the nesting complexity that is the telerik stylesheets?  I have been fighting these styles for over 2 weeks, they are absurdly complex, with deep hierarchies and overrides.  I am a C# developer, and a damn good one, but styles are just not my thing. And the telerik styles are especially not my thing.  

[Alex Gyoshev]

Hello Joe,

Indeed, the process for changing component styles is somewhat involved at this time. We are currently changing our theming mechanism to accommodate easier changes -- however at this time, CSS changes need to be applied manually. Here is a Dojo snippet that reduces the cell padding in the grid content. If you need help with making the grid spacing more concise in your project, please provide a live URL or a runnable sample that shows the problem.

Regards,
Alex Gyoshev
Telerik by Progress