Keys/Values Column with custom Dropdown editor in treeGrid

[popposoftParticipant]

Hello

I’m having troubles implementing the same behaviour I have in a standard jqxGrid based on the example code for Key/Values column. The only difference in code is the json source with a php datasource connected to it.

This is the code for the jqxGrid:

       // this is the datasource for the key/value column
        var sourceAree =
        {
            dataType: "json",
            url: 'dataArea.php',
            cache: false,
            dataFields: [
                { name: 'IdArea', type: 'number' },
                { name: 'DescrizioneArea', type: 'string' },
            ],
            id: 'IdArea'
        };

        var dataAdapterAree = new $.jqx.dataAdapter(sourceAree,
            {
                autoBind: true,
                async: false,
            }
        );

        // this is the grid
        var source =
        {
            datatype: "json",
            url: 'dataPMO.php',
            cache: false,
            dataFields: [
                { name: 'IdProgetto', type: 'number' },
                { name: 'CodProgetto', type: 'string' },
                { name: 'Titolo', type: 'string' },
                { name: 'Descrizione', type: 'string' },
                { name: 'CodArea', type: 'number' },
                { name: 'Area', value: 'CodArea', values: { source: dataAdapterAree.records, value: 'IdArea', name: 'DescrizioneArea' }, type: 'string' },
                { name: 'Proprietario', type: 'string' },
                { name: 'CodTipo', type: 'string' },
                { name: 'DescrizioneTipo', type: 'string' },
                { name: 'DescrizioneSottoTipo', type: 'string' },
                { name: 'DescrizioneSottoSottoTipo', type: 'string' },
                { name: 'Budget', type: 'float' },
                { name: 'Stato', type: 'number' },
                { name: 'Sospeso', type: 'bool' },
                { name: 'CharterSpedito', type: 'bool' },
                { name: 'ChiusuraConfermata', type: 'bool' },
                { name: 'ComunicazioneFineProgetto', type: 'bool' },
                { name: 'DataInizio', type: 'date', format: 'dd/MM/yyyy' },
                { name: 'DataFine', type: 'date', format: 'dd/MM/yyyy' },
                { name: 'DataNuovaFine', type: 'date', format: 'dd/MM/yyyy' },
                { name: 'Ritardo', type: 'number' },
                { name: 'CodProgettoLinkato', type: 'string' }
            ],
            id: 'IdProgetto',
            updaterow: function (rowid, rowdata, commit)
            {
                //cut
            }
        };

        var dataAdapter = new $.jqx.dataAdapter(source,
            {
                autoBind: true,
                //async: false
            }
        );
   
        $("#jqxGrid").jqxGrid(
        {
            source: dataAdapter,
            // cut other parameters
            columns:
            [
                { text: 'Codice Progetto', dataField: 'CodProgetto', width: 100, pinned: false, editable: false },
                { text: 'Titolo', dataField: 'Titolo', width: 170, pinned: false },
                { text: 'Descrizione', dataField: 'Descrizione', width: 250, pinned: false },
                { text: 'Area', dataField: 'CodArea', displayField: 'Area', width: 280, columnType: 'dropdownlist',
                    createeditor: function (row, value, editor) {
                        editor.jqxDropDownList({ source: dataAdapterAree, autoDropDownHeight: true, displayMember: 'DescrizioneArea', valueMember: 'IdArea' });
                    }
                },
                { text: 'Proprietario', dataField: 'Proprietario', width: 85 },
                { text: 'Codice Tipo', columnGroup: 'Categoria', dataField: 'CodTipo', width: 100, hidden: true },
                { text: 'Tipo', columnGroup: 'Categoria', dataField: 'DescrizioneTipo', width: 120 },
                { text: 'Sotto Tipo', columnGroup: 'Categoria', dataField: 'DescrizioneSottoTipo', width: 120 },
                { text: 'Sotto Sotto Tipo', columnGroup: 'Categoria', dataField: 'DescrizioneSottoSottoTipo', width: 120 },
                { text: 'Budget', dataField: 'Budget', width: 90, cellsFormat: 'c2' },
                { text: 'Stato', dataField: 'Stato', width: 60, editable: false },
                { text: 'Sospeso', dataField: 'Sospeso', cellsAlign: 'center', width: 60, columnType: 'checkbox' },
                { text: 'Charter Spedito', dataField: 'CharterSpedito', cellsAlign: 'center', width: 60, columnType: 'checkbox' },
                { text: 'Chiusura Confermata', dataField: 'ChiusuraConfermata', cellsAlign: 'center', width: 60, columnType: 'checkbox' },
                { text: 'EoP Spedito', dataField: 'ComunicazioneFineProgetto', cellsAlign: 'center', width: 60, columnType: 'checkbox' },
                { text: 'Inizio', dataField: 'DataInizio', cellsAlign: 'center', cellsFormat: 'd', width: 100 },
                { text: 'Fine', dataField: 'DataFine', cellsAlign: 'center', cellsFormat: 'd', width: 100 },
                { text: 'Nuova Fine', dataField: 'DataNuovaFine', cellsAlign: "center", cellsFormat: 'd', width: 100 },
                { text: 'Ritardo', dataField: 'Ritardo', width: 70 }
            ],
            columnGroups:
            [
                { text: 'Categoria', name: 'Categoria' }
            ]

        });

