Custom DropDownList Column Editing

[stevenmahonyParticipant]

Hi,

Firstly would like to say, great set of tools. Love them.

I am using a dropdownlist as an editor in a cell and In the cellendedit event I call a function to update a record and all is good, it works fine.

My query is, is there a way to call the function when i select the item in the dropdownlist as oppsosed to the cellendedit event firing.

What I have noticed when testing my code is that when the grid is rendered and the cell value is set from the database and then binding the dropdownlist to the cell ( as another datasource) , the value of the is always not set ‘undefined’ until I edit the cell.

I think is ma setting up the dropdownlist datasource binding incorrectly. Ive trid folowing the sample in the demo page, but I still think i’m missing something. Any help would be appreciated.

I can post the code if required.

Thanks.

Steven

[Peter StoevKeymaster]

Hi Steven,

Here’s a sample with custom DropDownList editor: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/gridkeyvaluescolumnwitharray.htm?classic

Also in the “createeditor” function, you may bind to the jqxDropDownList’s select event.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[stevenmahonyParticipant]

Thanks for the quick response. I used that example and it got me so far but a little stuck now.

I added to following code to my createditor :

createeditor: function (row, value, editor) {
editor.jqxDropDownList({ source: statusAdapter, displayMember: ‘label’, valueMember: ‘value’ });
$(editor).on(‘select’, function (event) {
console.log(editor);
var item = $(editor).jqxDropDownList(‘getItem’, args.index);
if (item != null) {
selectedValue = item.label;
}
// would like to call an update function here when selected and unselected are different (but for the editor on the current grid row)
});
$(editor).on(‘unselect’, function (event) {
var item = $(editor).jqxDropDownList(‘getItem’, args.index);
if (item != null) {
unselectedValue = item.label;
}
});

}

The issue I’m having now is that selecting and unselecting the dropdownlist are not exclusive to the current dropdownlist.
I looked at the origianlItem in the object created by the dropdownlist but its the same as the current object values/label

Steven

[Peter StoevKeymaster]

Hi Steven,

I am afraid that I can’t understand exactly your requirement. Could you please provide additional details about it?

Something I noticed in your code is that you use getItem in the ‘select’ event handler, but that is not necessary.

See below:

$('#jqxDropDownList').on('select', function (event)
{
    var args = event.args;
    if (args) {
    // index represents the item's index.                
    var index = args.index;
    var item = args.item;
    // get item's label and value.
    var label = item.label;
    var value = item.value;
}                        
});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[stevenmahonyParticipant]

Hi,

The setup is:

I have a grid. The first column will be a dropdownlist with 3 possible options
label = Pending : value=2
label = Processed : value=1
label = On Hold : value = 3

I think my first problem is that I have not set the dropdownlist datasource correctly. The fist time i try and edit the cell the value is ‘undefined’

Code
// SET UP STATUS LIST SOURCE
var statusList = [{ value: '2', label: 'Pending' }, { value: '1', label: 'Processed' }, { value: '3', label: 'On Hold'}];
var statusSource =
	{
		datatype: "array",
		datafields: [
			{ name: 'label', type: 'string' },
			{ name: 'value', type: 'string' }
		],
		localdata: statusList
	};
var statusAdapter = new $.jqx.dataAdapter(statusSource, {
	autoBind: true
});
//SETUP MAINGRID DATAFIELDS
var datafields = [
	{ name: 'Status', value: 'StatusId', values: { source: statusAdapter.records, value: 'value', name: 'label'} },
	{ name: 'StatusId', type: 'string' },
	{ name: 'Origin' }
]
// SETUP COLS
var mycols = [
	{ text: 'Status', dataField: 'StatusId', displayfield: 'Status', cellsalign: 'left', align: 'left', width: '9%', columntype: 'dropdownlist',
		createeditor: function (row, value, editor) {
			editor.jqxDropDownList({ source: statusAdapter, displayMember: 'label', valueMember: 'value' });
			$(editor).on('select', function (event) {
				console.log('Select: ' + event.args.item.value);
				console.log('Select: ' + event.args.item.label);
			});
			$(editor).on('unselect', function (event) {
				console.log('Unselect: ' + event.args.item.value);
				console.log('Unselect: ' + event.args.item.label);
			});
		}
	},
	{ text: 'Origin', dataField: 'Origin', width: '10%', editable: false }
];
var initOutstanding = function (status, onhold) {
	$("#jqxgrid1").jqxGrid('clear');
               
	var source = {
		datatype: 'json',
		datafields: datafields,
		url: 'test.aspx/GetData',
		data: { status: status, onhold: onhold, billingid: billingid }
	};
	var dataAdapter = new $.jqx.dataAdapter(source,
		{
			contentType: 'application/json; charset=utf-8'
		});
	
	$("#jqxgrid1").jqxGrid({
		source: dataAdapter,
		selectionmode: 'singlecell',
		editmode: 'click',
		autoheight: true,
		editable: true,
		width: '99%',
		altrows: true,
		columnsresize: true,
		theme: 'metro',
		sortable: true,
		groupable: true
		columns: mycols
	});
}

hope this helps

[Author]

Posts