DropDown Should be Display as dropDownwhile adding a row - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: arrow, Cell, cellsrenderer, combobox, custom, DropDownList, editor, grid, jqxgrid

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 10 years, 3 months ago.

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

Author

DropDown Should be Display as dropDownwhile adding a row Posts

July 15, 2014 at 5:39 am DropDown Should be Display as dropDownwhile adding a row #57190

Participant

Hi Peter,

I have grid where I am adding rows. In that rows I have few dropDown combo box. But after adding the rows when some one see it, It is not showing like it is drop down list. If he ll click on it then only he can able to find that it is dropdown list. is there any solution for that to show the user that it is a drop down before clicking on the drop down list.

regards
priyank

July 15, 2014 at 6:07 am DropDown Should be Display as dropDownwhile adding a row #57194

Dimitar

Participant

Hello priyank,

This is because cell editors only appear in edit mode. You may use cellsrenderer to add a small arrow (or some other icon) to each cell of the combobox column to indicate the editor is a combobox.

Best Regards,
Dimitar

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

July 15, 2014 at 6:24 am DropDown Should be Display as dropDownwhile adding a row #57197

priyanknaik88

Participant

Hi Dimitar,

please provide some examples how to add arrow mark in combox using cellsrenderer . As I am new to jqwidget I am not able to do it.

regards
Priyank

July 15, 2014 at 8:30 am DropDown Should be Display as dropDownwhile adding a row #57205

Dimitar

Participant

Hi Priyank,

Here is an example, based on the demo Customized Editors:

<!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.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/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);

            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                return '<span style="position: relative; width: 100%; margin: 4px; float: ' + columnproperties.cellsalign + ';">' + value + '<img src="../../jqwidgets/styles/images/icon-down.png" style="position: absolute; right: 5px;" /></span>';
            }

            $("#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:" });
                        },
                        // 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;
                        },
                        cellsrenderer: cellsrenderer
                    },
                    {
                        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 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.