jQWidgets Forums

Tagged: Cell, DropDownList, editor, empty, grid, jqxDropDownList, jqxgrid, placeHolder

This topic contains 4 replies, has 2 voices, and was last updated by essexsteph 11 years, 7 months ago.

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

Author

Drop Down List – Default Values Posts

September 9, 2013 at 8:22 am Drop Down List – Default Values #28567

Participant

Hi All,

Forgive what may be a simple question but I’m in the early days of using the grid. Everything has been going OK but now stuck on using a drop down list to select values for a cell. Here’s the relevant code:
createeditor: function (row, column, editor) { var list = ['', 'x', '1', '2']; editor.jqxDropDownList({ autoDropDownHeight: true, source: list }); }
What I was hoping would happen was that empty cells would be set to ” and then the prompt would never appear and a cell with a value in could be set to ”, i.e. deleted. Instead the default prompt appears for an empty cell.

I’d be grateful for any advice on how to get this to work.

Thanks,

Steph

September 10, 2013 at 5:10 am Drop Down List – Default Values #28622

Dimitar

Participant

Hello Steph,

To prevent the editor from showing for empty cells you should disable those cells’ editing. Here is how (note the “Ship Country” column):

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to customize the Grid editors.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            // 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: 670,
                source: ordersAdapter,
                theme: theme,
                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:" });
                        },
                        // 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) {
                            var list = ['', 'x', '1', '2'];
                            editor.jqxDropDownList({ autoDropDownHeight: true, source: list });
                        },
                        cellbeginedit: function (row, datafield, columntype, value) {
                            if (value == "") {
                                return false;
                            };
                        }
                    },
                    { 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/

September 12, 2013 at 9:08 am Drop Down List – Default Values #28838

essexsteph

Participant

Thanks Dimitar,

Sorry, that wasn’t quite the question I was asking.

Have a look at http://ttsanta.azurewebsites.net/grid.html. The ‘Qu 1’ column has a dropdown with the possible values of ‘Empty’ – i.e. “”, x, 1, 2 etc. If I choose x then that is selected next time I click on the cell and the dropdown list is shown. If I select “” – the ’empty’ then when I click in the cell again the prompt is shown rather than ’empty’ being selected from the dropdown list.

Hope you can advise further.

Steph

September 12, 2013 at 9:56 am Drop Down List – Default Values #28842

Dimitar

Participant

Hi Steph,

The only solution in this case is to set the placeHolder value to an empty string, i.e.:

editor.jqxDropDownList({ autoDropDownHeight: true, source: markslist, placeHolder: "" });

Best Regards,
Dimitar

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

September 12, 2013 at 3:28 pm Drop Down List – Default Values #28865

essexsteph

Participant

That works fine, thank you.

Author

Posts

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

You must be logged in to reply to this topic.