jQWidgets Forums

Tagged: jqxGrid; jqxDropDownList

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 10 years, 4 months ago.

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

Author

jqxgrid not firing cellvaluechanged event after jqxdropdownlist select Posts
February 9, 2015 at 6:15 pm jqxgrid not firing cellvaluechanged event after jqxdropdownlist select #66779

sdidrik
Participant

I have a jqxgrid with a jqxdropdownlist. Everything works great but when I select a new value in a dropdown the cellvaluechanged event does not fire until I click another cell. I tried using a cell editor event but could not get the row id from the event. Any help is REALLY appreciated. Here is the code I am using which was “borrowed” from another post:
<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”jqwidgets/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”jquery-2.1.3.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcombobox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.columnsresize.js”></script>
<script>
$(document).ready(function () {
var countries = [
{ value: “AF”, label: “Afghanistan” },
{ value: “AL”, label: “Albania” },
{ value: “DZ”, label: “Algeria” },
{ value: “AR”, label: “Argentina” },
{ value: “AM”, label: “Armenia” },
{ value: “AU”, label: “Australia” },
{ value: “AT”, label: “Austria” },
{ value: “AZ”, label: “Azerbaijan” },
{ value: “BS”, label: “Bahamas” },
{ value: “BH”, label: “Bahrain” },
{ value: “BD”, label: “Bangladesh” },
{ value: “BB”, label: “Barbados” },
{ value: “BY”, label: “Belarus” },
{ value: “BE”, label: “Belgium” },
{ value: “BZ”, label: “Belize” },
{ value: “BJ”, label: “Benin” },
{ value: “BM”, label: “Bermuda” },
{ value: “BR”, label: “Brazil” },
{ value: “BN”, label: “Brunei” },
{ value: “BG”, label: “Bulgaria” },
{ value: “CM”, label: “Cameroon” },
{ value: “CA”, label: “Canada” },
{ 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” },
{ value: “CY”, label: “Cyprus” },
{ value: “CZ”, label: “Czech Republic” },
{ value: “DK”, label: “Denmark” },
{ value: “TP”, label: “East Timor” },
{ value: “EC”, label: “Ecuador” },
{ value: “EG”, label: “Egypt” },
{ value: “ER”, label: “Eritrea” },
{ value: “EE”, label: “Estonia” },
{ value: “ET”, label: “Ethiopia” },
{ value: “FI”, label: “Finland” },
{ value: “FR”, label: “France” },
{ value: “DE”, label: “Germany” },
{ value: “GR”, label: “Greece” },
{ value: “HK”, label: “Hong Kong” },
{ value: “HU”, label: “Hungary” },
{ value: “IS”, label: “Iceland” },
{ value: “IN”, label: “India” },
{ value: “ID”, label: “Indonesia” },
{ value: “IR”, label: “Iran” },
{ value: “IQ”, label: “Iraq” },
{ value: “IE”, label: “Ireland” },
{ value: “IL”, label: “Israel” },
{ value: “IT”, label: “Italy” },
{ value: “JM”, label: “Jamaica” },
{ value: “JP”, label: “Japan” },
{ value: “MX”, label: “Mexico” },
{ value: “MC”, label: “Monaco” },
{ value: “MA”, label: “Morocco” },
{ value: “NL”, label: “Netherlands” },
{ value: “NZ”, label: “New Zealand” },
{ value: “NE”, label: “Niger” },
{ value: “NG”, label: “Nigeria” },
{ value: “KP”, label: “North Korea” },
{ value: “NO”, label: “Norway” },
{ value: “PA”, label: “Panama” },
{ value: “PE”, label: “Peru” },
{ value: “PH”, label: “Philippines” },
{ value: “PL”, label: “Poland” },
{ value: “PT”, label: “Portugal” },
{ value: “RO”, label: “Romania” },
{ value: “RU”, label: “Russia” },
{ value: “SA”, label: “Saudi Arabia” },
{ value: “SK”, label: “Slovak Republic” },
{ value: “SI”, label: “Slovenia” },
{ value: “ZA”, label: “South Africa” },
{ value: “KR”, label: “South Korea” },
{ value: “ES”, label: “Spain” },
{ value: “SE”, label: “Sweden” },
{ value: “CH”, label: “Switzerland” },
{ value: “TN”, label: “Tunisia” },
{ value: “TR”, label: “Turkey” },
{ value: “UA”, label: “Ukraine” },
{ value: “AE”, label: “United Arab Emirates” },
{ value: “UK”, label: “United Kingdom” },
{ value: “US”, label: “United States” }
];

var countriesSource =
{
datatype: “array”,
datafields: [
{ name: ‘label’, type: ‘string’ },
{ name: ‘value’, type: ‘string’ }
],
localdata: countries
};

var countriesAdapter = new $.jqx.dataAdapter(countriesSource, {
autoBind: true
});

// prepare the data
var gridSource =
{
datatype: “array”,
localdata:
[
{ choice: “first”, countryCode: “UK” },
{ choice: “second”, countryCode: “US” },
{ choice: “third”, countryCode: “DE” },
{ choice: “fourth”, countryCode: “FR” },
{ choice: “fifth”, countryCode: “IN” },
{ choice: “sixth”, countryCode: “HK” }
],
datafields: [
// name – determines the field’s name.
// value – the field’s value in the data source.
// values – specifies the field’s values.
// values.source – specifies the foreign source. The expected value is an array.
// values.value – specifies the field’s value in the foreign source.
// values.name – specifies the field’s name in the foreign source.
// When the adapter is loaded, each record will have a field called “Country”. The “Country” for each record comes from the countriesAdapter where the record’s “countryCode” from gridAdapter matches to the “value” from countriesAdapter.
{ name: ‘choice’, type: ‘string’},
{ name: ‘Country’, value: ‘countryCode’, values: { source: countriesAdapter.records, value: ‘value’, name: ‘label’ } },
{ name: ‘countryCode’, type: ‘string’}
]
};
var gridAdapter = new $.jqx.dataAdapter(gridSource);

$(“#jqxgrid”).jqxGrid(
{
width: 600,
source: gridAdapter,
selectionmode: ‘singlecell’,
autoheight: true,
editable: true,
columns: [
{ text: ‘Choice’, datafield: ‘choice’},
{ text: ‘Country’, datafield: ‘countryCode’, displayfield: ‘Country’, columntype: ‘dropdownlist’,
createeditor: function (row, value, editor) {
editor.jqxDropDownList({ source: countriesAdapter, displayMember: ‘label’, valueMember: ‘value’ });
/* editor.bind(‘change’, function(event){
var curTarget = event.currentTarget;
var row = $(this).closest(“div[role=’row’]”);
$(“#eventLog”).html(“<div>Dropdown selected:<br/>Row: ” + event.args.rowindex + “, OriginalValue: ” + event.args.item.originalItem.label + “<br/>Value: ” + event.args.value
+ “<br/>Old Value: ” + event.args.oldvalue + “</div>”);
});*/
}
}
]
});

$(“#jqxgrid”).on(‘cellselect’, function (event) {
var column = $(“#jqxgrid”).jqxGrid(‘getcolumn’, event.args.datafield);
var value = $(“#jqxgrid”).jqxGrid(‘getcellvalue’, event.args.rowindex, column.datafield);
var displayValue = $(“#jqxgrid”).jqxGrid(‘getcellvalue’, event.args.rowindex, column.displayfield);

$(“#eventLog”).html(“<div>Selected Cell<br/>Row: ” + event.args.rowindex + “, Column: ” + column.text + “, Value: ” + value + “, Label: ” + displayValue + “</div>”);
});
// $(“#jqxgrid”).on(‘cellendedit’, function (event) {
$(“#jqxgrid”).on(‘cellvaluechanged’, function (event) {
var column = $(“#jqxgrid”).jqxGrid(‘getcolumn’, event.args.datafield);
if (column.displayfield != column.datafield) {
$(“#eventLog”).html(“<div>Cell Edited:<br/>Index: ” + event.args.rowindex + “, Column: ” + column.text + “<br/>Value: ” + event.args.value.value + “, Label: ” + event.args.value.label
+ “</div>”
);
}
else {
$(“#eventLog”).html(“<div>Cell Edited:<br/>Row: ” + event.args.rowindex + “, Column: ” + column.text + “<br/>Value: ” + event.args.value
+ “<br/>Old Value: ” + event.args.oldvalue + “</div>”
);
}
});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgrid”>
</div>
<div style=”font-size: 13px; margin-top: 20px; font-family: Verdana, Geneva, ‘DejaVu Sans’, sans-serif;” id=”eventLog”></div>
</div>
</body>
</html>

February 10, 2015 at 7:02 am jqxgrid not firing cellvaluechanged event after jqxdropdownlist select #66793

Peter Stoev
Keymaster

Hi sdidrik,

cellvaluechanged is raised when a cell value is changed, not when you select something with DropDownList. It’s called when the Editor is no longer active. The event is called correctly and I can assure you that it works without issues.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

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

You must be logged in to reply to this topic.