10301

While upgrading from jqrid4.6 to 4.13.5 facing issue in creating a dynamic dropdown with Unique valu

Question:

Trying to create a demo to show dynamic dropdown for Field-source, client but data is returning null.

<pre class="snippet-code-js lang-js prettyprint-override"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> var columnNameArrayForColumnFilter=["source","name"]; $(function () { "use strict"; var mydata = [ {id:"1", invdate:"720:0:0",name:"test", source:"note1", amount:"200.00",tax:"10.00",total:"210.00"}, {id:"2", invdate:"34:09:0",name:"test2", source:"note2", amount:"300.00",tax:"20.00",total:"320.00"}, {id:"3", invdate:"0:0:0",name:"test3", source:"note1", amount:"400.00",tax:"30.00",total:"430.00"}, {id:"4", invdate:"90:08:8",name:"test4", source:"note2", amount:"200.00",tax:"10.00",total:"210.00"}, {id:"5", invdate:"09:34:2",name:"test4", source:"note3", amount:"300.00",tax:"20.00",total:"320.00"}, {id:"6", invdate:"80:12:02",name:"test6", source:"note3", amount:"400.00",tax:"30.00",total:"430.00"}, {id:"7", invdate:"80:12:01",name:"test7", source:"note2", amount:"200.00",tax:"10.00",total:"210.00"}, {id:"8", invdate:"112:23:6",name:"test2", source:"note2", amount:"300.00",tax:"20.00",total:"320.00"}, {id:"9", invdate:"80:12:1 ",name:"test9", source:"note1", amount:"400.00",tax:"30.00",total:"430.00"}, {id:"10",invdate:"112:34:2",name:"test1",source:"note3",amount:"500.00",tax:"30.00",total:"530.00"}, {id:"11",invdate:"114:23:2",name:"test11",source:"note2",amount:"500.00",tax:"30.00",total:"530.00"}, {id:"13",invdate:"80:12:4 ",name:"test11",source:"note2",amount:"500.00",tax:"30.00",total:"530.00"}, {id:"14",invdate:"0:1:0",name:"test11",source:"note12",amount:"500.00",tax:"30.00",total:"530.00"} , {id:"15",invdate:"80:12:3",name:"test11",source:"note12",amount:"500.00",tax:"30.00",total:"530.00"} ]; $("#grid").jqGrid({ data: mydata, colNames:['Inv No','Duration', 'Client', 'Amount','Tax','Total','source'], colModel:[ {name:'id',index:'id', search:false,width:65, sorttype: 'int'}, {name:'invdate',index:'invdate', width:120, align:'center', sorttype:'datetime', datefmt:'H:i:s',searchoptions: { sopt:['inbetween','eq','lt','le','gt','ge'] }}, {name:'name',index:'name', width:90,search:true,}, {name:'amount',index:'amount', width:70, formatter:'number', align:"right",search:false,}, {name:'tax',index:'tax', width:60, formatter:'number', align:"right",search:false,}, {name:'total',index:'total', width:60, formatter:'number',align:"right",search:false,}, {name:'source',index:'source', width:100, search:true,} ], pager: true, autoencode: true, viewrecords: true, rowNum: 10, rowList: [5, 10, 20, "10000:All" ], caption: "Demonstration custom searching operation (Duration Range)", customSortOperations: { inbetween: { operand: "inbetween", text: "in between", filter: function (options) { } } } }).jqGrid("filterToolbar", {stringResult: true, searchOnEnter: true, searchOperators : true}); applyColumnFilterOnGrid(columnNameArrayForColumnFilter,'grid'); }); function applyColumnFilterOnGrid(columnNameArrayForColumnFilterInGrid) { for(var i=0;i<columnNameArrayForColumnFilterInGrid.length;i++) { setSearchSelect.call("#grid",columnNameArrayForColumnFilterInGrid[i]); } } // this function return unique value for column filter on grid var getUniqueNames = function(columnName) { var data = $('#grid').jqGrid('getGridParam', 'data'); var uniqueTexts = [], text, textsMap = {}, i; for (i = 0; i < data.length; i++) { text = data[i][columnName]; if (text !== undefined && textsMap[text] === undefined) { // to test whether the texts is unique we place it in the map. textsMap[text] = true; uniqueTexts.push(text); } } return uniqueTexts; } // this method add All value in column filter values and return value map var buildSearchSelect = function(uniqueNames) { var values=":All"; $.each (uniqueNames, function() { values += "," + this + ":" + this; }); return values; }; // this function is create drop down for column filter functionlity on grid and set values var setSearchSelect = function(columnName) { $("#grid").jqGrid("setColProp", columnName, { stype:"select", searchoptions: { value:buildSearchSelect(getUniqueNames.call("#grid",columnName)), sopt:["eq"] } } ); }; <pre class="snippet-code-css lang-css prettyprint-override"> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/redmond/jquery-ui.css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <!--<link rel="stylesheet" href="../jqGrid/css/ui.jqgrid.css">--> <link rel="stylesheet" href="http://www.ok-soft-gmbh.com/jqGrid/OK/ui.jqgrid.css"> <pre class="snippet-code-html lang-html prettyprint-override"><html lang="en"> <head> </head> <body> <div id="outerDiv" style="margin:5px;"> <table id="grid"></table> </div> </body> </html>

