addrow with jqxDropdownlist cell

[njengaParticipant]

When adding a new row to the grid, how do you set the values for a cell that is a dropdown list?

E.g. the department column below is columntype: ‘dropdownlist’. The values are set from the DB using JASON. On addrow how do I set it to a value in the list????

{text: 'DEPARTMENT', datafield: 'department', width: 250, columntype: 'dropdownlist',
    createeditor: function (row, column, editor) {
       source = createDepartmentsDropDownList(true);
       editor.jqxDropDownList({autoDropDownHeight: true, source: source, displayMember: "department", valueMember: "oid"});
    },
    $("#addrowbutton").on('click', function () {
       var commit = $("#detailGrid").jqxGrid('addrow', null, {
       city: ????
   })
}

Thanks!

[HristoParticipant]

Hello njenga,

The source code looks a little bit incompleted.
Is there any error message in the console?
It is better if you could provide us with one simple example that demonstrates your case.
One of the options is to use the reference for the internal widget (jqxDropDownList) and to update it when you add the new item.
Another option is to implement the initeditor callback to update the source property of the jqxDropDownList.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[njengaParticipant]

Thanks Hristo
The code looks like this – the data adapters are loaded from the DB for existing rows, that’s working fine.
The 3 dropdown lists are shown below

`$(“#detailGrid”).jqxGrid({
source: detail_dataAdapter,
width: 925,
height: 500,
rowsheight: 20,
showtoolbar: true,
editable: true,
enabletooltips: true,
selectionmode: ‘multiplecellsadvanced’,
ready: function () {
$(‘#detailGrid’).jqxGrid(‘hidecolumn’, ‘Update’);
},
rendertoolbar: function (toolbar) {
var container = $(“<div style=’margin: 5px;’></div>”);
toolbar.append(container);
container.append(‘<input id=”addrowbutton” type=”button” value=”Add New Row” />’);
$(“#addrowbutton”).jqxButton();
$(“#addrowbutton”).on(‘click’, function () {
var commit = $(“#detailGrid”).jqxGrid(‘addrow’, null, {
allocation: 100
// these are the dropdowns that I need to set values (????) when a new row is added. They hav JSON data adapters loading from the DB for existing rows.
department: ????
effectiveDt: ????
endDt: ????
})
});
},
columns: [
{text: ‘DEPARTMENT’, datafield: ‘department’, width: 250, columntype: ‘dropdownlist’,
createeditor: function (row, column, editor) {
source = createDepartmentsDropDownList(true);
editor.jqxDropDownList({autoDropDownHeight: true, source: source, displayMember: “department”, valueMember: “oid”});
}
},
{text: ‘ % ‘, datafield: ‘allocation’, width: 70, align: ‘right’, cellsalign: ‘right’, columntype: ‘numberinput’,
validation: function (cell, value) {
if (value < 0 || value > 100) {
return {result: false, message: “Quantity should be in the 0-100 interval”};
}
return true;
},
createeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({decimalDigits: 0, digits: 3});
}
},
{text: ‘EFFECTIVE DT’, datafield: ‘effectiveDt’, width: 110, columntype: ‘dropdownlist’,
createeditor: function (row, column, editor) {
source = getDatesDropdownListSource(‘EFFECTIVE_DT’);
editor.jqxDropDownList({autoDropDownHeight: true, source: source, displayMember: “periodStartDate”, valueMember: “oid”});
},
},
{text: ‘END DT’, datafield: ‘endDt’, width: 110, columntype: ‘dropdownlist’,
createeditor: function (row, column, editor) {
source = getDatesDropdownListSource(“END_DT”);
editor.jqxDropDownList({autoDropDownHeight: true, source: source, displayMember: “periodStartDate”, valueMember: “oid”});
},
}
]
});`

Regards.

[njengaParticipant]

Thanks Hristo.
The initeditor option works:
`initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
editor.jqxDropDownList({autoDropDownHeight: true, source: source, displayMember: “department”, valueMember: “oid”});
}`

However, how do I get the valueMember?

[HristoParticipant]

Hello njenga,

Please, clarify it, what is the issue with the valueMember property.
You could use some of the methods of the jqxDropDownList to get more detailed information about this – getItem or getSelectedItem methods.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[njengaParticipant]

I meant how do I get the valueMember selected by the user.
I’ve used the following to gt the value selectd (saved the editor from init):

cellendedit: function (row, datafield, columntype, oldvalue, newvalue) {
  if (addNewRow) {
    newLineOfBusinessOid = deptCellEditor.jqxDropDownList('val');
  }
}

Thanks!

[HristoParticipant]

Hello njenga,

If this deptCellEditor variable is a reference to the real editor then you could use this getSelectedItem method.
Please, take a look at this code snippet:

var item = deptCellEditor.jqxDropDownList('getSelectedItem');
console.log(item.value + " - " + item.label);

Also, if you add this item then you know its value and label members.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[njengaParticipant]

Got it! thanks!

[Author]

Posts