Dropdown List within TreeGrid using dataField and displayField

[rdolanParticipant]

Hi there

I am having a problem implenting a dropdownlist within the treeGrid. Inititially upon binding the treeGrid, the selected value of the dropdown (RejectionTypeID) is displayed correctly. However When the selected item is changed in the dropdownlist, the text displayed becomes the valueMember instead of the displayMember.

I did look at all the examples of editors within the treeGrid, however none of them use dataField and displayField bindings. They all have a source when is simply a list of string values.

I have an example below. I copied my json data to the listRejectionTypes variable. You can see the data used within the dropdown has a value property and text property.

var listRejectionTypes= {“d”:[{“value”:”14″,”text”:”Amount Billed does not match Agreement”},{“value”:”23″,”text”:”Amount needs to be split to multiple accounts”},{“value”:”10″,”text”:”Incorrect Vendor”},{“value”:”12″,”text”:”Insufficient backup please provide additional back-up and re-submitt.”},{“value”:”13″,”text”:”Miscoded please code to Guest inconvenience Shore-ops. “},{,”value”:”11″,”text”:”No back-up please provide required back-up and re-submitt invoice “},{“value”:”17″,”text”:”Not able to Approve invoices”},{,”value”:”16″,”text”:”Not able to Approve invoices”},{,”value”:”22″,”text”:”Wrong Vessel”}]}

var source = {
type: “GET”,
datatype: “json”,
async: false,
cache: true,
url: getBaseURL() + serviceUrl,
datafields: [
{ name: ‘SubmissionDetailID’, type: ‘number’ },
{
name: ‘RejectionTypeDescription’, value: ‘RejectionTypeID’, type: “number”,
values: {
source: listRejectionTypes,
value: ‘value’, name: ‘text’
}
},
{ name: ‘RejectionTypeID’, type: “number” },
{ name: ‘BusinessComment’, type: “string” },
{ name: ‘RelatedSubmissionDetailID’, type: “number” },
],
hierarchy:
{
keyDataField: { name: ‘SubmissionDetailID’ },
parentDataField: { name: ‘RelatedSubmissionDetailID’ }
},
id: ‘SubmissionDetailID’,
var dataAdapter = new $.jqx.dataAdapter(source, {
contentType: ‘application/json; charset=utf-8’,
async: false,
formatData: function (data) {
data = { id: 5555 };
return data;
}
});

var thisGrid = $(“#” + this._ElementID).jqxTreeGrid({
pageable: false,
columnsResize: true,
width: ‘100%’,
theme: ‘IMS’,
source: dataAdapter,
altrows: true,
columnsreorder: true,
selectionmode: ‘singlerow’,
autoRowHeight: false,
columnsresize: true,
showAggregates: true,
aggregatesHeight: 20,
scrollBarSize: 15,
columnsReorder: true,
editable: self.AllowEdit,
editSettings: {
saveOnPageChange: true,
saveOnBlur: true,
saveOnSelectionChange: true,
cancelOnEsc: true,
saveOnEnter: true,
editSingleCell: true,
editOnDoubleClick: true,
editOnF2: true
},
sortable: true,
ready: function () {
//$(“#” + self._ElementID).jqxTreeGrid(‘lockRow’, 1); //cannot figure this out
//$(“#” + self._ElementID).jqxTreeGrid(‘lockRow’, 0);
//$(“#” + self._ElementID).jqxTreeGrid(‘lockRow’, 2);
},
columns: [
{ text: ‘SubmissionDetailID’, datafield: ‘SubmissionDetailID’, hidden: true },
{ text: ‘RelatedSubmissionDetailID’, datafield: ‘SubmissionDetailID’, hidden: true },
{
text: ‘Rejection Reason’, dataField: ‘RejectionTypeID’, displayField: ‘RejectionTypeDescription’, columnType:’template’,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
editor.jqxDropDownList({ source: listRejectionTypes, displayMember: ‘text’, valueMember: ‘value’, autoDropDownHeight: true, dropDownWidth: 400, theme: ‘energyblue’, dropDownHorizontalAlignment: ‘left’ });
},
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: ‘Business Comment’, datafield: ‘BusinessComment’, cellsalign: ‘left’ }
]
});

Regards
Robbie

[Peter StoevKeymaster]

Hi Robbie,

The process of creating custom Editors for this widget is demonstrated on this page: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-custom-editors.htm?arctic. Features which are not demonstrated on that page are not supported. Also editor.val() does not return label/value pair, it returns the value only. If you want to return an object with label/value pair, you should return a JSON object with label member and value members.

Best Regards,
Peter Stoev

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

[rdolanParticipant]

Hi Peter

How should the object be formatted in order to populate the dropdown successfully.You mentioned to return json object.So I changed the getEditorValue function to return an object instead of the value, however this still will not work. How should the object be formatted within the getEditorValue function in order to populate the dropdown based on my above example. I tried a few different ways as shown below, but neither were successful.

getEditorValue: function (row, cellvalue, editor) {
//test 1
//var o = new Object()
//{
// value = editor.val();
// text = editor.text();
//}

//test 2
var o = {
“value”: editor.val(),
“text”: editor.text()
};

return o;
}

[Author]

Posts