Dropdown columns in the Grid

[DollyBMember]

Hi,

Please provide me an example for Grid with Dropdown columns.

Thankx
DollyB

[DimitarParticipant]

Hello DollyB,

Please check out the demo Customized Editors. The editor of the second column is a dropdown list.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[DollyBMember]

Hi Dimitar,
I have implemented the solution provided in the Customized Editors example. I am getting 3 errors when trying to edit the column.
<strong><span style="text-decoration:underline;">Error Details:</span></strong>
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; QS 4.2.4.0; QS 5.3.0.4; BTRS125009; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; MS-RTC LM 8; QS 4.2.4.0; QS 5.3.0.4; InfoPath.2)
Timestamp: Tue, 30 Oct 2012 04:50:42 UTC
Message: 'listBox' is null or not an object
Line: 1184
Char: 17
Code: 0
URI: http://marsvcd1.sw.ericsson.se:8085/eMatrix/jQuery/jqwidgets/jqxdropdownlist.js
Message: 'this.listBox' is null or not an object
Line: 773
Char: 13
Code: 0
URI: http://marsvcd1.sw.ericsson.se:8085/eMatrix/jQuery/jqwidgets/jqxdropdownlist.js
Message: 'self.editcell.editor.jqxDropDownList' is null or not an object
Line: 6430
Char: 41
Code: 0
URI: http://marsvcd1.sw.ericsson.se:8085/eMatrix/jQuery/jqwidgets/jqxgrid.js
<strong><span style="text-decoration:underline;">Included js files in the file I am working with:</span></strong>
<link rel="stylesheet" href="/eMatrix/jQuery/jqwidgets/styles/jqx.base.css" media="screen" />
    <link rel="stylesheet" href="/eMatrix/jQuery/jqwidgets/styles/jqx.classic.css" media="screen" />
    <link rel="stylesheet" href="/eMatrix/jQuery/styles/jqx.apireference.css" media="screen" />
    <link rel="stylesheet" href="/eMatrix/jQuery/styles/site.css" type="text/css" />
    <link rel="stylesheet" href="/eMatrix/jsp/mars/jquery/jqMars.css" type="text/css" />
    <script type="text/javascript" src="/eMatrix/jQuery/scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/eMatrix/js/json2.js"></script> 
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxpanel.js"></script>  
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="/eMatrix/jQuery/jqwidgets/jqxdropdownbutton.js"></script> 
<strong><span style="text-decoration:underline;">Implemented logic for dropdown column:</span></strong>
for (var attribute in attrList) {
		  i++;
		  row = {};
		  props = 	attrList [attribute];
		  row["datafield"] = attribute;
		  row["text"] =  props["Caption"];
		  row["width"] =  100;
		  if(props["Range Use"] == "true"){
			var rangeVals = props["Range Values"];
			var dropDownListSource =
			{
				localdata: rangeVals,
				datatype: "array",
				datafields: "Priority",
				id: attribute
			};
			//var dropdownListAdapter = new $.jqx.dataAdapter(dropDownListSource, { autoBind: true, async: false });
			var list = ['Germany', 'Brazil', 'France'];
			row["columntype"] = "dropdownlist";
			row["createeditor"] = function (row, column, editor) {
									editor.jqxDropDownList({ source: list });
								};
			row["cellvaluechanging"] = function (row, column, columntype, oldvalue, newvalue) {
							                // return the old value, if the new value is empty.
							                if (newvalue == "") return oldvalue;
							            };					
		  }
		  
		  GridColumns[i] = row;
	  }

I am working on jqwidgets 2.5 version.

[DimitarParticipant]

Hi DollyB,

Please make sure that your code runs in a $(document).ready(function(){});. This may be the cause for the errors.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts