Is it possible to customize jqgrid look and feel?

Question

I want my jqgrid to look like bootstrap tables look and feel.
Is it possible to customize the look and feel.
I know that jqgrid support (jquery theme), but I want bootstarp look and feel and not jquery theme.

Solution 1

I had the same problem and ended up dropping jqgrid and getting DataTables instead - http://datatables.net/. Its very similar to jqgrid, arguably has better functionality and comes with instructions on how to style it like bootstrap - http://datatables.net/blog/Twitter_Bootstrap.

Solution 2

The problem is that jqGrid are base on jQuery UI CSS framework. jqGrid build grid from empty <table> element dynamically. It inserts a lot of elements having predefined CSS names like "ui-widget", "ui-widget-content", "ui-state-hover", "ui-icon" and so on.

I never used bootstrap before. It seems that it has it's own Base CSS framework. So the only way which I see is that you customize jQuery UI CSS so that it corresponds looking of bootstrap. You can do this with respect of Themeroller. On the page you can interactively create new jQuery UI Theme which looks very close to bootstrap CSS. At the end you can download the customized CSS by clicking on "Download theme" button (see on the left part on the page in "Roll Your Own" tab). Alternatively you can use jQuery UI ThemeRoller Developer Tool to create new CSS.

Solution 3

I had the same problem, created my own CSS style. Check: https://github.com/Soliman/jqGrid.bootstrap. It's a bit messy, but it's a start and works for me.

Solution 4

jqGrid using jQuery UI based html and classes so a Bootstrap theme for jQuery UI should do the trick, unless you have customized your Bootstrap then the same customizations need to be done twice.

http://addyosmani.github.com/jquery-ui-bootstrap/

View more solutions

Comments

[Rajesh]

ya this is ok datatables came up with bootsrap layout..I hope sam ething could be done with jqgrid as well..why layout is so coupled in jqgrid..user should be free to choose CSS property..I hope jgrid designer is listening to my grievances..

[Yasser Shaikh]

but what about making jqgrid responsive ? that's the whole idea of using Twitter Bootstrap, any suggestions ?

[Oleg]

@Yasser: Sorry, but I don't understand what you mean.

[Yasser Shaikh]

Hi @Oleg ! I wanted to ask how to make jqgrid responsive

[Oleg]

@Yasser: I don't understand what you mean under "responsive jqGrid". What do you men exactly? Which features, which behaviors?

[Farrukh Subhani]

@Oleg I think what Yasser means to say is that when you have a device with certain width is it possible to make jQgrid understand the screen size and behave accordingly. One thing I do is once my grid is loaded i can use javascript to check width and i hide columns according to that but what i would like is within column model i can define one or more frozen column and on a small screen it just shows that as first and rest can be scrolled to right and left with paging, search and filtering happily accessible for example on tablet and phone.

[haraman]

This link is broken (File not found)