Issue with createeditor and initeditor

[diegopittParticipant]

I have an editor which is a dropdownlist. I want to enable and disable items based on a row field. The enabling and disabling is working. The problem is after editing and moving to another row, the item value is not binded correctly with the editor. I think the editor is treated as it was for the previous row. It doesn’t recognize the new enabled and disabled values even thou they show correctly. It treats a re-enabled item as it was disabled so the binding doesn’t work and binds with the closest item. Bellow my code:

			var GridModel = function () {
					this.menuitems = ko.observableArray(controller.get('menuitems'));
			};
			my = { viewModel: new GridModel() };
	
			var menus_source = {
					localdata: controller.get('menus'),
					datafields: [
						{ name: 'id' },
						{ name: 'name' }
					],				
			}
			var menus_dataAdapter = new $.jqx.dataAdapter(menus_source);
			
			var categories_source = {
					localdata: controller.get('categories'),
					datafields: [
						{ name: 'id' },
						{ name: 'name' }
					],				
			}
			var categories_dataAdapter = new $.jqx.dataAdapter(categories_source, {autoBind: true,async: false});
			
			var departments_source = {
					localdata: controller.get('departments'),
					datafields: [
						{ name: 'id' },
						{ name: 'name' }
					],				
			}
			var departments_dataAdapter = new $.jqx.dataAdapter(departments_source, {autoBind: true,async: false});
			
			var units_source = {
					localdata: controller.get('units'),
					datafields: [
						{ name: 'id' },
						{ name: 'name' }
					],				
			}
			var units_dataAdapter = new $.jqx.dataAdapter(units_source, {autoBind: true,async: false});
			
			var menuitems_source = {
					localdata: my.viewModel.menuitems,
					datatype: 'observablearray',
					datafields: [
						{ name: 'id' },
						{ name: 'item_id' },
						{ name: 'name' },
						{ name: 'menu_id' },
						{ name: 'department', value: 'department_id', values: { source: departments_dataAdapter.records, value: 'id', name: 'name' } },
						{ name: 'category', value: 'category_id', values: { source: categories_dataAdapter.records, value: 'id', name: 'name' } },
						{ name: 'unit_id' },
						{ name: 'unit', value: 'unit_id', values: { source: units_dataAdapter.records, value: 'id', name: 'name' } },
						{ name: 'price', type:'number'},
						{ name: 'department_id' },
						{ name: 'category_id'},
						{ name: 'count'}
					],		
			}
			$("#Menus_grid").jqxGrid({
				pageable: true,
				theme: 'energyblue',
				editable: true,
				autorowheight : true,
				rowsheight : 50,
				pagesize: 10,
				autoshowloadelement: false,
				autoheight: true,
				editmode: 'click',
				altrows:true,
				sortable: true,
				width:'100%',
				showtoolbar: true,
				toolbarheight:35,
				rendertoolbar: function (toolbar) {
					var me = this;
					var container = $("<div style='margin: 0px;'></div>");
					var input = $("<div style='float:left;font-weight:bold' id='field'/>");
					var addButton = $("<button id='add' style='float: right;' type='button' class='btn btn-success'><span style='color:#e0e9f5' class='glyphicon glyphicon glyphicon-plus' aria-hidden='true'></span>&nbsp;&nbsp;Add&nbsp;items&nbsp;</button>");
					container.append(input);
					container.append(addButton);
					toolbar.append(container);
					$("#add").on('click', function () {	controller.send("isadding"); });
					if (controller.adding){ $("#add").hide()}
					container.append(input);
					input.jqxDropDownList({animationType: 'slide', theme:'energyblue', source: menus_dataAdapter,	displayMember: "name", valueMember: "id", selectedIndex: 0,	height: '32px',	width: '460px'});
					input.bind('change', function (event) {
						if (controller.adding){
							$("#jqxitems").jqxComboBox('clearSelection');
						}
						var args = event.args;
						if (event.args){
							var value = event.args.item.value;
						}
						menuitems_dataAdapter.dataBind();
					});
				},
				columns: [
					{ text: '', datafield: 'Delete', editable: false, width:'7%', cellsrenderer: function (row) {
						addclass='';
						if($("#Menus_grid").jqxGrid('getrowdata', row).count > 0){
							addclass=' disabled';
						}	
						var datarow = $("#Menus_grid").jqxGrid('getrowdata', row);
						items_sold = '';
						var itemlbl;
						if (datarow.count > 1){
							itemlbl = ' items sold';
						}else{
							itemlbl = ' item sold';
						}
						return "<div title='" + datarow.count + itemlbl + "' style='width:100%;' class='text-center'><button onclick='controller.send("deletemenuitem"," + datarow.id + "," + datarow.index + ");' id='delete' style='margin-top:12px;padding:4px' type='button' class='btn btn-default" + addclass + "'><span style='color:#d95551' class='glyphicon glyphicon-remove'></span></button></div>";
						}
					},
					{ text: 'id', dataField: 'id', hidden:true},
					{ text: 'Item Name', editable: false, dataField: 'name', width:'45%'},
					{ text: 'Category', dataField: 'category_id', displayfield: 'category', columntype: 'dropdownlist', width:'17%', 
						createeditor: function (row, column, editor) {
							editor.jqxDropDownList({ autoDropDownHeight: true, source: categories_dataAdapter, displayMember:"name", valueMember: 'id'});
						}
					},
					{ text: 'Department', columntype: 'dropdownlist', displayfield: 'department', dataField: 'department_id', width:'13%', 
						createeditor: function (row, column, editor) {
							editor.jqxDropDownList({ autoDropDownHeight: true, source: departments_dataAdapter, displayMember:"name", valueMember: 'id'});
						}
					},
					{ text: 'Unit', editable: true, columntype: 'dropdownlist', displayfield: 'unit', dataField: 'unit_id', width:'10%', 
						createeditor:function(row, column, editor){
							
							editor.jqxDropDownList({ autoDropDownHeight: true, source: units_dataAdapter, displayMember:"name", valueMember: 'id'});

						},
						initeditor: function (row, cellvalue, editor) {
							var xitems = editor.jqxDropDownList('getItems');
							 $.each(xitems, function (i) {
							 	editor.jqxDropDownList('enableAt', i );
							 });
							
							var datarow = $("#Menus_grid").jqxGrid('getrowdata', row);
							var used_Units = getUnitsinUse(datarow.item_id);
							for (var i = 0; i < used_Units.length; i++) {
								if(datarow.unit_id != used_Units[i]){
									editor.jqxDropDownList('disableItem',used_Units[i]);
								}
							}
						}
					},
					{ text: 'Unit price', dataField: 'price', width:'8%', cellsformat: 'c2', columntype: 'numberinput'}
				]
			});
			$("#Menus_grid").bind('cellvaluechanged', function (event) {
				var data = $("#Menus_grid").jqxGrid("getrowdata", args.rowindex);
				var newvalue;
				if (args.datafield == 'price'){
					newvalue = args.newvalue;
				}else{
					newvalue = args.newvalue.value;
				}
				//controller.send("editviewmenu", newvalue, args.datafield, data.id, args.oldvalue);
			});
			units_data = new Array();
			menuitems_dataAdapter = new $.jqx.dataAdapter(menuitems_source, {
				beforeLoadComplete: function (records) {
					units_data = [];
					for (var i = 0; i < records.length; i++) {
							var items = records[i];
							if (items.menu_id == $("#field").jqxDropDownList('val')){
								items.index = i;
								items.id = items.id;
								items.item_id = items.item_id;
								items.name = items.name;
								items.department = items.department;
								items.category = items.category;
								items.unit = items.unit;
								items.menu_id = items.menu_id;
								items.unit_id = items.unit_id;
								items.price = items.price;
								items.department_id = items.department_id;
								items.category_id = items.category_id;
								units_data.push(items)
							}
					}
					return units_data;
				}
			});
			getUnitsinUse = function(item_id){
				UnitsinUse = new Array;
				for (var i = 0; i < units_data.length; i++) {
					var items = units_data[i];
					if(item_id == items.item_id){
						UnitsinUse.push(items.unit_id)
					}
				}
				return UnitsinUse;
			}
			$("#Menus_grid").jqxGrid({source: menuitems_dataAdapter});
			ko.applyBindings(my.viewModel, document.getElementById('viewUnits_wraper'));

[diegopittParticipant]

In the initeditor I have to loop all items and re-enable them all because when I edit some other row the items show the disabled ones from the previous editing.

var xitems = editor.jqxDropDownList('getItems');
$.each(xitems, function (i) {
   editor.jqxDropDownList('enableAt', i );
});

[Peter StoevKeymaster]

Hi diegopitt,

You have one column editor. initeditor is called when you open it – each time. createeditor is called one – when it’s opened for first time.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[diegopittParticipant]

Thanks Peter, not sure what you mean by You have one column editor. I am aware when the createeditor and initeditor are called

Thanks,

Diego

[diegopittParticipant]

Is there a way to reset the editor for the next row edit? All the items changes I make remain there…

[Author]

Posts