DropDownList with values and labels

[mrallarisParticipant]

Hello – thank you for this widget, it’s wonderful!

I am struggling to incorporate a dropdownlist into my treegrid. I have followed your example here but I cannot seem to get it to work properly where the dropdownlist source is not a one-dimensional array (it’s a key:value pair).

I want the user to be able to select a status for each row. My treegrid source gets a json object containing “status” which has the statusID and “statusName” which has the display name. In my testing I have also created a source row called “statusList” which is setup the way a dropdownlist would be setup in a jqxGrid. Your treegrid example does not do this but I tried it anyway.

My objective is this: When the grid loads the status column should display “statusName”. When the user edits the column the dropdownlist should appear and the correct option should be selected. When the user makes a selection the dropdownlist should set the treegrid cell to the option text and it should send the option value to a save function.

My treegrid also contains a dropdownlist called “coreCompetency” which is exactly like your demo and works perfectly.

Here are my questions:
1. Should I be treating the treegrid cell as its own thing and I need to set its content independently of the editor inside of it?
2. If the cell text should be based on the dropdownlist selection, how do I initialize the cell content since the editor isn’t created until the user double-clicks on the cell?
3. Should the treegrid column use the datafield containing the statusID (status) or the datafield containing the status text (statusName)? When I tried the field containing the ID then the grid displays the ID (which is bad) but I can pass that ID to the dropdownlist (which is good). When I tried the field containing the statusName, the grid displays the name (which is good) but I don’t have the ID to pass to the dropdownlist (which is bad).
4. I don’t really understand the purpose of setting the value of the editor in the initEditor function. This will set the editor everytime someone clicks on it. But after the initial creation doesn’t it retain its value? Is it necessary to reset it everytime or can I just set it on create and then it takes care of itself after that?

Any advice you can provide would be a great help. Thanks as always!

Here’s some code:

