'columngroupclick' event? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: click, column, columngroup, event, grid, group, hierarchy, jqxgrid

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

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

Author

'columngroupclick' event? Posts

November 3, 2013 at 8:26 am 'columngroupclick' event? #31841

lotrf3

Participant

I need to turn my columngroup headers into links. Is there an event to capture columngroup clicks? I tried .on(‘columnclick’, function()), but that didn’t help. Am I missing it in the API? Or do I need to make a feature request for it? If so, is there a hack I could use in the meantime?

November 4, 2013 at 7:56 am 'columngroupclick' event? #31855

Dimitar

Participant

Hello lotrf3,

Here is how to achieve this functionality:

<!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.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                     { name: 'SupplierName', type: 'string' },
                     { name: 'Quantity', type: 'number' },
                     { name: 'OrderDate', type: 'date' },
                     { name: 'OrderAddress', type: 'string' },
                     { name: 'Freight', type: 'number' },
                     { name: 'Price', type: 'number' },
                     { name: 'City', type: 'string' },
                     { name: 'ProductName', type: 'string' },
                     { name: 'Address', type: 'string' }
                ],
                url: '../sampledata/orderdetailsextended.xml',
                root: 'DATA',
                record: 'ROW'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {
                }
            });
            // create jqxgrid.
            $("#jqxgrid").jqxGrid(
            {
                width: 690,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autorowheight: true,
                altrows: true,
                columnsresize: true,
                columns: [
                  { text: 'Supplier Name', cellsalign: 'center', align: 'center', datafield: 'SupplierName', width: 110 },
                  { text: 'Name', columngroup: 'ProductDetails', cellsalign: 'center', align: 'center', datafield: 'ProductName', width: 120 },
                  { text: 'Quantity', columngroup: 'ProductDetails', datafield: 'Quantity', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 80 },
                  { text: 'Freight', columngroup: 'OrderDetails', datafield: 'Freight', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 100 },
                  { text: 'Order Date', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', cellsformat: 'd', datafield: 'OrderDate', width: 100 },
                  { text: 'Order Address', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress', width: 100 },
                  { text: 'Price', columngroup: 'ProductDetails', datafield: 'Price', cellsformat: 'c2', align: 'center', cellsalign: 'center', width: 70 },
                  { text: 'Address', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'Address', width: 120 },
                  { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City', width: 80 }
                ],
                columngroups:
                [
                  { text: 'Product Details', align: 'center', name: 'ProductDetails' },
                  { text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
                  { text: 'Location', align: 'center', name: 'Location' }
                ],
                ready: function () {
                    $("#jqxgrid .jqx-grid-columngroup-header").click(function (event) {
                        alert($(event.target).text());
                    });
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 4, 2013 at 11:09 pm 'columngroupclick' event? #31906

lotrf3

Participant

Thanks. Can I access group.name from that event? I am using group.name to store an id (from which I will construct a url to redirect to). So my names are guaranteed to be unique but my text labels are not (which means I can’t just construct a reverse mapping of label->name).

November 5, 2013 at 5:40 am 'columngroupclick' event? #31910

Dimitar

Participant

Hi lotrf3,

Unfortunately, it is not currently possible to do so for column group headers.

Best Regards,
Dimitar

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

November 5, 2013 at 6:51 am 'columngroupclick' event? #31915

lotrf3

Participant

Fair enough. Now should I put in a feature request for this?

November 5, 2013 at 6:56 am 'columngroupclick' event? #31916

Dimitar

Participant

Hi lotrf3,

Thank you, we will consider implementing this feature in the future.

Best Regards,
Dimitar

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

December 4, 2013 at 11:52 pm 'columngroupclick' event? #45999

lotrf3

Participant

For the sake of anyone else who would like to use the above hack, I discovered the following non-obvious quirk: any time you rebind the data adapter, you have to reattach the columngroup click handler. This is of particular interest to anyone who implements custom sorting functions, where rebinding the data adapter is often necessary.

Author

Posts

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

You must be logged in to reply to this topic.