jQuery UI Widgets Forums TreeGrid Keys/Values Column with custom Dropdown editor in treeGrid

This topic contains 5 replies, has 3 voices, and was last updated by  Hristo 2 weeks, 3 days ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • popposoft
    Participant

    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


    Hristo
    Participant

    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


    popposoft
    Participant

    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


    Hristo
    Participant

    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

    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.


    Hristo
    Participant

    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

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

You must be logged in to reply to this topic.