When I try to upgrade from 4.6 to 4.13.5 .. my existing dynamic dropdown unique values get disturbed.

Answer1:

The current code has some simple errors like the usage of $("grid") instead of $("#grid") inside of getUniqueNames and setSearchSelect and creating filterToolbar before filling searchoptions.value with the data: you call applyColumnFilterOnGrid after filterToolbar instead of before filterToolbar.

The next problem exists in the buildSearchSelect, which I published originally in <a href="https://stackoverflow.com/a/5329014/315935" rel="nofollow">the old answer</a>. You changed the line

<pre class="lang-js prettyprint-override">values += ";" + this + ":" + this;

to

<pre class="lang-js prettyprint-override">values += "," + this + ":" + this;

which is wrong. One should use ; instead of , as the separator (see <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config#colmodel_options" rel="nofollow">the documentation</a> of jqGrid 4.6). If you replace "," to ";" then the problem will be solved. In general you can use , instead of ; as the separator in the value, but you should inform jqGrid about that by usage delimiter: "," option:

<pre class="lang-js prettyprint-override">var setSearchSelect = function(columnName) { $("#grid").jqGrid("setColProp", columnName, { stype:"select", searchoptions: { delimiter: ",", value:buildSearchSelect(getUniqueNames.call("#grid",columnName)), sopt:["eq"] } } ); };

Recommend

  • Jqgrid Pass select rows column values to dataurl
  • jqgrid open subgrid only if there is some data
  • jqgrid - error when moving from 1 page to another
  • jqGrid: Search with smaller set of searchoptions does not work
  • jqGrid: Combining sortableRows and gridDnD (Duplicate Rows)
  • free jqGrid search parameter disappearing in filterToolbar
  • Having trouble initiating an array in a structure
  • JqGrid Select Box in a cell
  • Pass by Value and Pass by Reference
  • WooCommerce creating Product Custom Attributes fields programatically?
  • JQgrid : Change entire row's font color if one column is filled
  • Implicit property animations do not work with CAReplicatorLayer?
  • Single virtual attribute definition for multiple fields
  • jQueryUI dialog replacement for confirm?
  • Are there “Dynamic Playlists” of unit tests in Visual Studio?
  • Insertion large number of Entities into SQL Server 2012 [duplicate]
  • Appium MobileElement swipe returns unknown server error
  • SQL: Getting the physical size of a subset of a table
  • Time out Error in send mail
  • ApplePay PKPaymentAuthorizationViewController always shows processing
  • pip in virtualenv gets ConnectTimeoutError
  • Spring Cloud Microservice Architecture Confusion
  • Marklogic : Query response time is very high
  • Transactional Create with Validation in ServiceStack Redis Client
  • Meteor helpers not available in Angular template
  • Handling un-mapped Rest path
  • PHPUnit_Framework_TestCase class is not available. Fix… - Makegood , Eclipse
  • PHP - How to update data to MySQL when click a radio button
  • angularjs unit test when to use $rootScope.$new()
  • How to show dropdown in excel using jrxml (jasper api)?
  • Rearranging Cells in UITableView Bug & Saving Changes
  • File upload with ng-file-upload throwing error
  • Proper way to use connect-multiparty with express.js?
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • python draw pie shapes with colour filled
  • Sorting a 2D array using the second column C++
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal