StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>jqGrid use jQuery UI class 'ui-priority-secondary' as the default value of the <code>altclass</code> parameter. The class are described in <a href="http://jqueryui.com/docs/Theming/API#Interaction_Cues">jQuery UI documentation</a> as</p> <blockquote> <p>Class to be applied to a priority-2 button in situations where button hierarchy is needed. Applies normal weight text and slight transparency to element.</p> </blockquote> <p>It is of cause not exactly the description of the zebra striping, but there are not so many standard classes which can be used. Unfortunately even rows having 'ui-priority-secondary' looks not so different from odd rows in the most themes. So to improve visibility one <em>have to</em> define the class <code>altclass</code> manually.</p> <p>One of the most native ways to make even rows seen different as the odd rows is the usage of different background color. The problem is that <code>ui-widget-content</code> class use an background image defined with <code>background</code> CSS style, so the most native setting of <code>background-color</code> will not work. To fix the problem one have to do one from the things 1) remove <code>ui-widget-content</code> class 2) use <code>background</code> CSS style instead of <code>background-color</code> 2) use <code>background-image:none</code> together with the <code>background-color</code> style. The simplest way to do this is define your custom <code>AltRowClass</code> as </p> <pre><code>.myAltRowClass { background: #DDDDDC; } </code></pre> <p>or</p> <pre><code>.myAltRowClass { background-color: #DDDDDC; background-image: none; } </code></pre> <p>and then to use <code>altRows:true</code> and <code>altclass:'myAltRowClass'</code> parameters of jqGrid.</p> <p>Another way is to do the same <strong>without</strong> <code>altRows</code> and <code>altclass</code> parameters:</p> <pre><code>loadComplete: function() { $("tr.jqgrow:odd").css("background", "#DDDDDC"); } </code></pre> <p>In the case you will has some small disadvantages in hovering or selecting the even lines. The following code works better, but it do the same what <code>altRows:true</code> and <code>altclass:'myAltRowClass'</code> do:</p> <pre><code>loadComplete: function() { $("tr.jqgrow:odd").addClass('myAltRowClass'); } </code></pre> <p>Of cause the background color and other CSS styles attributes which you can set for the even rows are depend from the theme which you use, so if you plan to use ThemeRoller you will have to choose <code>altclass</code> for every theme, which you will allow to choose.</p> <p><strong>UPDATED</strong>: Just seen that I forgot to include the link to the demo file which demonstrate what I wrote live. The demo is <a href="http://www.ok-soft-gmbh.com/jqGrid/altclassTests.htm">here</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload