jqxgrid refresh / cell refresh on dropdown change

[hkParticipant]

so I have a column in the grid that has a dropdown of all services with checkboxes. when the grid loads it shows me all the service names selected and when clicked shows me the dropdown to change selections. all that works fine.

my last problem is when I open the dropdown and add/remove a checkbox the values get saved to the database but the service list does not get updated. I have to refresh the browser and the new servicelist selected shows up.

how can I refresh the grid to display the selected service names.
the dropdown shows the correct checkboxes even without a refresh.

[DimitarParticipant]

Hello hk,

Have you implemented the dropdownlist column’s geteditorvalue callback function? Please check out the demo Custom Column Editor, which shows how to correctly implement the client-side part of this functionality.

Best Regards,
Dimitar

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

[hkParticipant]

geteditorvalue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();

this is what I have and I copied it from the example as is. The dropdown list does get the values checked and what is in the database.

The problem is with the list showing up in the grid for example “Green Tea,Doubleshot Espresso,Caffe Espresso,White Chocolate Mocha,Caffe Americano” as per the example above. The cell does not get updated with the selections unless I refresh the page and get a fresh dataAdapter
var dataAdapter = new $.jqx.dataAdapter(Source);

this is how the field is defined that is having problems –
{ text: ‘Schedule’, align: ‘center’, columngroup: ‘Services’, columntype: ‘template’, datafield: ‘schedule_service_id’, displayfield: ‘schedule_service’,
createeditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
editor.jqxDropDownList({
autoOpen: true, checkboxes: true, source: servicelistAdapter, displayMember: “service”, valueMember: “service_id”, width: width, height: height, animationType: ‘fade’, selectionRenderer: function () {
return “<span style=’top:4px; position: relative;’>Please Choose:</span>”;
}
});
},
initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
// set the editor’s current value. The callback is called each time the editor is displayed.
var items = editor.jqxDropDownList(‘getItems’);
editor.jqxDropDownList(‘uncheckAll’);
var values = cellvalue.split(/,\s*/);
for (var j = 0; j < values.length; j++) {
for (var i = 0; i < items.length; i++) {
if (items[i].value == values[j]) {
editor.jqxDropDownList(‘checkIndex’, i);
}
}
}
},
geteditorvalue: function (row, cellvalue, editor) {
// return the editor’s value.
return editor.val();
}
},

[hkParticipant]

I have added a $(‘#jqxgrid’).jqxGrid(‘updatebounddata’); with every update row to refresh the page after every update to show me the right cell info. I am sure there is a better way to get the updated info from the adapter or make a new instance of the grid adapter but don’t know how to. please help

updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
var data = “update=true&” + $.param(rowdata);
$.ajax({
dataType: ‘json’,
url: ‘../models/qp_user_data.php’,
data: data,
success: function (data, status, xhr) {
}
});
commit(true);
$(‘#jqxgrid’).jqxGrid(‘updatebounddata’);
}

[DimitarParticipant]

Hi hk,

The correct way is the one implemented in the demo. I am not sure why it does not work on your side.

Best Regards,
Dimitar

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

[Author]

Posts