I am using JQGrid 3.5 . Can I change the style and look of the grid and make it beautiful more using jquery or custom css or something else? Please Help me. Thanks in advance.
A:
I'm sure you can.
You have two options:
You can modify the css of the grid. This is usefull if have to make small modification on the design. The Major modifications shouldn't done this way because the JQGrid's CSS classes are really dependent from eachother.
Or you can remove all the styling from the html and replace it with your own.
For instance you have a JQGrid like:
HTML
<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager2" class="scroll" style="text-align:center;"></div>
Jquery
jQuery("#list2").jqGrid({ url:'server.php?q=2',
datatype: "json",
colNames:['Inv No','Date'],
colModel:[ {name:'id',index:'id', width:55},{name:'invdate',index:'invdate',width:90}],
rowNum:10,
rowList:[10,20,30],
pager: jQuery('#pager2'),
sortname: 'id',
viewrecords: true,
caption:"JSON Example" }).navGrid('#pager2',{edit:false,add:false,del:false});
This will generate an HTML like below:
<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix">
..
</div>
Remove all the CSS classes:
JQuery("#list2").removeClass(".ui-jqgrid-titlebar");
etc.
After you created your own classes you can add to the HTML structure with:
JQuery("#list2").addClass(".YourClass");
I suggest to use both techniques.
Sad0w1nL1ght
2009-09-12 16:53:30
+8
A:
One of the big features of jqGrid 3.5 is integration with jQuery UI Themes. You can build and/or select a theme from here. Then just add a reference to it in your page:
<link rel="stylesheet" type="text/css" href="../css/redmond/jquery-ui-1.7.2.custom.css"/>
This will get you a grid that looks very good, with a minimum of effort.
Does that solve your problem or do you need to overhaul the grid look-and-feel even more?
Justin Ethier
2009-09-15 21:26:12
yeah this a very cool tool ,but it has certain limitations,you cant resolve any styling problem from there.
Sad0w1nL1ght
2009-09-16 12:03:34
Agreed, but it is much nicer than what you get out-of-the-box with jqGrid. From there it depends on your needs whether jQuery themes are good enough or if you have to roll your own CSS.
Justin Ethier
2009-09-16 13:20:39
+2
A:
To elaborate on what Justin Ethier says...
Since jqGrid uses Jquery-UI themes, the best way to change the appearance of the grid would be to make a custom theme.
I would strongly recommend that you see if that works for you before attempt to modify the css after the fact... although you can do that as well, if the jquery-ui theme look is too confining for you.
r00fus
2009-09-21 19:27:21