var woGridSource =
{
    dataType: "json",
    dataFields: [
        { name: 'woID', type: 'number' },
		{ name: 'rootID', type: 'number' },
		{ name: 'partID', type: 'number' },
        { name: 'parentID', type: 'number' },
        { name: 'woNum', type: 'string' },
        { name: 'custName', type: 'string' },
        { name: 'partNum', type: 'string' },
        { name: 'partDesc', type: 'string' },
        { name: 'qty', type: 'number' },
        { name: 'startDate', type: 'date' },
        { name: 'endDate', type: 'date' },
        { name: 'statusList', type: 'string', value:'value', values: { source: woStatusListAdapter.records, value: 'value', name: 'label' } },
        { name: 'status', type: 'string' },
        { name: 'statusName', type: 'string' },
        { name: 'coreCompetency', type: 'string', value:'value',values: { source: coreFunctionsAdapter.records, value: 'value', name: 'dispValue' } },
        { name: 'attachmentCount', type: 'number' }
	],
    hierarchy:
    {
        keyDataField: { name: 'woID' },
        parentDataField: { name: 'parentID' }
	},
	url: "../wo/wo.controller.php",
	data: {
		func: "getWOTreeGrid",
		orderitemID: orderitemID
	},
	id: 'woID',
	addRow: function(rowID, rowData, position, commit) {
	},
	updateRow: function(rowID, rowData, commit) {
		commit(true);
	},
	deleteRow: function(rowID, commit) {
	}
};

    $("#WoOpsTreeGrid").jqxTreeGrid(
    {
        width: '100%',
        height: '50%',
        source: woGridAdapter,
        pageable: true,
        pageSize: 100,
        columnsResize: true,
        sortable: true,
        filterable: true,
        editable:true,
		selectionMode: "singleRow",
        filterMode: 'advanced',
		editSettings:{ saveOnPageChange: false, saveOnBlur: false, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editOnDoubleClick: true, editSingleCell: true, editOnF2: true },
        columns: [
			{ text: 'Work Order', dataField: 'woNum', minWidth: 100, width: 180, editable: false },
			{ text: 'Customer', dataField: 'custName', width: 180, editable: false },
			{ text: 'Qty', dataField: 'qty', width: 50 },
			{ text: 'Part Number', dataField: 'partNum', width: 100 },
			{ text: 'Part Description', dataField: 'partDesc', minWidth: 150 },
            { text: 'Core Competency', dataField: 'coreCompetency', width: 250, columnType: "template",
                createEditor: function (row, cellvalue, editor, cellText, width, height) {
                    // construct the editor.
                    var source = ["Machining", "Assembly", "NDT", "Welding",
					"Hydro-Test", "Programming"];
                    editor.jqxDropDownList({autoDropDownHeight: true, source: source, width: '100%', height: '100%' });
				},
                initEditor: function (row, cellvalue, editor, celltext, width, height) {
                    // set the editor's current value. The callback is called each time the editor is displayed.
                    editor.jqxDropDownList('selectItem', cellvalue);
				},
                getEditorValue: function (row, cellvalue, editor) {
                    // return the editor's value.
                    return editor.val();
				}
			},
			{ text: 'Start Date', datafield: 'startDate', columntype:'custom', width: 150, cellsformat: 'd',
				createEditor: function (row, cellvalue, editor, celltext, width, height) {
					var div = $("<div class='datetimeinput'></div>").appendTo(editor);
					var datum = null;
					if(celltext.length > 0)
					  datum = cellvalue;
					div.jqxDateTimeInput({ value: datum, width: width, height: height });
				},
				initEditor: function (row, cellvalue, editor, celltext, width, height) {
					var datum = null;
					if(celltext.length > 0)
						datum = cellvalue;
					$(editor.find('.datetimeinput')).jqxDateTimeInput('setDate', datum);
				},
				getEditorValue: function (row, cellvalue, editor) {
					return $(editor.find('.datetimeinput')).jqxDateTimeInput('getDate');
				}
			},
			{ text: 'End Date', datafield: 'endDate', columntype:'custom', width: 150, cellsformat: 'd',
				createEditor: function (row, cellvalue, editor, celltext, width, height) {
					var div = $("<div class='datetimeinput'></div>").appendTo(editor);
					var datum = null;
					if(celltext.length > 0)
					  datum = cellvalue;
					div.jqxDateTimeInput({ value: datum, width: width, height: height });
				},
				initEditor: function (row, cellvalue, editor, celltext, width, height) {
					var datum = null;
					if(celltext.length > 0)
						datum = cellvalue;
					$(editor.find('.datetimeinput')).jqxDateTimeInput('setDate', datum);
				},
				getEditorValue: function (row, cellvalue, editor) {
					return $(editor.find('.datetimeinput')).jqxDateTimeInput('getDate');
				}
			},
            { text: 'Status', datafield: 'statusName', width: 250, columnType: "custom",
 				createEditor: function (row, cellvalue, editor, celltext, width, height) {
					console.log('create');
                    editor.jqxDropDownList({autoDropDownHeight: true, source: woStatusListAdapter, displayMember: 'label', valueMember: 'value', width: '100%', height: '100%' });
					//console.log(cellvalue);
					//console.log(celltext);
				},
                initEditor: function (row, cellvalue, editor, celltext, width, height) {
					console.log('init');
					var row = $("#WoOpsTreeGrid").jqxTreeGrid("getRow",row);
					var item = $(editor).jqxDropDownList('getItemByValue', row.status);
					editor.jqxDropDownList('selectItem', item.value);
					//editor.jqxDropDownList('selectItem', cellvalue);
					//var item = $(editor).jqxDropDownList('getItemByValue', cellvalue);
					//editor.jqxDropDownList('selectItem', item.value);
				},
                getEditorValue: function (row, cellvalue, editor) {
					//console.log($(editor).jqxDropDownList('getSelectedItem').label);
					$("#WoOpsTreeGrid").jqxTreeGrid("setCellValue",row, "status", $(editor).jqxDropDownList('getSelectedItem').value);
					return $(editor).jqxDropDownList('getSelectedItem').label;
				}
			},
			{ text: '', datafield: 'attachLink', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 30, editable: false }
		]
	});

[HristoParticipant]

Hello mrallaris,

1. Need to set up them on one same way like in our demo. (focus on ‘Budget’ column with slider)
2. On the initialization all data is loaded from DataAdapter.
3. You could try to use ‘displayMember’ and ‘valueMember’ about ‘statusName’ and ‘statusID’.
4. createeditor is called once. initeditor is called each time an editor is opened. “createeditor” is not called every time.
You could find out more about this in our API Documentation.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts