jQuery UI Widgets Forums Grid getrowid returns index when using dropdownlist

This topic contains 3 replies, has 3 voices, and was last updated by  Dimitar 6 years, 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • HippoTraxius

    When I use the grid whit a columntype ‘dropdownlist’ and select a value in the dropdownlist the ‘getrowid’ returns the index of the row and not the id. Wheb the columntype is ‘custom’ then the id is returned. What is going wrong in my code? Or do I always need to use the type ‘custom’?

    code example:
    -select a row and press the button
    -select from dropdownlist
    -select a row and press the button

    do the same whit columntype changed to ‘custom’

    <!DOCTYPE html>
    <html lang="en">
    	<title id='Description'></title>
    	<link rel="stylesheet" href="/js/jqwidgets/styles/jqx.base.css" type="text/css"/>
    	<script type="text/javascript" src="/js/jquery/jquery-2.2.0.min.js"></script>
    	<script type="text/javascript" src="/js/jqwidgets/jqxcore.js"></script>
    	<script type="text/javascript" src="/js/jqwidgets/jqxdata.js"></script>
    	<script type="text/javascript" src="/js/jqwidgets/jqxbuttons.js"></script>
    	<script type="text/javascript" src="/js/jqwidgets/jqxscrollbar.js"></script>
    	<script type="text/javascript" src="/js/jqwidgets/jqxlistbox.js"></script>
    	<script type="text/javascript" src="/js/jqwidgets/jqxdropdownlist.js"></script>
    	<script type="text/javascript" src="/js/jqwidgets/jqxgrid.js"></script>
    	<script type="text/javascript" src="/js/jqwidgets/jqxgrid.selection.js"></script>
    	<script type="text/javascript" src="/js/jqwidgets/jqxgrid.edit.js"></script>
    	<script type="text/javascript">
    		$(document).ready(function () {
    			var countries = [
    				{value: "CL", label: "Chile"},
    				{value: "CN", label: "China"},
    				{value: "CO", label: "Columbia"},
    				{value: "CR", label: "Costa Rica"},
    				{value: "HR", label: "Croatia (Hrvatska)"},
    				{value: "CU", label: "Cuba"}
    			var countriesSource  =
    					datatype: "array",
    					datafields: [
    						{name: 'label', type: 'string'},
    						{name: 'value', type: 'string'}
    					localdata: countries
    			var countriesAdapter = new $.jqx.dataAdapter(countriesSource, {
    				autoBind: true
    			var source      =
    					localdata: [
    						{id: 100, name: "Test UK", countryCode: "UK"},
    						{id: 101, name: "Test US", countryCode: "US"},
    						{id: 102, name: "Test DE", countryCode: "DE"},
    						{id: 103, name: "Test FR", countryCode: "FR"},
    						{id: 104, name: "Test IN", countryCode: "IN"},
    						{id: 105, name: "Test HK", countryCode: "HK"}
    					datafields: [
    						{name: 'id', type: 'int'},
    						{name: 'name', type: 'string'},
    						{name: 'countryCode', type: 'string'},
    					id: 'id',
    					datatype: "array"
    			var dataAdapter = new $.jqx.dataAdapter(source);
    					width: 400,
    					height: 250,
    					source: dataAdapter,
    					editable: true,
    					editmode: 'dblclick',
    					columns: [
    						{text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 200},
    							text: 'Country Code',
    							columntype: 'dropdownlist',
    							filtertype: 'checkedlist',
    							datafield: 'countryCode',
    							width: 200,
    							createeditor: function (row, value, editor) {
    									source: countriesAdapter,
    									autoOpen: true,
    									displayMember: 'label',
    									valueMember: 'value'
    			$("#showRowId").jqxButton({height: '25px', width: '80px'});
    			$("#showRowId").bind('click', function () {
    				var selectedRowIndex = $("#jqxgrid").jqxGrid('getselectedrowindex');
    				var id               = $("#jqxgrid").jqxGrid('getrowid', selectedRowIndex);
    				var rowData          = $('#jqxgrid').jqxGrid('getrowdata', selectedRowIndex);
    			$("#jqxgrid").on('rowselect', function (event) {
    				var rowBoundIndex = event.args.rowindex;
    				var row           = event.args.row;
    <body class='default'>
    <div id="jqxgrid"></div>
    	<input type="button" id="showRowId" value="ID"/>
    		<td>Button getrowid:</td>
    		<td><span id="getRowId"></span></td>
    		<td>Button getrowdata (id):</td>
    		<td><span id="getRowData"></span></td>
    		<td><span id="rowselect"></td>


    Hello HippoTraxius,

    Thank you for your feedback. We are aware of this issue and will try to fix it for a future release of jQWidgets.

    Best Regards,

    jQWidgets team


    Is this issue resolved? Because i am also facing the same issue.


    Hello kantariyaraj,

    Unfortunately, this issue has still not been resolved. There is a work item on the matter and we hope it will be fixed in a future version of our product.

    Best Regards,

    jQWidgets team

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.