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.

Answer 1

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.

Answer 2

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.

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.

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/