Grid Style Gradients

[Lee]

 Hello,

I was interested in prettying up the grid a bit today, mainly by attempting to incorporate gradients into the styles...row selection, row hover, anything else would be bonus.

When plugging in the row hover I came across the following JSBin...

http://jsbin.com/ezovaw/2/edit#/ezovaw/54/edit

It is referencing your public, static stylesheets and has the exact look I was going for.

http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css
http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css

I quickly tried referencing these stylesheets myself and was pleased with the result.

I've tried pulling the stylesheets locally, but oddly, I do not get the gradients. It is only working when referencing the URIs above...

Where can I find the (version) of these stylesheets that includes the gradients in my Q3 2012 release?


Thanks for your help!

[Dimo]

Hello Lee,

The CSS files use image references with relative paths / URLs. So naturally, you either need to make the image paths absolute and pointing to the remote CDN location, or have the images locally as well.

The stylesheets and images are available in the Kendo UI installer.

Regards,
Dimo
the Telerik team

[Lee]

Maybe I'm missing something....I got the Q3 2012 release, pulled in the '/src/styles/Default' image directory into my solution. I also pulled in the 'kendo.common.min.css' and 'kendo.default.min.css' files.

What you're saying makes sense, regardless of the stylesheet, they are pointing to images at a relative location.

This leads me to concur with you, that I need to get the images (that include the gradients) locally.

Where can I find these images in the contents of the Kendo UI zip file distribution?

Are you sure these 'gradient' images shipped with the Q3 2012 release, under the '/src/styles/Default' directory?

Do I maybe need to pull in the '/src/styles/textrures' directory too?


Thank you for your help!

[Lee]

That was it. I needed to pull in the 'textures' directory.

Would be real sweet if the 'Getting Started' mentioned this....

http://docs.kendoui.com/getting-started/downloading-kendo


Maybe it is mentioned somewhere and I missed it?


Thanks again for the nudge in the right direction!

[Lee]

Dimo,

I upgraded my Kendo Web files to the latest version and I'm now having this issue again, where I lose gradients.

The only referenced Kendo files are:

1) The 'styles/kendo.common.min.cs'
2) The 'styles/kendo.default.min.cs'
3) The 'js/kendo.all.min.js'
4) The 'styles/Default' directory is included
5) The 'styles/textures' directory is included


If I swap the new versions in for all 5 of the above items, I get the desired fix for the splitter dragging ( http://www.kendoui.com/forums/ui/splitter/splitter-over-an-iframe-is-not-sensed.aspx ), but I lose my grid selection gradient. (Flat orange rather than gradient)

If I just swap in the old version (2012.2.710) 'styles/kendo.common.min.cs' the gradient comes back (but I still have the splitter dragging issue).

Being that all I have to do is swap out this one css file to see the gradients appear and disappear, I'm inclined to believe that I have the appropriate image files down, and that this issue is somewhere in the 'kendo.common.min.css' file.

Furthermore, if you take this below fiddle which is the latest Kendo version, you can see with the grid selection that the selection is flat and not using gradients....but if you merely change the kendo version being referenced from '2012.3.1315' to '2012.2.710' the gradients come back for the grid selection.

http://jsfiddle.net/7Fvkg/

Can you please confirm that this is an issue with the 'kendo.common.min.css' file and not something I have missed locally?


Thank you!

- Lee

[Dimo]

Hi Lee,

There is a missing background-position style, which causes the problem in Internet Explorer (other browsers use linear gradients now). We will fix this for the next internal build, thanks for pointing this out.

In the meantime, you can add the missing style manually:

http://jsfiddle.net/7Fvkg/1/

All the best,
Dimo
the Telerik team

[Lee]

Thanks Dimo, did the trick.

[Lee]

Hello,

This same issue is occuring again.  Nothing has changed....

http://jsfiddle.net/7Fvkg/1/

The above fiddle has the '.k-state-selected' style Dimo referred to, but is no longer working. (I get solid colored highlights, not gradients)

Like before if I swap out the referenced styles version to '2012.2.710'  the gradient comes back (but I still have the splitter dragging issue).


UDPATE:
Actually, I notice that it does work in IE. (which must have been the only browser I tested this fix with before)  But does not work in any other browser....



Thanks in advance for your help,
Lee

[Dimo]

Hello Lee,

Please refer to the attached screenshot, which shows the gradient working in IE9, Firefox 19 and Chrome 25. Note that older IE versions do not display the gradient by design.

Regards,
Dimo
the Telerik team

[Lee]

Dimo,

Thanks again for your prompt response.

I am unable to determine if the styles are applied or not based on your screenshots of the grid.  I have been using the grid selected style (orange on default theme) to determine this.

I've attached a screen shot, similar to yours, showing FF, Chrome and IE(9).  In IE you can see the orange selected style is showing as a gradient, where as in FF and Chrome it is not.

I'm pretty sure I only tested this before in IE and saw it was working and moved on.  Now when browser testing I noticed the issue in FF and Chrome.

Any ideas?

Thank you for your help,
Lee

[Dimo]

Hello Lee,

There is a gradient in all cases, it's just different, because in one case it is a PNG image (IE), and in the other case it is a linear gradient (FF, Chrome). Actually, the linear gradient is the "more correct" look, the PNG image is a fallback.

Greetings,
Dimo
the Telerik team

[Lee]

Dimo,

Take a look at this attachment, which is just the same fiddle with its version changed to '2012.2.710'.  The selection renders the same in all browsers.

Did the way this was implemented change between versions?

[Dimo]

Hello Lee,

Yes, linear gradients were implemented in newer versions. If you prefer the old look more, you can remove the linear gradient styles from the theme CSS and leave only the fallback PNG.

We will check whether the semi-transparent PNG background can be modified in such a way, so that it looks like the linead gradient.

Greetings,
Dimo
the Telerik team