jQuery UI Widgets › Forums › Grid › grip as using jqxDropDownList
Tagged: angular grid, createeditor, displayMember, dropdownlist editor, grid, jquery grid, jqxgrid, label, value, valueMember
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 8 years, 11 months ago.
-
Author
-
grip displays the label but does not take the value.
$(document).ready(function () {
var data = {};
// prepare the data
var theme = ‘classic’; //tema
var estados_cliente=[
{ value: “0”, label: “Esperando” },
{ value: “1”, label: “Llamado” },
{ value: “2”, label: “Pelandose” },
{ value: “3”, label: “Terminado” }
];var source =
{
datatype: “json”,
datafields:
[
{ name: ‘numero’, type: ‘string’},
{ name: ‘nombre’, type: ‘string’},
{ name: ‘hora_llegada’, type: ‘string’},
{ name: ‘hora_fin’, type: ‘string’},
{ name: ‘estado’ , type: ‘string’},
{name: ‘idlista’, type: ‘string’}],
id: ‘idlista’,
cache: false,
url: ‘listas/datos/lista_espera_peluqueros_datos.php’,
root: ‘Rows’,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
var data = “update=true&estado=” + rowdata.estado;
data = data + “&idlista=” + rowdata.idlista;
$.ajax({
dataType: ‘json’,
url: ‘listas/datos/lista_espera_peluqueros_datos.php’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
},
error: function () {
// cancel changes.
commit(false);
}
});
},beforeprocessing: function(data)
{
source.totalrecords = data[0].TotalRows;},
sort: function()
{
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},};
var cellclass = function (row, columnfield, value) {
if (value == 0) {
return ‘red’;
}
else if (value == 1) {
return ‘yellow’;
}
else if (value == 2) {
return ‘green’;
}
else if (value == 3) {
return ‘blue’;
}
}var dataadapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: ‘100%’,
source: dataadapter,
theme: theme,
autoheight: true,
altrows: true,
enabletooltips: true,
editable: true,
selectionmode: ‘singlecell’,
pageable: true,//paginacion
virtualmode: true,
sortable: false, //ordenacion
rendergridrows: function(params)
{
return params.data;
},
columns: [
{ text: ‘Num.’, datafield: ‘numero’, width: ‘12%’ },
{ text: ‘Nombre’, datafield: ‘nombre’, width: ‘30%’},
{ text: ‘H. llegada’, datafield: ‘hora_llegada’, width: ‘22%’ },
{ text: ‘H. pelado’, datafield: ‘hora_fin’, width: ‘23%’ },
{ text: ‘Estado’, columntype: ‘dropdownlist’,
datafield: ‘estado’,
columntype: ‘dropdownlist’,
cellclassname: cellclass,
width: ‘13%’,
createeditor: function (row, value, editor) {
editor.jqxDropDownList({ source: estados_cliente, displayMember: ‘value’, valueMember: ‘value’ });
}
},
]
});$(‘#jqxgrid’).on(‘cellvaluechanged’, function (event) {
});
});
Hello famp,
Please modify your code as follows:
$(document).ready(function() { var data = {}; // prepare the data var theme = 'classic'; //tema var estados_cliente = [{ valueField: "0", labelField: "Esperando" }, { valueField: "1", labelField: "Llamado" }, { valueField: "2", labelField: "Pelandose" }, { valueField: "3", labelField: "Terminado" }]; var source = { datatype: "json", datafields: [{ name: 'numero', type: 'string' }, { name: 'nombre', type: 'string' }, { name: 'hora_llegada', type: 'string' }, { name: 'hora_fin', type: 'string' }, { name: 'estado', type: 'string' }, { name: 'idlista', type: 'string' }], id: 'idlista', cache: false, url: 'listas/datos/lista_espera_peluqueros_datos.php', root: 'Rows', updaterow: function(rowid, rowdata, commit) { // synchronize with the server – send update command var data = "update=true&estado=" + rowdata.estado; data = data + "&idlista=" + rowdata.idlista; $.ajax({ dataType: 'json', url: 'listas/datos/lista_espera_peluqueros_datos.php', data: data, success: function(data, status, xhr) { // update command is executed. commit(true); }, error: function() { // cancel changes. commit(false); } }); }, beforeprocessing: function(data) { source.totalrecords = data[0].TotalRows; }, sort: function() { // update the grid and send a request to the server. $("#jqxgrid").jqxGrid('updatebounddata', 'sort'); }, }; var cellclass = function(row, columnfield, value) { if (value == 0) { return 'red'; } else if (value == 1) { return 'yellow'; } else if (value == 2) { return 'green'; } else if (value == 3) { return 'blue'; } } var dataadapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid({ width: '100%', source: dataadapter, theme: theme, autoheight: true, altrows: true, enabletooltips: true, editable: true, selectionmode: 'singlecell', pageable: true, //paginacion virtualmode: true, sortable: false, //ordenacion rendergridrows: function(params) { return params.data; }, columns: [{ text: 'Num.', datafield: 'numero', width: '12%' }, { text: 'Nombre', datafield: 'nombre', width: '30%' }, { text: 'H. llegada', datafield: 'hora_llegada', width: '22%' }, { text: 'H. pelado', datafield: 'hora_fin', width: '23%' }, { text: 'Estado', columntype: 'dropdownlist', datafield: 'estado', columntype: 'dropdownlist', cellclassname: cellclass, width: '13%', createeditor: function(row, value, editor) { editor.jqxDropDownList({ source: editorDataAdapter, displayMember: 'valueField', valueMember: 'valueField' }); } }, ] }); $('#jqxgrid').on('cellvaluechanged', function(event) {}); });
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.