jQuery UI Widgets Forums Grid grip as using jqxDropDownList

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • grip as using jqxDropDownList #81801

    famp
    Participant

    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) {

    });

    });

    grip as using jqxDropDownList #81912

    Dimitar
    Participant

    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,
    Dimitar

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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.