DropDown in Grid, disabling a DropDown Item leads to strange behavior

[fbremParticipant]

Hi there,

i try to dynamically disabling dropdown items in a grid:

 editor.bind('open', function (event) {
	//first, enable all items
	var items = editor.jqxDropDownList('getItems');
	for (var i = 0; i < items.length; i++) {
		editor.jqxDropDownList('enableItem', items[i]);
	};
	//second, disable items by value of rows
	var rows = $('#jqxgridpop').jqxGrid('getboundrows');
	for (var i = 0; i < rows.length; i++) {
		var value = $('#jqxgridpop').jqxGrid('getcellvalue', i, "languageCode");
		var item = editor.jqxDropDownList('getItemByValue', value);
		editor.jqxDropDownList('disableItem', item);
	};
});

This is working as expected (row1), except that after this, if i set the focus to the dropdown cell in another row (row2), the selected item of the dropdown in row2 is automatically set to the same item as in row1. This happens at the event ‘cellbeginedit’ of the grid.

Any help is highly appreciated.
cheers fbrem

[DimitarParticipant]

Hello fbrem,

Please share a larger code example, containing the entire code for this column.

Best Regards,
Dimitar

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

[fbremParticipant]

Hi Dimitar, here as requestet the full code for the grid..

var languages = [{ "id": "0", "code": 0, "name": "All browser languages" }, { "id": "1", "code": 1031, "name": "German" }, { "id": "2", "code": 1033, "name": "English" }, { "id": "3", "code": 1034, "name": "Spanish" }, { "id": "4", "code": 1036, "name": "French" }, { "id": "5", "code": 1040, "name": "Italian" }, { "id": "6", "code": 1045, "name": "Polish" }, { "id": "7", "code": 1046, "name": "Portuguese" }];

var languagessource = {
	datatype: "json",
	datafields: [
		{ name: 'code', type: 'int' },
		{ name: 'name', type: 'string' }
	],
	id: 'id',
	cache: true,
	localdata: languages
};

var languagesDataAdapter = new $.jqx.dataAdapter(languagessource, {
	formatData: function (data) {
		return {};
	},
	contentType: 'application/json; charset=utf-8',
	loadError: function (xhr, status, error) {
		//alert(error);
	},
	autoBind: true
});

$("#jqxgridpop").jqxGrid({
	width: '100%',
	autoheight: false,
	height: 300,
	editable: true,
	selectionmode: 'singlerow',
	editmode: 'click',
	columns: [
		{ text: 'URL:', dataField: 'urlNew', width: '49%' },
		{
			text: 'Browser Language', columntype: 'dropdownlist', dataField: 'languageCode', displayfield: 'languageddl', width: '20%', autoOpen: 'false', autoDropDownHeight: true,
			createeditor: function (row, value, editor) {
				editor.jqxDropDownList({ source: languagesDataAdapter, displayMember: 'name', valueMember: 'code', placeHolder:"" });
				editor.bind('open', function (event) {
					//first, enable all items
					var items = editor.jqxDropDownList('getItems');
					for (var i = 0; i < items.length; i++) {
						editor.jqxDropDownList('enableItem', items[i]);
					};
					//second, disable items by value of rows
					var rows = $('#jqxgridpop').jqxGrid('getboundrows');
					for (var i = 0; i < rows.length; i++) {
						var value = $('#jqxgridpop').jqxGrid('getcellvalue', i, "languageCode");
						var item = editor.jqxDropDownList('getItemByValue', value);
						//editor.jqxDropDownList('disableItem', item);
					};
				});
			}
		},
		{ text: 'Status', dataField: 'status', width: '8%', cellsalign: 'right', columntype: 'checkbox', filtertype: 'bool'},
		{ text: 'Fallback', dataField: 'defaultChild', width: '8%', cellsalign: 'right', columntype: 'checkbox', filtertype: 'bool'}
	],
	ready: function () {
	},
	showstatusbar: true,
	statusbarheight: 40,
	renderstatusbar: function (statusbar) {
		// appends buttons to the status bar.
		var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
		var addButton = $("<div style='float: left; margin-left: 5px;'><img id='popgridadd' style='position: relative; margin-top: 2px;' src='add.png'/></div>");
		var deleteButton = $("<div style='float: left; margin-left: 5px;'><img id='popgriddelete' style='position: relative; margin-top: 2px;' src='trash.png'/></div>");
		container.append(addButton);
		container.append(deleteButton);
		statusbar.append(container);
		addButton.jqxButton({ width: 20, height: 20 });
		deleteButton.jqxButton({ width: 20, height: 20 });
		// add new row.
		addButton.click(function (event) {
			if (addButton.jqxButton('disabled') == false) {
				addChildRow();
			};
		});
		deleteButton.click(function (event) {
			var id = $("#jqxgridpop").jqxGrid('getrowid', selectedrowindex);
			var commit = $("#jqxgridpop").jqxGrid('deleterow', id);
		});
	},
	ready: function () {
	}
});

[DimitarParticipant]

Hi fbrem,

Please make sure you are using the latest version of jQWidgets (3.2.1).

If the issue persists, try setting the cellvaluechanging callback to your column:

cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
    // return the old value, if the new value is empty.
    if (newvalue == "") return oldvalue;
}

If that does not help, either, please share if the issue occurs only with the event binding inside createeditor or even without it.

Best Regards,
Dimitar

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

[Author]

Posts