jQWidgets Forums
Forum Replies Created
-
Author
-
In the grid if there is a row and I delete it , it works fine .But after that if I add another one and try to delete that, it goes wrong . On debugging I see ,it shows jqxGrid as undefined in the code .
November 25, 2013 at 12:24 pm in reply to: JqxGrid header Right click event JqxGrid header Right click event #40520Here 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> -
AuthorPosts