jQWidgets Forums

Tagged: Cell, celldoubleclick, click, double-click, grid, jqxgrid, row, rowclick

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

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

Author

Rowclick and celldoubleclick Posts

October 1, 2013 at 8:04 am Rowclick and celldoubleclick #29929

Jane

Participant

Hi,

I have problem with rowclick and cellcoubleclick. Rowclick works good but when I double-click on row, which is not selected it calls only rowclick. Is there a way to call rowclick and then celldoubleclick together? There is my code:

$(‘#’ + _bro.id).jqxGrid({
source: dataAdapter,
columnsresize: true,
columnsreorder: true,
width: ‘100%’,
autoheight: true,
sortable: true,
altrows: true,
sorttogglestates: 1,
handlekeyboardnavigation: function (event) {
_onKeyDown(event);
},
columns: _brwColumns,
rowsheight: 18,
columnsheight: 18,
selectionmode: ‘singlerow’
});

$(‘#’ + _bro.id).on(‘rowclick’, function (event) {
_onSelectRowClick(event);
});

$(‘#’ + _bro.id).on(“celldoubleclick”, function (event) {
var column = event.args.column;
var rowindex = event.args.rowindex;
var columnindex = event.args.columnindex;
var cell = $(‘#’ + _bro.id).jqxGrid(‘getcell’, rowindex, (columnindex).toString());
if (cell.datafield == ‘0’) {
_markClick(rowindex, cell);
}

});

Thanks Jane

October 2, 2013 at 8:01 am Rowclick and celldoubleclick #30028

Dimitar

Participant

Hello Jane,

This example (based on the demo ) demonstrates that both events are fired successfully:

<!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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            var url = "../sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: false,
                selectionmode: 'singlerow',
                columns: [
                  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });
            $("#jqxgrid").on("rowclick", function () {
                $("body").append("rowclick <br />");
            });
            $("#jqxgrid").on("celldoubleclick", function () {
                $("body").append("celldoubleclick <br />");
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Please make sure you are using the latest version of jQWidgets (3.0.3), too.

Best Regards,
Dimitar

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

October 3, 2013 at 8:32 am Rowclick and celldoubleclick #30117

Jane

Participant

Hi,

I am testing your example and it works good. I’ll have to revise my code. We use jQWidgets (3.0.3)
Thanks for the advice.

Jane

Author

Posts

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

You must be logged in to reply to this topic.