jQuery UI Widgets Forums Grid Column Click

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Column Click Posts
  • Column Click #32616

    petzi
    Participant

    Hi!
    I’m am trying to add a context menu to the Column header of the jqxGrid control but with no luck. I have tried to bind to the “columnclick” event but it just doesn’t work.

    We are using:
    jQuery 1.10.2
    jqWidgets 3.0.3
    IE9, Chrome (lastest), FF

    My code:
    $(“#jqxGrid”).on(“columnclick”, function (event)
    {
    console.log(‘Working!!’);
    });

    Regards
    Petzi

    Edit 1:
    I also tried adding this code to the demo “defaultfunctionality” without any sucess.

    Column Click #32625

    Peter Stoev
    Keymaster

    Hi Petzi,

    That code would not work for the Default Functionality demo due to the reason that the Grid’s ID used in the demo is “jqxgrid”, not “jqxGrid”.

    Working sample:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting.
    </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/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/demos.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    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,
    pageable: true,
    autoheight: true,
    sortable: true,
    altrows: true,
    enabletooltips: true,
    editable: true,
    selectionmode: 'multiplecellsadvanced',
    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('columnclick', function (event) {
    alert('column clicked');
    });
    });
    </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,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Column Click #32633

    petzi
    Participant

    Hello Peter, thanks for the fast reply!

    So first problem solved, thanks!

    But is there a way to detect the rightmouse button, instead of just the left?
    I found that the event ‘rowclick’ has ‘rightclick’ but columnclick doesn’t.

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

You must be logged in to reply to this topic.