CODEWITHSUNDEEP
jqueryjqgridtwitter-bootstrap
Rajesh
Rajesh

Reputation: 3024

Is it possible to customize jqgrid look and feel?

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.

Upvotes: 10

Views: 15780

Answers (6)

Csaba Toth
Csaba Toth

Reputation: 10699

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

Upvotes: 0

VahidN
VahidN

Reputation: 19156

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

Upvotes: 0

Soliman
Soliman

Reputation: 441

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.

Upvotes: 4

Ali Camarata
Ali Camarata

Reputation: 147

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/

Upvotes: 3

Simon Cunningham
Simon Cunningham

Reputation: 5550

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.

Upvotes: 7

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 9

Related Questions