DataTable and drop down list

[BoboParticipant]

I have a data table, with its source adapter; one of the columns is a drop down list, with another source adapter.
When i close drop down, choosing an item, the value does not appear on the table cell, the cell is blank.
Anyone can help me?? Where is the error?? Below my code (copy/past from the example of this site):

$(document).ready(function () {
<?php buildMenu(1) ?>
var mat = {
type: ‘POST’,
data:{Qry: ‘ELE_MAT’, SS: anno},
url: ‘DataAccess/DA_GestMag.php’,
datatype: “json”,
datafields: [
{ name: ‘ID_MATERIALE’, type: ‘int’ },
{ name: ‘DS_MATERIALE’, type: ‘string’ }
]
};
var matAdapter = new $.jqx.dataAdapter(mat, { uniqueDataFields: [‘ID_MATERIALE’] });

var matDett = {
type: ‘POST’,
data:{Qry: ‘ELE_DETT’, SS: anno},
url: ‘DataAccess/DA_GestMag.php’,
datatype: “json”,

datafields: [
{ name: ‘ID_MATERIALE’, type: ‘int’ },
{ name: ‘DS_MATERIALE’, type: ‘string’ },
{ name: ‘CD_COLORE’, type: ‘string’ },
{ name: ‘CD_TAGLIA’, type: ‘string’ }
]
};
var matDettAdapter = new $.jqx.dataAdapter(matDett);

$(“#tabMaterialiDett”).jqxDataTable({
width: ‘100%’,
height: 200,
theme: style,
source: matDettAdapter,
editable: true,
columns: [
{ text: ‘IdMat’, dataField: ‘ID_MATERIALE’, width: ‘25%’, hidden: false },
{ text: ‘Materiale’, dataField: ‘DS_MATERIALE’, cellsAlign: ‘center’, align: ‘center’, width: ‘33%’, editable: true,
columntype: ‘template’,
createEditor: function (row, cellvalue, editor, cellText, width, height) {
// construct the editor.
editor.jqxDropDownList({
source: matAdapter, displayMember: ‘DS_MATERIALE’, width: width, height: height
});
},
initEditor: function (row, cellvalue, editor, celltext, width, height) {
editor.jqxDropDownList({ width: width, height: height });
editor.val(cellvalue);
},
getEditorValue: function (row, cellvalue, editor) {
return editor.val();
}
},
{ text: ‘Taglia’, dataField: ‘CD_TAGLIA’, cellsAlign: ‘center’, align: ‘center’, width: ‘34%’ },
{ text: ‘Colore’, dataField: ‘CD_COLORE’, cellsAlign: ‘center’, align: ‘center’, width: ‘33%’ }
],
showToolbar: true,
toolbarHeight: 35,
renderToolbar: function(toolBar)
{
var toTheme = function (className) {
if (style == “”) return className;
return className + ” ” + className + “-” + style;
}
// appends buttons to the status bar.
var container = $(“<div style=’overflow: hidden; position: relative; height: 100%; width: 100%;’></div>”);
var buttonTemplate = “<div style=’float: left; padding: 3px; margin: 2px;’><div style=’margin: 4px; width: 16px; height: 16px;’></div></div>”;
var addButton = $(buttonTemplate);
var editButton = $(buttonTemplate);
var deleteButton = $(buttonTemplate);
var cancelButton = $(buttonTemplate);
var updateButton = $(buttonTemplate);
container.append(addButton);
container.append(editButton);
container.append(deleteButton);
container.append(cancelButton);
container.append(updateButton);
toolBar.append(container);
addButton.jqxButton({cursor: “pointer”, enableDefault: false, height: 25, width: 25 });
addButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-plus’));
addButton.jqxTooltip({ position: ‘bottom’, content: “Add”});
editButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
editButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-edit’));
editButton.jqxTooltip({ position: ‘bottom’, content: “Edit”});
deleteButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
deleteButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-delete’));
deleteButton.jqxTooltip({ position: ‘bottom’, content: “Delete”});
updateButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
updateButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-save’));
updateButton.jqxTooltip({ position: ‘bottom’, content: “Save Changes”});
cancelButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
cancelButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-cancel’));
cancelButton.jqxTooltip({ position: ‘bottom’, content: “Cancel”});
var updateButtons = function (action) {
switch (action) {
case “Select”:
addButton.jqxButton({ disabled: false });
deleteButton.jqxButton({ disabled: false });
editButton.jqxButton({ disabled: false });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
case “Unselect”:
addButton.jqxButton({ disabled: false });
deleteButton.jqxButton({ disabled: true });
editButton.jqxButton({ disabled: true });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
case “Edit”:
addButton.jqxButton({ disabled: true });
deleteButton.jqxButton({ disabled: true });
editButton.jqxButton({ disabled: true });
cancelButton.jqxButton({ disabled: false });
updateButton.jqxButton({ disabled: false });
break;
case “End Edit”:
addButton.jqxButton({ disabled: false });
deleteButton.jqxButton({ disabled: false });
editButton.jqxButton({ disabled: false });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
}
}
var rowIndex = null;
$(“#tabMaterialiDett”).on(‘rowSelect’, function (event) {
var args = event.args;
rowIndex = args.index;
updateButtons(‘Select’);
});
$(“#tabMaterialiDett”).on(‘rowUnselect’, function (event) {
updateButtons(‘Unselect’);
});
$(“#tabMaterialiDett”).on(‘rowEndEdit’, function (event) {
updateButtons(‘End Edit’);
});
$(“#tabMaterialiDett”).on(‘rowBeginEdit’, function (event) {
updateButtons(‘Edit’);
});
addButton.click(function (event) {
if (!addButton.jqxButton(‘disabled’)) {
// add new empty row.
$(“#tabMaterialiDett”).jqxDataTable(‘addRow’, null, {}, ‘first’);
// select the first row and clear the selection.
$(“#tabMaterialiDett”).jqxDataTable(‘clearSelection’);
$(“#tabMaterialiDett”).jqxDataTable(‘selectRow’, 0);
// edit the new row.
$(“#tabMaterialiDett”).jqxDataTable(‘beginRowEdit’, 0);
updateButtons(‘add’);
}
});
cancelButton.click(function (event) {
if (!cancelButton.jqxButton(‘disabled’)) {
// cancel changes.
$(“#tabMaterialiDett”).jqxDataTable(‘endRowEdit’, rowIndex, true);
}
});
updateButton.click(function (event) {
if (!updateButton.jqxButton(‘disabled’)) {
// save changes.
$(“#tabMaterialiDett”).jqxDataTable(‘endRowEdit’, rowIndex, false);
}
});
editButton.click(function () {
if (!editButton.jqxButton(‘disabled’)) {
$(“#tabMaterialiDett”).jqxDataTable(‘beginRowEdit’, rowIndex);
updateButtons(‘edit’);
}
});
deleteButton.click(function () {
if (!deleteButton.jqxButton(‘disabled’)) {
$(“#tabMaterialiDett”).jqxDataTable(‘deleteRow’, rowIndex);
updateButtons(‘delete’);
}
});
}
});
})

[HristoParticipant]

Hello Bobo,

I tested this example and it seems to work fine:
http://jsfiddle.net/wrkc3xq8/
Could you clarify it?

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[lucoeParticipant]

I’m using a dataTable which has a dropDownList as a column. I would like that when it chosen a item in the dropDownList it was removed form the list, leaving in the list only those not chosen yet. This doesn’t work. I’ve tryed the following solutions, but none successful.
1 – to directly remove the item from dataAdapter.records
2 – to remove the item from the object used to assign source.localData and I’ve after create the dataAdapter with this source, assigning it to same initial reference.
3 – to recreate the source with a new data in localData, and I’ve after create the dataAdapter with this source, assigning it to same initial reference.

[HristoParticipant]

Hello lucoe,

I would like to ask you for more details.
What do you want to achieve?
If you want to update the values of the editor in the edit mode then you should change it dynamically.
For this purpose, the createEditor and initEditor callbacks will be helpful.
Please, take a look at this demo.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[lucoeParticipant]

Hi, Hristo.
Thank you for your attention.

What I need is to refresh the dropDownList records after a choice, so that the chosen item is no longer displayed in the list so that the user does not choose it twice.

I don’t know how to use the createEditor or initEditor to refresh the dropDownList items. I did not understand seeing your example. Could you give a more didactic example, please.

If necessary, I can send the code.

Thanks.

[adminKeymaster]

Hi,

I think you need to implement getEditorValue of the columns, too and debug the result of the val method in this case. For ex: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/javascript-datatable-custom-editors.htm?light

Regards,
Peter

[Author]

Posts