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.

Tahoe

from where did the question of liking a man or women came from..my client wants bootstarp look and feel..i dont want to write my own grid plugin...behave like a professional.. – Tahoe

Answer 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.

Leffert

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.. – Tahoe

Answer 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.

Hysteroid

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

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

Hi @Hysteroid ! I wanted to ask how to make jqgrid responsive – Boogeyman

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

@Hysteroid 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. – Taffy

Answer 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.

Randallrandan

Answer 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/

Dabster

This link is broken (File not found) – Misapprehend

Answer 5

Another bootstrap theme for jqGrid: http://jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/extra.html#jqgrid

Hesper

Answer 6

I'm using free jqGrid (a branch of trirand jqGrid), and it supports built-in styling. You can tune the look-and-feel with two main options:

1. guiStyles (https://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L600): jQueryUI, bootstrap, bootstrapPrimary, bootstrap4
2. icons : (https://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L389): jQueryUI, fontAwesome, glyph

Aindrea