jQuery UI Widgets Forums Grid Custom Context Menu for Column

This topic contains 7 replies, has 3 voices, and was last updated by  Dimitar 8 years, 6 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Custom Context Menu for Column #31330

    sergey
    Member

    Hi,

    I would like to show custom context menu for column by right click on it. It will allow to hide/delete column, change it’s formatting. I tried to do it via column click event like in the code below

    var clickedColumn = udnefined;
    $("#jqxGrid".on("columnclick", function (event) {
    var column = event.args.column;
    if (event.args.rightclick) {
    clickedColumn = column;
    var scrollTop = $(window).scrollTop();
    var scrollLeft = $(window).scrollLeft();
    $("#Menu").jqxMenu('open', parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
    return false;
    }
    });

    This code does not work. A clickcolumn event occures only for left mouse button click.

    Could you provide a solution for my issue?

    Custom Context Menu for Column #31334

    Dimitar
    Participant

    Hello sergey,

    Please check oout the demo Context Menu. We hope it is helpful to you.

    Best Regards,
    Dimitar

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

    Custom Context Menu for Column #31433

    sergey
    Member

    Hi Dimitar,

    The provided solution works only for context menu for rows. I want to show a context menu when user right-clicks on column header.

    Could you provide a working solution for it?

    Best regards,
    Sergey

    Custom Context Menu for Column #31439

    Dimitar
    Participant

    Hi Sergey,

    Here is an example:

    <!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: 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' }
    ], ready: function () {
    $(".jqx-grid-column-header").mousedown(function (event) {
    var button = event.which;
    if (button == 3) {
    $("#Menu").jqxMenu('open', parseInt(event.pageX) + 5, parseInt(event.pageY) + 5);
    }
    });
    }
    });
    $("#jqxgrid").on('contextmenu', function () {
    return false;
    });
    var contextMenu = $("#Menu").jqxMenu({ width: 200, height: 58, autoOpenPopup: false, mode: 'popup', theme: theme });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid">
    </div>
    <div id="Menu">
    <ul>
    <li>Context menu</li>
    </ul>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Custom Context Menu for Column #78886

    chi
    Participant

    Hi,

    I’ve two jqxgrid on a single html page when i use this ready function() for one grid automatically even the other grid is getting the context menu .
    how to apply context menu for a specific grid header. is there any alternative for this “$(“.jqx-grid-column-header”)” to apply to just one jqxgrid.

    ready: function () {
    $(“.jqx-grid-column-header”).mousedown(function (event) {
    var button = event.which;
    if (button == 3) {
    $(“#Menu”).jqxMenu(‘open’, parseInt(event.pageX) + 5, parseInt(event.pageY) + 5);
    }
    });
    }

    Custom Context Menu for Column #78894

    Dimitar
    Participant

    Hi chi,

    You can narrow the jQuery selection down by including the grid’s id. For example, if the id of the grid you wish to have a context menu is jqxGrid1, you can try the following:

    ready: function() {
        $("jqxGrid1 .jqx-grid-column-header").mousedown(function(event) {
            var button = event.which;
            if (button == 3) {
                $("#Menu").jqxMenu('open', parseInt(event.pageX) + 5, parseInt(event.pageY) + 5);
            }
        });
    }

    Best Regards,
    Dimitar

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

    Custom Context Menu for Column #78896

    chi
    Participant

    hi Dimitar ,

    i tried but its not working my grid id is “chart-grid” here is what i tried

    ` ready: function() {
    $(“chart-grid .jqx-grid-column-header”).mousedown(function(event) {
    var button = event.which;
    if (button == 3) {
    $(“#Menu”).jqxMenu(‘open’, parseInt(event.pageX) + 5, parseInt(event.pageY) + 5);
    }
    });
    }`

    Custom Context Menu for Column #78899

    Dimitar
    Participant

    Hi chi,

    I am sorry, I missed the “#” in my code sample. With this essential change, your code should be:

    ready: function() {
        $("#chart-grid .jqx-grid-column-header").mousedown(function(event) {
            var button = event.which;
            if (button == 3) {
                $("#Menu").jqxMenu('open', parseInt(event.pageX) + 5, parseInt(event.pageY) + 5);
            }
        });
    }

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.