I have the exact same configuration for the jqxTreeGrid for the dataAdapters

This is the initialization for the columns in the jqxTreeGrid

columns:
            [
                { text: 'Codice Progetto', dataField: 'CodProgetto', width: 100, pinned: false, editable: false },
                { text: 'Titolo', dataField: 'Titolo', width: 170, pinned: false },
                { text: 'Descrizione', dataField: 'Descrizione', width: 250, pinned: false },
                { text: 'Area', dataField: 'CodArea', displayField: 'Area', width: 280, columnType: 'custom',
                    createEditor: function (row, cellvalue, editor, cellText, width, height)
                    {
                        // construct the editor.
                        editor.jqxDropDownList({ source: dataAdapterAree, autoDropDownHeight: true, displayMember: 'DescrizioneArea', valueMember: 'IdArea', width: '100%', height: '100%' });
                    },
                    initEditor: function (row, cellvalue, editor, celltext, width, height)
                    {
                        var selezione = $("#nestedGrid").jqxTreeGrid('getSelection');
                        var item = editor.jqxDropDownList('getItemByValue', selezione[0]['CodArea']);
                        editor.jqxDropDownList('selectItem', item);
                    },
                    getEditorValue: function (row, cellvalue, editor)
                    {
                        return editor.jqxDropDownList('getSelectedItem').value;
                    }
                },
                { text: 'Proprietario', dataField: 'Proprietario', width: 85 },
                { text: 'Codice Tipo', columnGroup: 'Categoria', dataField: 'CodTipo', width: 100, hidden: true },
                { text: 'Tipo', columnGroup: 'Categoria', dataField: 'DescrizioneTipo', width: 120 },
                { text: 'Sotto Tipo', columnGroup: 'Categoria', dataField: 'DescrizioneSottoTipo', width: 120 },
                { text: 'Sotto Sotto Tipo', columnGroup: 'Categoria', dataField: 'DescrizioneSottoSottoTipo', width: 120 },
                { text: 'Budget', dataField: 'Budget', width: 90, cellsFormat: 'c2' },
                { text: 'Stato', dataField: 'Stato', width: 60, editable: false },
                { text: 'Sospeso', dataField: 'Sospeso', cellsAlign: 'center', width: 60, cellsRenderer: checkboxCustom },
                { text: 'Charter Spedito', dataField: 'CharterSpedito', cellsAlign: 'center', width: 60, cellsRenderer: checkboxCustom },
                { text: 'Chiusura Confermata', dataField: 'ChiusuraConfermata', cellsAlign: 'center', width: 60, cellsRenderer: checkboxCustom },
                { text: 'EoP Spedito', dataField: 'ComunicazioneFineProgetto', cellsAlign: 'center', width: 60, cellsRenderer: checkboxCustom },
                { text: 'Inizio', dataField: 'DataInizio', cellsAlign: 'center', cellsFormat: 'd', width: 100, cellsRenderer: dataNull },
                { text: 'Fine', dataField: 'DataFine', cellsAlign: 'center', cellsFormat: 'd', width: 100, cellsRenderer: dataNull },
                { text: 'Nuova Fine', dataField: 'DataNuovaFine', cellsAlign: "center", cellsFormat: 'd', width: 100, cellsRenderer: dataNull },
                { text: 'Ritardo', dataField: 'Ritardo', width: 70 }
            ]

In the initEditor I have to get the selected row to select in the dropdown the right item when I edit the cell, otherwise it autoselects “Please choose:” every time, that’s the only way I made it work, because I don’t have the CodArea code anywhere else in the field I’m editing.

In the getEditorValue I have troubles figuring out how to output the key/value I want, because I’m editing the “Area” column I don’t have in the mysql fields. I want to output in the grid the text and update only the CodArea code in the updateRow.

Of course I can’t do symply this: $("#nestedGrid").jqxTreeGrid('setCellValue', 1, 'CodArea', editor.jqxDropDownList('getSelectedItem').value); because I get sync errors all over the place. Can’t mess manually with setCellValue in getEditorValue, I got it.

What can I do to fix this code and update CodArea AND the foreing key text in the field when I select from the dropdown?

Thanks in advance

[HristoParticipant]

Hello popposoft,

Could is the first code may not work. Are there any errors.
And another thing in your code is not used all opportunities of an arguments (in second code part) could use cellValue to set selectItem.

initEditor: function (row, cellvalue, editor, celltext, width, height) {
   editor.jqxDropDownList('selectItem', cellvalue);
},

Could you try to simplify this code with use only createEditor.
Similar like in this demo: (from grid)
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customizededitors.htm?arctic

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[popposoftParticipant]

Hello, thanks for your reply

The issue I’m having is not related to jqxGrid, since I’m able to use the feature with success in the normal jqxGrid (and that is pretty awesome indeed).

I want to reproduce the key/value dropdown (or combobox, it’s the same) in jqxTreeGrid, and for the moment I’m struggling without any success.
The second code part (initEditor) is in fact related to jqxTreeGrid initialization and it doesn’t work if I use the cellValue parameter to select the item. I already tried that. And that’s not the matter of my request.

What I’m unable to recreate is the final part: the row update (getEditorValue).
The field I’m editing needs to write in the grid the text and change the code in the database. I don’t need the text in the database since that string is the only thing I can change in the cell returning from the edit. If I pass the code, it writes into the cell and in the wrong json field.
The jqxgrid changes the string AND the code field related to the string.

How can I achieve this result?

Thanks again in advance for your help and support

Thanks

[HristoParticipant]

Hello popposoft,

We recommend to use described arguments from the properties. (cellValue in initEditor)
Described behavior is strange.
About ‘getEditorValue’ you could get value with editor.val();.
Could you try the approach presented in the following demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-custom-editors.htm?arctic
Please write again if you do not resolve this issue. (Are there any error messages)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[jadhavsagar.jadhav@gmail.comParticipant]

Hello jQWidgets Team,

Can you have demo e.g of JQXTree grid with combo-box in the tree grid column. We are planning to purchase jqxtree grid but not able to finalize because of the unavailability of this feature. Please reply as soon as possible.

[HristoParticipant]

Hello jadhavsagar.jadhav@gmail.com,

I just replace the jqxDropDownList with the jqxComboBox.
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts