jQuery UI Widgets Forums Grid Add events to icon integrated with dropdownlist cell

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

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

  • gonley
    Participant

    I’m using the example you have provided in

    However, I want to add event on the icon so that when the icon is clicked, some message will pop up to indicate something. Is it possible?


    gonley
    Participant

    Display Icon in combo box cell

    This is the link

    • This reply was modified 9 years, 8 months ago by  gonley.

    Dimitar
    Participant

    Hello gonley,

    You can achieve this by using onclick in the cellsrenderer. Here is a modification of the example with the necessary changes made:

    <!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);
    
                var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                    return '<span style="position: relative; width: 100%; margin: 4px; float: ' + columnproperties.cellsalign + ';">' + value + '<img onclick="arrowClick()" 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">
                <script type="text/javascript">
                    function arrowClick() {
                        alert("Clicked on an arrow.");
                    }
                </script>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.