jQuery UI Widgets › Forums › Grid › JqxGrid header Right click event
This topic contains 2 replies, has 2 voices, and was last updated by Dimitar 11 years, 4 months ago.
-
Author
-
Hi ,
I am using a JqxGrid and dynamically picking its column header and craeted a ‘contextmenu’ event for this which will open a context menu on right click .
This seems to work fine once i launch the UI and try it first time but once context menu opens and is used , this right click event doesnot fire.$(“#jqxgrid”).find(“#columntablejqxgrid”).on(‘contextmenu’, function (event) {
$(“#jqxgrid”).find(“#columntablejqxgrid”).css({“color”:”red”,”border”:”2px solid red”})var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu(‘open’, parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY)
+ 5 + scrollTop);return false;
});Please suggest on this .
Here I am atatching the code which i used to craete a context menu for grid using the ‘columntablejqxgrid`
<html>
<head>
<title id=’Description’>Right-Click on a jqxGrid Row to open a Context Menu.</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/jqxgrid.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/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxwindow.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” src=”jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”scripts/generatedata.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var theme = “”;
// prepare the data
var data = generatedata(25);
//prepare the source
var source =
{
localdata: data,
datatype: “array”,
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ }
],
};
//data adapter for grid
var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: dataAdapter,
theme: theme,
pageable: true,
autoheight: true,
columns: [
{ text: ‘First Name’, datafield: ‘firstname’, width: 100 },
{ text: ‘Last Name’, datafield: ‘lastname’, width: 100 },
{ text: ‘Product’, datafield: ‘productname’, width: 190 },
{ text: ‘Quantity’, datafield: ‘quantity’, width: 90, cellsalign: ‘right’ },
{ text: ‘Price’, datafield: ‘price’, cellsalign: ‘right’, cellsformat: ‘c2’ }
]
});
//list source for column chooser popup
var listSource = [
{ label: ‘First Name’, value: ‘firstname’, checked: true },
{ label: ‘Last Name’, value: ‘lastname’, checked: true },
{ label: ‘Product’, value: ‘productname’, checked: true },
{ label: ‘Quantity’, value: ‘quantity’, checked: true },
{ label: ‘Price’, value: ‘price’, checked: true}
];
//initialize the column chooser list
$(“#columnList”).jqxListBox({ source: listSource, width: 200, height: 200, theme: theme, checkboxes: true });// code for check box selection
$(“#columnList”).on(‘checkChange’, function (event)
{
//grid coulumn show hide on check box click
$(“#jqxgrid”).jqxGrid(‘beginupdate’);
if (event.args.checked)
{
$(“#jqxgrid”).jqxGrid(‘showcolumn’, event.args.value);
}
else
{
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, event.args.value);
}
$(“#jqxgrid”).jqxGrid(‘endupdate’);
}
);// create context menu
var contextMenu = $(“#Menu”).jqxMenu({ width: 200, height: 58, autoOpenPopup: false, mode: ‘popup’, theme: theme });
// assign context menu to grid
$(“#jqxgrid”).on(‘contextmenu’, function () {
return false;
});// handle context menu clicks.
$(“#Menu”).on(‘itemclick’, function (event) {
var args = event.args;
if ($.trim($(args).text()) == “Choose Column”)
{
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
}
});//gird column header click event
$(“#jqxgrid”).find(“#columntablejqxgrid”).on(‘contextmenu’, function (event) {
//var column = event.args.datafield;
$(“#jqxgrid”).find(“#columntablejqxgrid”).css({“color”:”red”,”border”:”2px solid red”})//if (event.which === 3) {
//column = event.args.datafield;
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu(‘open’, parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);return false;
// }
});// initialize the popup window .
$(“#popupWindow”).jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, modalOpacity: 0.01,title :”Choose Column” });
$(“#popupWindow”).jqxWindow(‘hide’);});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgrid” ></div>
<div style=”margin-top: 30px;”>
<div id=”cellbegineditevent”></div>
<div style=”margin-top: 10px;” id=”cellendeditevent”></div>
</div>
<div id=”popupWindow”>
<div id=”columnList”></div>
</div>
<div id=’Menu’>- Choose Column
</div>
</div>
</body>
</html>Hello anshu,
We tested your example, but did not experience the same issue. The context menu could be shown multiple times on right click. Please make sure you are using the latest version of jQWidgets (3.0.4).
You may also find the example in the forum topic Custom Context Menu for Column helpful.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.