Jquery context menu with UpdatePanel

Question

1.00/5 (1 vote)

See more:

I am using jquery context menu on gridview..
I have two parts of the page..
One part contains treeview and other gridview..
Whenever user clicks on node in treeview the data for corresponding node gets loaded in gridview with the help of update panel
But context menu is not getting displayed on gridview..

Posted 19-Feb-13 4:29am

Member 9644631

Add a Solution

Comments

Richard C Bishop 19-Feb-13 10:51am

Did you have a question?

Member 9644631 19-Feb-13 11:07am

yep...

ZurdoDev 19-Feb-13 11:14am

What's the issue? Show some relevant code and then pretend we can't see what you are doing and give us more info. More data please.

Member 9644631 19-Feb-13 11:56am

Here is the snippet...
Data gets loaded properly in gridview on node click in treeview...
But context menu is not getting displayed on right click on gridview row..

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function fnView() {
var hiddenField = document.getElementById("fldProductID");
document.getElementById("fldProductID").value = $("div").filter("[type=ContextMenu]")[0].id.replace("Menu", "");
document.getElementById("linkView").click();
$(document.getElementById("gvProducts")).load();
}

function fnDelete() {
var delText = "Are you sure you want to delete ID=" + $("div").filter("[type=ContextMenu]")[0].id.replace("Menu", "") + " ?";
var result = confirm(delText);
var hiddenDelCnf = document.getElementById("deleteConfirm");
hiddenDelCnf.value = result;
document.getElementById("linkDelete").click();
}

jQuery.fn.setEvents = function (e) {
var me1 = jQuery(this);
return this.each(function () {
var me = jQuery(this);
me.mouseup(function (e) {
if (e.which == 3) {
$("div").filter("[type=ContextMenu]").hide();
fnSetMenu(me.children(':first-child').text(), e.pageX, e.pageY);
window.oncontextmenu = function () {
return false;
}
}
});
});
};
function fnSetMenu(productID, left, top) {
if ($("#Menu" + productID).html() == null) {
var runAt = "\"server\"";
var id = "linkBtnDelete";
var deleteLink = "<asp:LinkButton ID=\"lnkBtnDelete\" OnClientClick=\"return confirm('Are you sure you want to delete?')\" OnClick=\"lnkBtnDelete_Click\" runat=" + runAt + ">Delete";
var strMenuHTML = "<div type=\"ContextMenu\" id=\"Menu" + productID + "\" class=\"contextMenuClass\" mouseonmenu=\"1\"><table style='width:100%;'><tr><td önclick=fnView()>View</td></tr><tr><td önclick=fnDelete()>Delete</td></tr></table></div>";
$("body").append(strMenuHTML);
$.post("MenuHandler.ashx", {}, function (response) {
$("#Menu" + productID).html(response);
});
}
$("#Menu" + productID).css({ top: top + "px", left: left + "px" }).show();
}

$(document).ready(function () {
$("#gvProducts tr.ShowContext").setEvents();
}
);
$(document).click(function (e) {
$clicked = $(e.target);
if (!($clicked.parents().hasClass("ShowContext") || $clicked.hasClass("contextMenuClass") || $clicked.parents().hasClass("contextMenuClass"))) {
$("div").filter("[type=ContextMenu]").hide();
}
});

//function resetDoc() {
// $("#gvProducts tr.ShowContext").setEvents();
// }

function pageLoad(sender, args) {
alert("Partial Postback occur");
if (args.get_isPartialLoad()) {
jQuery.fn.setEvents = function (e) {
var me1 = jQuery(this);
return this.each(function () {
var me = jQuery(this);
me.mouseup(function (e) {
if (e.which == 3) {
$("div").filter("[type=ContextMenu]").hide();

ZurdoDev 19-Feb-13 12:21pm

What happens when you debug? Can you narrow this down a bit?

Member 9644631 19-Feb-13 12:29pm

When i run this the data gets displayed in gridview..Theres no issue here..
But context menu does not get displayed..
Instead the default context menu for the browser gets displayed..
It would be great it u could provide me with the actual snippet for using context menu with dynamic gridview with options like Edit and delete..
I have been trying this for a week now but with no success..
Thanking you..

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)