context menu in version 2.5

[AntonyMember]

I updated my test project with version 2.5 and started experiencing a peculiar problem. I was showing a context menu on dblclick event of a grid row. With the new version it stopped responding to dblclick event, subsequently I changed the action to rowdoubleclick event of the grid. Now I find that the rowdoubleclick event just shows the menu but the menu does not stay. I referred to your context menu demo and there I changed event to rowdoubleclick and I experienced the same problem. Please help.

[Peter StoevKeymaster]

Hi Antony,

Could you please post a code which will allow us to test your scenario? Looking forward to your reply.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[AntonyMember]

This is the same code as in your demo. I just changed the event to rowdoubleclick.

————————————

Right-Click on a jqxGrid Row to open a Context Menu.

$(document).ready(function () {
var theme = getTheme();

// prepare the data
var data = generatedata(25);

var source =
{
localdata: data,
datatype: “array”,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
},
deleterow: function (rowid, commit) {
// synchronize with the server – send delete command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
}
};

// initialize the input fields.
$(“#firstName”).addClass(‘jqx-input’);
$(“#lastName”).addClass(‘jqx-input’);
$(“#product”).addClass(‘jqx-input’);
$(“#firstName”).width(150);
$(“#firstName”).height(23);
$(“#lastName”).width(150);
$(“#lastName”).height(23);
$(“#product”).width(150);
$(“#product”).height(23);

if (theme.length > 0) {
$(“#firstName”).addClass(‘jqx-input-‘ + theme);
$(“#lastName”).addClass(‘jqx-input-‘ + theme);
$(“#product”).addClass(‘jqx-input-‘ + theme);
}

$(“#quantity”).jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0, spinButtons: true });
$(“#price”).jqxNumberInput({ width: 150, height: 23, theme: theme, spinButtons: true });

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’ }
]
});

// create context menu
var contextMenu = $(“#Menu”).jqxMenu({ width: 200, height: 58, autoOpenPopup: false, mode: ‘popup’, theme: theme });

$(“#jqxgrid”).bind(‘contextmenu’, function () {
return false;
});

// handle context menu clicks.
$(“#Menu”).bind(‘itemclick’, function (event) {
var args = event.args;
var rowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
if ($(args).text() == “Edit Selected Row”) {
editrow = rowindex;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });

// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#firstName”).val(dataRecord.firstname);
$(“#lastName”).val(dataRecord.lastname);
$(“#product”).val(dataRecord.productname);
$(“#quantity”).jqxNumberInput({ decimal: dataRecord.quantity });
$(“#price”).jqxNumberInput({ decimal: dataRecord.price });

// show the popup window.
$(“#popupWindow”).jqxWindow(‘show’);
}
else {
var rowid = $(“#jqxgrid”).jqxGrid(‘getrowid’, rowindex);
$(“#jqxgrid”).jqxGrid(‘deleterow’, rowid);
}
});

$(“#jqxgrid”).bind(‘rowdoubleclick’, function (event) {
//if (event.args.rightclick) {
$(“#jqxgrid”).jqxGrid(‘selectrow’, event.args.rowindex);
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu(‘open’, parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);

return false;
//}
});

// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01 });
$(“#Cancel”).jqxButton({ theme: theme });
$(“#Save”).jqxButton({ theme: theme });

// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = { firstname: $(“#firstName”).val(), lastname: $(“#lastName”).val(), productname: $(“#product”).val(),
quantity: parseInt($(“#quantity”).jqxNumberInput(‘decimal’)), price: parseFloat($(“#price”).jqxNumberInput(‘decimal’))
};
var rowid = $(“#jqxgrid”).jqxGrid(‘getrowid’, editrow);
$(‘#jqxgrid’).jqxGrid(‘updaterow’, rowid, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});
});

Edit

First Name:

Last Name:

Product:

Quantity:

Price:

Edit Selected Row
Delete Selected Row

[Peter StoevKeymaster]

Hi Antony,

Thank you for the feedback!

We’ll investigate that behavior.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts