jQuery UI Widgets › Forums › Grid › getrowid returns index when using dropdownlist

Tagged: , , , , , , , , , ,

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    getrowid returns index when using dropdownlist Posts
  • September 14, 2016 at 8:21 am getrowid returns index when using dropdownlist #87317

    HippoTraxius
    Participant

    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">
<head>
	<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);
			$("#jqxgrid").jqxGrid(
				{
					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) {
								editor.jqxDropDownList({
									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);

				$('#getRowId').html(id);
				$('#getRowData').html(rowData.id);

			});

			$("#jqxgrid").on('rowselect', function (event) {
				var rowBoundIndex = event.args.rowindex;
				var row           = event.args.row;
				$('#getRowId').html('');
				$('#getRowData').html('');
				$('#rowselect').html(row.id);
			});

		});
	</script>
</head>
<body class='default'>
<div id="jqxgrid"></div>
<br>
<div>
	<input type="button" id="showRowId" value="ID"/>
</div>
<table>
	<tr>
		<td>Button getrowid:</td>
		<td><span id="getRowId"></span></td>
	</tr>
	<tr>
		<td>Button getrowdata (id):</td>
		<td><span id="getRowData"></span></td>
	</tr>
	<tr>
		<td>Rowselect</td>
		<td><span id="rowselect"></td>
	</tr>
</table>
</body>
</html>
    September 14, 2016 at 11:44 am getrowid returns index when using dropdownlist #87323

    Dimitar
    Participant

    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,
    Dimitar

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

    February 8, 2017 at 12:40 pm getrowid returns index when using dropdownlist #91400

    kantariyaraj
    Participant

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

    February 9, 2017 at 7:22 am getrowid returns index when using dropdownlist #91426

    Dimitar
    Participant

    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,
    Dimitar

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

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

You must be logged in to reply to this topic.