jQWidgets Forums

Tagged: combobox, editor, grid, index, initeditor, jqxComboBox, jqxgrid, selectedIndex

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 1 month ago.

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

Author

Grid combobox Posts

February 3, 2015 at 4:02 pm Grid combobox #66445

masda

Participant

Hello
I have this code:

$(“#jqxgrid”).jqxGrid(
{
width: 798,
source: dataAdapter,
columnsresize: true,
sortable: true,
columnsreorder: true,
showfilterrow: true,
selectionmode: ‘singlecell’,
editable: true,
filterable: true,
columns: [
{ text: ‘Nome’, dataField: ‘contactos_nome’},
{ text: ‘Tipo’, dataField: ‘contactos_tipo’, width: 300, columntype: ‘combobox’,
createeditor: function (row, column, editor) {
var source =
{
datatype: “json”,
datafields: [
{ name: ‘tipo_contacto_id’ },
{ name: ‘tipo_contacto_descricao’ },
],
url: ‘./php/credores_maint_contactos.php’,
data: {funcao : funcao}
};
var dataAdapter = new $.jqx.dataAdapter(source);

editor.jqxComboBox({autoDropDownHeight: true, source: dataAdapter, displayMember: ‘tipo_contacto_descricao’, valueMember: ‘tipo_contacto_id’});

},
initeditor: function (row, column, editor) {
editor.jqxComboBox({selectedIndex : 3});
},
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == “”) return oldvalue;
}
},
{ text: ‘Contacto’, dataField: ‘contactos_descricao’, width: 180 }
]
});

my combobox fill with the correct values, but don’t select the correct index.
what is the problem?
Thanks

February 4, 2015 at 8:10 am Grid combobox #66473

Dimitar

Participant

Hello masda,

Your code seems correct. Please make sure you are using the latest version of jQWidgets (3.7.0). Here is an example, based on the demo Customized Editors, that is working fine with it (note the first column):

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var ordersSource =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: "../sampledata/orders.xml",
                pager: function (pagenum, pagesize, oldpagenum) {
                    // callback called when a page or page size is changed.
                },
                updaterow: function (rowid, rowdata, result) {
                    // synchronize with the server - send update command
                    // call result with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    result(true);
                }
            };
            var ordersAdapter = new $.jqx.dataAdapter(ordersSource);

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: ordersAdapter,
                selectionmode: 'singlecell',
                editable: true,
                pageable: true,
                autoheight: true,
                columns: [
                    {
                        text: 'Ship City', datafield: 'ShipCity', width: 150, columntype: 'combobox',
                        createeditor: function (row, column, editor) {
                            // assign a new data source to the combobox.
                            var list = ['Stuttgart', 'Rio de Janeiro', 'Strasbourg'];
                            editor.jqxComboBox({ autoDropDownHeight: true, source: list, promptText: "Please Choose:" });
                        },
                        initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
                            editor.jqxComboBox({
                                selectedIndex: 2
                            });
                        },
                        // update the editor's value before saving it.
                        cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                            // return the old value, if the new value is empty.
                            if (newvalue == "") return oldvalue;
                        }
                    },
                    {
                        text: 'Ship Country', datafield: 'ShipCountry', width: 150, columntype: 'dropdownlist',
                        createeditor: function (row, column, editor) {
                            // assign a new data source to the dropdownlist.
                            var list = ['Germany', 'Brazil', 'France'];
                            editor.jqxDropDownList({ autoDropDownHeight: true, source: list });
                        },
                        // update the editor's value before saving it.
                        cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                            // return the old value, if the new value is empty.
                            if (newvalue == "") return oldvalue;
                        }
                    },
                    { text: 'Ship Name', datafield: 'ShipName', columntype: 'combobox' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.