I have this JQGRID:
<pre class=”default prettyprint prettyprinted”><span class="pln">$</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span><span class="pln">
$</span><span class="pun">.</span><span class="pln">jgrid</span><span class="pun">.</span><span class="pln">defaults</span><span class="pun">.</span><span class="pln">width </span><span class="pun">=</span> <span class="lit">780</span><span class="pun">;</span><span class="pln">
$</span><span class="pun">.</span><span class="pln">jgrid</span><span class="pun">.</span><span class="pln">defaults</span><span class="pun">.</span><span class="pln">responsive </span><span class="pun">=</span> <span class="kwd">true</span><span class="pun">;</span><span class="pln">
$</span><span class="pun">.</span><span class="pln">jgrid</span><span class="pun">.</span><span class="pln">defaults</span><span class="pun">.</span><span class="pln">styleUI </span><span class="pun">=</span> <span class="str">'Bootstrap'</span><span class="pun">;</span><span class="pln">
$</span><span class="pun">.</span><span class="pln">jgrid</span><span class="pun">.</span><span class="pln">styleUI</span><span class="pun">.</span><span class="typ">Bootstrap</span><span class="pun">.</span><span class="kwd">base</span><span class="pun">.</span><span class="pln">rowTable </span><span class="pun">=</span> <span class="str">"table table-bordered table-striped"</span><span class="pun">;</span><span class="pln">
$</span><span class="pun">(</span><span class="str">"#gridUsuario"</span><span class="pun">).</span><span class="pln">jqGrid</span><span class="pun">({</span><span class="pln">
url</span><span class="pun">:</span> <span class="str">'@Url.Action("GetUsers", "Account", new { area = "Security" })'</span><span class="pun">,</span><span class="pln">
mtype</span><span class="pun">:</span> <span class="str">"GET"</span><span class="pun">,</span><span class="pln">
datatype</span><span class="pun">:</span> <span class="str">"json"</span><span class="pun">,</span><span class="pln">
colModel</span><span class="pun">:</span> <span class="pun">[</span>
<span class="pun">{</span><span class="pln"> label</span><span class="pun">:</span> <span class="str">'ID'</span><span class="pun">,</span><span class="pln"> name</span><span class="pun">:</span> <span class="str">'ID'</span><span class="pun">,</span><span class="pln"> key</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span> <span class="lit">70</span> <span class="pun">},</span>
<span class="pun">{</span><span class="pln"> label</span><span class="pun">:</span> <span class="str">'Vigente'</span><span class="pun">,</span><span class="pln"> name</span><span class="pun">:</span> <span class="str">'UsuarioVigente'</span><span class="pun">,</span><span class="pln"> hidden</span><span class="pun">:</span> <span class="kwd">true</span> <span class="pun">},</span>
<span class="pun">{</span><span class="pln"> label</span><span class="pun">:</span> <span class="str">'Nombre Completo'</span><span class="pun">,</span><span class="pln"> name</span><span class="pun">:</span> <span class="str">'FullName'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span> <span class="lit">200</span><span class="pun">,</span><span class="pln"> edittype</span><span class="pun">:</span> <span class="str">'text'</span><span class="pun">,</span><span class="pln"> editable</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln"> editrules</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> required</span><span class="pun">:</span> <span class="kwd">true</span> <span class="pun">},</span><span class="pln"> editoptions</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> size</span><span class="pun">:</span> <span class="lit">50</span><span class="pun">,</span><span class="pln"> maxlength</span><span class="pun">:</span> <span class="lit">100</span> <span class="pun">},</span><span class="pln"> formoptions</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> elmprefix</span><span class="pun">:</span> <span class="str">'(*)'</span> <span class="pun">}</span> <span class="pun">},</span>
<span class="pun">{</span><span class="pln"> label</span><span class="pun">:</span> <span class="str">'Login'</span><span class="pun">,</span><span class="pln"> name</span><span class="pun">:</span> <span class="str">'UserName'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span> <span class="lit">120</span><span class="pun">,</span><span class="pln"> edittype</span><span class="pun">:</span> <span class="str">'text'</span><span class="pun">,</span><span class="pln"> editable</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln"> editrules</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> required</span><span class="pun">:</span> <span class="kwd">true</span> <span class="pun">},</span><span class="pln"> editoptions</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> size</span><span class="pun">:</span> <span class="lit">30</span><span class="pun">,</span><span class="pln"> maxlength</span><span class="pun">:</span> <span class="lit">50</span> <span class="pun">},</span><span class="pln"> formoptions</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> elmprefix</span><span class="pun">:</span> <span class="str">'(*)'</span> <span class="pun">}</span> <span class="pun">},</span>
<span class="pun">{</span><span class="pln"> label</span><span class="pun">:</span> <span class="str">'Password'</span><span class="pun">,</span><span class="pln"> name</span><span class="pun">:</span> <span class="str">'Password'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span> <span class="lit">100</span><span class="pun">,</span><span class="pln"> edittype</span><span class="pun">:</span> <span class="str">'password'</span><span class="pun">,</span><span class="pln"> editable</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln"> hidden</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln"> editrules</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> required</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln"> edithidden</span><span class="pun">:</span> <span class="kwd">true</span> <span class="pun">},</span><span class="pln"> editoptions</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> size</span><span class="pun">:</span> <span class="lit">30</span><span class="pun">,</span><span class="pln"> maxlength</span><span class="pun">:</span> <span class="lit">50</span> <span class="pun">},</span><span class="pln"> formoptions</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> elmprefix</span><span class="pun">:</span> <span class="str">'(*)'</span> <span class="pun">}</span> <span class="pun">},</span>
<span class="pun">{</span><span class="pln"> label</span><span class="pun">:</span> <span class="str">'E-mail'</span><span class="pun">,</span><span class="pln"> name</span><span class="pun">:</span> <span class="str">'Email'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span> <span class="lit">240</span><span class="pun">,</span><span class="pln"> edittype</span><span class="pun">:</span> <span class="str">'text'</span><span class="pun">,</span><span class="pln"> editable</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln"> editrules</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> required</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln"> email</span><span class="pun">:</span> <span class="kwd">true</span> <span class="pun">},</span><span class="pln"> editoptions</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> size</span><span class="pun">:</span> <span class="lit">50</span><span class="pun">,</span><span class="pln"> maxlength</span><span class="pun">:</span> <span class="lit">100</span> <span class="pun">},</span><span class="pln"> formoptions</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> elmprefix</span><span class="pun">:</span> <span class="str">'(*)'</span> <span class="pun">}</span> <span class="pun">},</span>
<span class="pun">{</span><span class="pln"> label</span><span class="pun">:</span> <span class="str">'Teléfono'</span><span class="pun">,</span><span class="pln"> name</span><span class="pun">:</span> <span class="str">'PhoneNumber'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span> <span class="lit">120</span><span class="pun">,</span><span class="pln"> edittype</span><span class="pun">:</span> <span class="str">'text'</span><span class="pun">,</span><span class="pln"> editable</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln"> editoptions</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> size</span><span class="pun">:</span> <span class="lit">30</span><span class="pun">,</span><span class="pln"> maxlength</span><span class="pun">:</span> <span class="lit">50</span> <span class="pun">}</span> <span class="pun">},</span>
<span class="pun">{</span><span class="pln"> label</span><span class="pun">:</span> <span class="str">'Ciudad'</span><span class="pun">,</span><span class="pln"> name</span><span class="pun">:</span> <span class="str">'Hometown'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span> <span class="lit">150</span><span class="pun">,</span><span class="pln"> edittype</span><span class="pun">:</span> <span class="str">'text'</span><span class="pun">,</span><span class="pln"> editable</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln"> editoptions</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> size</span><span class="pun">:</span> <span class="lit">30</span><span class="pun">,</span><span class="pln"> maxlength</span><span class="pun">:</span> <span class="lit">50</span> <span class="pun">}</span> <span class="pun">},</span>
<span class="pun">{</span><span class="pln"> label</span><span class="pun">:</span> <span class="str">'Fecha Registro'</span><span class="pun">,</span><span class="pln"> name</span><span class="pun">:</span> <span class="str">'UsuarioCreadoEn'</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">:</span> <span class="lit">120</span><span class="pun">,</span><span class="pln"> formatter</span><span class="pun">:</span> <span class="str">"date"</span><span class="pun">,</span><span class="pln"> formatoptions</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> srcformat</span><span class="pun">:</span> <span class="str">"ISO8601Long"</span><span class="pun">,</span><span class="pln"> newformat</span><span class="pun">:</span> <span class="str">"d/m/Y H:i"</span> <span class="pun">}</span> <span class="pun">}</span>
<span class="pun">],</span><span class="pln">
viewrecords</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln">
shrinkToFit</span><span class="pun">:</span> <span class="kwd">false</span><span class="pun">,</span><span class="pln">
autowidth</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln">
multiselect</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln">
rowNum</span><span class="pun">:</span> <span class="lit">20</span><span class="pun">,</span><span class="pln">
rowList</span><span class="pun">:</span> <span class="pun">[</span><span class="lit">10</span><span class="pun">,</span> <span class="lit">20</span><span class="pun">,</span> <span class="lit">30</span><span class="pun">],</span><span class="pln">
gridview</span><span class="pun">:</span> <span class="kwd">true</span><span class="pun">,</span><span class="pln">
pager</span><span class="pun">:</span> <span class="str">"#gridPager"</span><span class="pun">,</span><span class="pln">
sortname</span><span class="pun">:</span> <span class="str">"FullName"</span><span class="pun">,</span><span class="pln">
sortorder</span><span class="pun">:</span> <span class="str">"asc"</span><span class="pun">,</span><span class="pln">
beforeRequest</span><span class="pun">:</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>
<span class="kwd">var</span><span class="pln"> $PANEL </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#pnlGrid'</span><span class="pun">),</span><span class="pln">
$FOOTER </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'footer'</span><span class="pun">);</span>
<span class="com">// 125 = otros altos, como paddings y la fila de paginación</span><span class="pln">
$</span><span class="pun">(</span><span class="str">"#gridUsuario"</span><span class="pun">).</span><span class="pln">jqGrid</span><span class="pun">(</span><span class="str">'setGridHeight'</span><span class="pun">,</span><span class="pln"> $FOOTER</span><span class="pun">.</span><span class="pln">offset</span><span class="pun">().</span><span class="pln">top </span><span class="pun">-</span><span class="pln"> $PANEL</span><span class="pun">.</span><span class="pln">offset</span><span class="pun">().</span><span class="pln">top </span><span class="pun">-</span> <span class="lit">125</span><span class="pun">);</span>
<span class="pun">},</span><span class="pln">
rowattr</span><span class="pun">:</span> <span class="kwd">function</span> <span class="pun">(</span><span class="pln">rd</span><span class="pun">)</span> <span class="pun">{</span>
<span class="kwd">if</span> <span class="pun">(!</span><span class="pln">rd</span><span class="pun">.</span><span class="typ">UsuarioVigente</span><span class="pun">)</span> <span class="pun">{</span>
<span class="kwd">return</span> <span class="pun">{</span> <span class="str">"class"</span><span class="pun">:</span> <span class="str">"no-vigente"</span> <span class="pun">};</span>
<span class="pun">}</span>
<span class="pun">}</span>
<span class="pun">});</span>
All works perfect but responsive behaviour.
At bottom toolbar, I have several actions created with navButtonAdd method.
When I test responsiveness, the action icons at bottom toolbar are replaced by a button with “Actions…” label. When clicked, all action items pop up. That is perfect, however, the paging does not behave the same, causing paging icons to appear over the “Actions…” button.
Is this a bug in JQGRID? is there a way to solve this?
Thanks
Jaime
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top