Guriddo » Topic: Using a different jquery CSS for jqGrid

Using a different jquery CSS for jqGrid

Guriddo
Using a different jquery CSS for jqGrid

This topic has 5 replies, 2 voices, and was last updated 16 years, 8 months ago by Rumen.

Creator

Topic
October 7, 2009 at 2:56 pm #74317

admin
Keymaster

Hello everyone,

For many reasons most people might find great that jqGrid now uses jquery's themes but I'd like to use a different color scheme for jqGrid than the one I use for jquery widgets.

Does anyone know a clean and easy way to achieve this ?

Thanks a lot,
Creator

Topic

Viewing 5 replies - 1 through 5 (of 5 total)

Author

Replies
October 8, 2009 at 1:48 am #89604

Rumen
Participant

Hard to achieve, since the grid now uses the very same names of the CSS classes ThemeRoller uses and they are global for the whole page.

It might be possible to just copy paste a ThemeRoller theme and modify it manually to match selectors only the grid uses, have not tried that myself, but it might be a good idea [since this would also mean you could have two grids with different themes on the same page]. I will experiment a bit and let you know.

Another idea (kinda of a hack) would be to just place the grid inside an where the CSS scope is different, but this could be messy in most cases.

October 8, 2009 at 3:28 am #89613

admin
Keymaster

Thanks Rumen for replying so quickly,

I've already thought about the iframe hack, though it's psychologically hard to accept to regress so much considering that the application I'm working on is totally web 3.0 ready 😉

A good option for jqGrid would be the possibility to use of an arbitrary prefix for CSS selectors names, it'd be then easy to write a script that would quickly rename themeroller's CSS selector names to add this prefix.

Frederic

October 8, 2009 at 3:57 am #89614

Rumen
Participant

Yes, definitely, we will research this asap and try to figure out a way to do it. This will provide two features – jqGrid with different theme than the rest of ThemeRoller components AND the possibility to have several grids with different themes on the same page.

I will followup here when we find the best solution.

October 8, 2009 at 4:04 am #89615

admin
Keymaster

Nevermind, I've found a solution:

Open the themeroller css you want to use with your grid

Replace all occurences of

, .ui-

with

, #testcss .ui-

And all lines beginning with

.ui-

with

#testcss .ui-

Using the vim editor this can be easily achieved with the two commands:

:%s%, .ui-%, #testcss .ui-%g
:%s%^.ui%#testcss .ui

Once this is done, just put the grid inside

and you're done.

October 8, 2009 at 4:08 am #89616

Rumen
Participant

Excellent, this is actually what I originally suggested but never tried

It might be possible to just copy paste a ThemeRoller theme and modify it manually to match selectors only the grid uses, have not tried that myself, but it might be a good idea [since this would also mean you could have two grids with different themes on the same page]. I will experiment a bit and let you know.

I will make sure we have one example that covers this area.
Author

Replies