jQuery UI Widgets › Forums › Grid › Custom Context Menu for Column
Tagged: click, column, columnclick, context, Context Menu, contextmenu, grid, Header, jqxgrid, Menu, right
This topic contains 7 replies, has 3 voices, and was last updated by Dimitar 9 years, 2 months ago.
-
Author
-
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?
Hello sergey,
Please check oout the demo Context Menu. We hope it is helpful to you.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/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,
SergeyHi 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,
DimitarjQWidgets team
http://www.jqwidgets.com/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);
}
});
}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,
DimitarjQWidgets team
http://www.jqwidgets.com/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);
}
});
}`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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.