Databases
StackOverflow2013
Postsdbo
POjqGrid colmodel change in loadComplete
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjqGrid colmodel change in loadComplete
    text
    copied!<p>after 3 hours of googling I ask your help.</p> <p>I have a jqGrid on a page.</p> <p>grid's important options:</p> <pre class="lang-js prettyprint-override"><code>$("#listU05").jqGrid({ url:'u05json.json', datatype: 'json', mtype: 'POST', colModel :[ {name:'Thema', index:'Thema', width:55}, .... loadComplete: function(data) { jQuery("#listU05").jqGrid.setColProp('Thema', { stype: 'select', searchoptions: { value:"a:a;b:b" } } ); </code></pre> <p>after data loaded I have [Loading...] rectangle on my grid and no any reaction to code. I see in debugger that code is active but I have no any visible result in colModel, and I have the rectangle.</p> <p>What is the problem?</p> <p>Thanks a lot for your help.</p> <p><strong>UPDATED</strong>: Current used code which still not work is below</p> <pre class="lang-html prettyprint-override"><code>&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="ISO-8859-1"%&gt; &lt;%@taglib uri="http://www.springframework.org/tags" prefix="spring"%&gt; &lt;%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%&gt; &lt;%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt; &lt;title&gt;&lt;spring:message code="u05.TITLE"/&gt;&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.8.18.custom.css" /&gt; &lt;link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /&gt; &lt;script src="js/jquery.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/i18n/grid.locale-en.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/jquery.jqGrid.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ var getUniqueNames = function(grid, columnName, data, dataIndex) { // var data = grid.getGridParam('data'); var uniqueTexts = [], text, textsMap = {}, i; for (i = 0; i &lt; data.rows.length; i++) { text = data.rows[i].cell[dataIndex]; if (text !== undefined &amp;&amp; textsMap[text] === undefined) { textsMap[text] = true; uniqueTexts.push(text); } } return uniqueTexts; } buildSearchSelect = function(uniqueNames) { var values=":All"; $.each (uniqueNames, function() { values += ";" + this + ":" + this; }); return values; } setSearchSelect = function(grid, columnName, data, dataIndex) { grid.setColProp(columnName, { stype: 'select', searchoptions: { value:'a:a', sopt:['eq'] } }); } $("#listU05").jqGrid({ url:'u05json.json', datatype: 'json', mtype: 'POST', colNames:[ '&lt;spring:message code="u05.Column.Thema"/&gt;', '&lt;spring:message code="u05.Column.SubThema"/&gt;', '&lt;spring:message code="u05.Column.status1"/&gt;', '&lt;spring:message code="u05.Column.wie"/&gt;', '&lt;spring:message code="u05.Column.KW"/&gt;', '&lt;spring:message code="u05.Column.Jahr"/&gt;', '&lt;spring:message code="u05.Column.kampagne"/&gt;', '&lt;spring:message code="u05.Column.ergebnis"/&gt;', '&lt;spring:message code="u05.Column.B1"/&gt;', '&lt;spring:message code="u05.Column.B2"/&gt;', '&lt;spring:message code="u05.Column.personal"/&gt;', '&lt;spring:message code="u05.Column.qualifikation"/&gt;', '&lt;spring:message code="u05.Column.iv"/&gt;', '&lt;spring:message code="u05.Column.objekt"/&gt;', '&lt;spring:message code="u05.Column.NR"/&gt;', '&lt;spring:message code="u05.Column.ObjektArt"/&gt;', '&lt;spring:message code="u05.Column.vorname"/&gt;', '&lt;spring:message code="u05.Column.name"/&gt;', '&lt;spring:message code="u05.Column.Z1"/&gt;', '&lt;spring:message code="u05.Column.Z2"/&gt;', '&lt;spring:message code="u05.Column.Z3"/&gt;', '&lt;spring:message code="u05.Column.Z4"/&gt;', '&lt;spring:message code="u05.Column.team"/&gt;' ], colModel :[ {name:'Thema', index:'u_05_01.Thema', width:55}, {name:'u_05_01.SubThema', index:'u_05_01.SubThema', width:55, stype: 'select', searchoptions:{ value:":\*All${subThemaOptions}" }}, {name:'u_05_01.status1', index:'u_05_01.status1', width:55, stype: 'select', searchoptions:{ value:":\*All${status1Options}" }}, {name:'u_05_01.wie', index:'u_05_01.wie', width:55, stype: 'select', searchoptions:{ value:":\*All${wieOptions}" }}, {name:'u_05_01.KW', index:'u_05_01.KW', width:55, stype: 'select', searchoptions:{ value:":\*All${kwOptions}" }}, {name:'Jahr', index:'u_05_01.Jahr', width:55, stype: 'select', searchoptions:{ value:":\*All${jahrOptions}" }}, {name:'u_05_01.kampagne', index:'u_05_01.kampagne', width:55, stype: 'select', searchoptions:{ value:":\*All${kampagneOptions}" }}, {name:'u_05_01.ergebnis', index:'u_05_01.ergebnis', width:55, stype: 'select', searchoptions:{ value:":\*All${ergebnisOptions}" }}, {name:'u_05_01.B1', index:'u_05_01.B1', width:55, stype: 'select', searchoptions:{ value:":\*All${b1Options}" }}, {name:'u_05_01.B2', index:'u_05_01.B2', width:55, stype: 'select', searchoptions:{ value:":\*All${b2Options}" }}, {name:'u_03.personal', index:'u_03.personal', width:55, stype: 'select', searchoptions:{ value:":\*All${personalOptions}" }}, {name:'u_03.qualifikation', index:'u_03.qualifikation', width:55, stype: 'select', searchoptions:{ value:":\*All${qualifikationOptions}" }}, {name:'u_03.iv', index:'u_03.iv', width:55, stype: 'select', searchoptions:{ value:":\*All${ivOptions}" }}, {name:'u_05_01.objekt', index:'u_05_01.objekt', width:55, stype: 'select', searchoptions:{ value:":\*All${objektOptions}" }}, {name:'u_05_01.NR', index:'u_05_01.NR', width:55, stype: 'select', searchoptions:{ value:":\*All${nrOptions}" }}, {name:'u_05_01.ObjektArt', index:'u_05_01.ObjektArt', width:55, stype: 'select', searchoptions:{ value:":\*All${objektArtOptions}" }}, {name:'u_06.vorname', index:'u_06.vorname', width:55, stype: 'select', searchoptions:{ value:":\*All${vornameOptions}" }}, {name:'u_06.name', index:'u_06.name', width:55, stype: 'select', searchoptions:{ value:":\*All${nameOptions}" }}, {name:'u_05_01.Z1', index:'u_05_01.Z1', width:55, stype: 'select', searchoptions:{ value:":\*All${z1Options}" }}, {name:'u_05_01.Z2', index:'u_05_01.Z2', width:55, stype: 'select', searchoptions:{ value:":\*All${z2Options}" }}, {name:'u_05_01.Z3', index:'u_05_01.Z3', width:55, stype: 'select', searchoptions:{ value:":\*All${z3Options}" }}, {name:'u_05_01.Z4', index:'u_05_01.Z4', width:55, stype: 'select', searchoptions:{ value:":\*All${z4Options}" }}, {name:'u_05_01.team', index:'u_05_01.team', width:55, stype: 'select', searchoptions:{ value:":\*All${teamOptions}" }} ], pager: '#pager', rowNum:100, rowList:[10,50,100], sortname: 'u_05_01.Thema', sortorder: 'asc', viewrecords: true, gridview: true, height: "400px", caption: '&lt;spring:message code="u05.TITLE"/&gt;', loadComplete: function(data) { $(this).jqGrid('setColProp', 'Thema', { stype: 'select', searchoptions: { value:"a:a" } }); } }); jQuery("#listU05").jqGrid('navGrid','#pager',{del:false,add:false,edit:false,search:false}); jQuery("#listU05").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false}); // Loop for each select element on the page. $("select").each(function() { // Keep track of the selected option. var selectedValue = $(this).val(); // Sort all the options by text. I could easily sort these by val. $(this).html($("option", $(this)).sort(function(a, b) { return a.text == b.text ? 0 : a.text &lt; b.text ? -1 : 1 })); // Select one option. $(this).val(selectedValue); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form:form method="post" commandName="filterU05" action="u05" name="formU05"&gt; &lt;div class="ui-widget ui-widget-content ui-jqgrid"&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;&lt;spring:message code="u05.Filter.objekt"/&gt;/&lt;spring:message code="u05.Filter.Obj_Nr"/&gt;&lt;/td&gt; &lt;td&gt; &lt;form:input path="objekt" style="width:130px" class="ui-widget-content"/&gt; &lt;form:input path="obj_Nr" style="width:40px" class="ui-widget-content"/&gt; &lt;/td&gt; &lt;td&gt;&lt;spring:message code="u05.Filter.Jahr"/&gt;&lt;/td&gt; &lt;td&gt; &lt;form:input path="jahr" style="width:60px" class="ui-widget-content"/&gt; &lt;/td&gt; &lt;td&gt;&lt;spring:message code="u05.Filter.kampagne"/&gt;&lt;/td&gt; &lt;td&gt; &lt;form:select path="kampagne" items="${listKampagne}" itemValue="value" itemLabel="value" style="width:180px" class="ui-widget-content"/&gt; &lt;/td&gt; &lt;td rowspan="3"&gt; &lt;input type="submit" name="doFilter" value="filter" style="width:60px; height:60px" class="ui-widget-content"/&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;spring:message code="u05.Filter.wie"/&gt;&lt;/td&gt; &lt;td&gt; &lt;form:input path="wie" style="width:80px" class="ui-widget-content"/&gt; &lt;/td&gt; &lt;td&gt;&lt;spring:message code="u05.Filter.KW"/&gt;&lt;/td&gt; &lt;td&gt; &lt;form:input path="kw" style="width:60px" class="ui-widget-content"/&gt; &lt;/td&gt; &lt;td&gt;&lt;spring:message code="u05.Filter.ergebnis"/&gt;&lt;/td&gt; &lt;td&gt; &lt;form:select path="ergebnis" items="${listErgebnis}" itemValue="value" itemLabel="value" style="width:180px" class="ui-widget-content"/&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;spring:message code="u05.Filter.ObjektArt"/&gt;&lt;/td&gt; &lt;td&gt; &lt;form:select path="objektArt" items="${listObjektTyp}" itemValue="value" itemLabel="value" style="width:180px" class="ui-widget-content"/&gt; &lt;/td&gt; &lt;td&gt;&lt;spring:message code="u05.Filter.status1"/&gt;&lt;/td&gt; &lt;td&gt; &lt;form:select path="status1" items="${listStatus1}" itemValue="value" itemLabel="value" style="width:60px" class="ui-widget-content"/&gt; &lt;/td&gt; &lt;td&gt;&lt;spring:message code="u05.Filter.name"/&gt;&lt;/td&gt; &lt;td&gt; &lt;form:select path="u06_name" items="${listName}" itemValue="value" itemLabel="value" style="width:180px" class="ui-widget-content"/&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;spring:message code="u05.Filter.team"/&gt;&lt;/td&gt; &lt;td&gt; &lt;form:select path="team" items="${listTeam}" itemValue="value" itemLabel="value" style="width:180px" class="ui-widget-content"/&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;br&gt; &lt;table id="listU05"&gt;&lt;tr&gt;&lt;td/&gt;&lt;/tr&gt;&lt;/table&gt; &lt;div id="pager"&gt;&lt;/div&gt; &lt;br&gt; &lt;div class="ui-widget ui-widget-content ui-jqgrid"&gt; &lt;table class="InputForm"&gt; &lt;tr&gt;&lt;td&gt; &lt;input type="submit" name="doExcel" value="Excel" style="width:60px" onClick="document.formU05.action='u05excel';return true;" class="ui-widget-content"/&gt; &lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/form:form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

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