Sign In| Join
Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Last post May 20, 2011 04:38 AM by asteranup
Member
82 Points
59 Posts
May 17, 2011 06:23 AM|LINK
Hi team,
In my project i'm using jqgrid, in that jqgrid i have one button for confirmation,when i click that button it will open a model popup window,
please tell me how to handel model popup in jqgrid.................
this is my grid ...
$("#InterviewsAvailable").jqGrid({ url: '<%= ConfigurationManager.AppSettings["VPath"] %>Json/GetMockupInterviewsAvailableList1', datatype: 'json', mtype: 'GET', colNames: [' ', 'Interview Tittle', 'Description', 'Take the Interview'], colModel: [ { name: 'InterviewId', index: 'InterviewId', width: 10, hidden: true }, { name: 'InterviewTittle', index: 'InterviewTittle', width: 50, center: 'center', formatter: InterviewTittleLinkButton, sortable: true }, { name: 'Description', index: 'Description', width: 90, center: 'left', sortable: false }, { width: 50, formatter: ConfirmationButton } ], jsonReader: { repeatitems: false, id: "0" }, rowNum: 5, rowList: [5, 10, 20, 30, 40, 50], pager: jQuery('#InterviewsAvailablePager'), emptyrecords: "There is no data", // viewrecords: true, repeatitems: false, sortname: 'InterviewTittle', sortorder: "desc", height: "auto", width: "940" }); });
function InterviewsAvailableButton(cellValue, Options, RowObject) { var id = RowObject.InterviewId return "<a href='#' class='removebtn' style='height:18px' >Confirm</a>"; }
please help me how to get popup window when i click confirm button............
All-Star
30184 Points
4906 Posts
May 17, 2011 12:35 PM|LINK
Hi,
You cn try something like below-
HTML-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" /> <link href="http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#UsersGrid").jqGrid({ url: 'jqGridHandler.ashx', datatype: 'json', height: 250, colNames: ['UserID', 'UserName', 'FirstName', 'MiddleName', 'LastName', 'EmailID', 'Actions' ], colModel: [ { name: 'UserID', index: 'UserID', width: 100, sortable: true }, { name: 'UserName', width: 100, sortable: true }, { name: 'FirstName', width: 100, sortable: true }, { name: 'MiddleName', width: 100, sortable: true }, { name: 'LastName', width: 100, sortable: true }, { name: 'EmailID', width: 150, sortable: true }, { name: 'act', index: 'act', width: 100, sortable: false } ], rowNum: 10, rowList: [10, 20, 30], pager: '#UsersGridPager', sortname: 'UserID', viewrecords: true, sortorder: 'asc', gridComplete: function() { var ids = jQuery("#UsersGrid").jqGrid('getDataIDs'); for (var i = 0; i < ids.length; i++) { var cl = ids[i]; var confirm = "<a href='#' customVal=" + cl + " class='confirm'>Confirm message</a>"; jQuery("#UsersGrid").jqGrid('setRowData', ids[i], { act: confirm }); } $("a.confirm").click(function() { var gridRowID = $(this).attr("customVal"); $("#dialog").dialog(); }) }, caption: 'Demo' }); $("#UsersGrid").jqGrid('navGrid', '#UsersGridPager', { edit: false, add: false, del: false }); }); </script> </head> <body> <form id="form1" runat="server"> <div id="dialog" style="display:none">Are you sure you want to do the processing?</div> <table id="UsersGrid" cellpadding="0" cellspacing="0"> <div id="UsersGridPager"> </div> </table> </form> </body> </html>
<%@ WebHandler Language="C#" Class="jqGridHandler" %> using System; using System.Web; public class jqGridHandler : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "application/json"; string data = "{\"page\":1,\"total\":50,\"records\":500,\"rows\":[{\"id\":1,\"cell\":[\"1\",\"AXKFCPWPPH\",\"WHEGRECKAB\",\"URJXGHNQMR\",\"MOKYPQTENN\",\"IHIOTWWTNS@PDK.com\"]},{\"id\":2,\"cell\":[\"2\",\"UFVPPYOTAE\",\"XXMXXFROND\",\"IVAXKKUHJS\",\"SQXLNFMDUK\",\"HEBUHCBFTU@SOA.com\"]},{\"id\":3,\"cell\":[\"3\",\"HJUYXXCXQF\",\"QOWKFRNFTX\",\"MIAINKKAXO\",\"EJWOAPDIWQ\",\"DVEOYANHWS@GYW.com\"]},{\"id\":4,\"cell\":[\"4\",\"CNNALPUBVS\",\"FEHECXULKV\",\"YHRSBJMFTC\",\"APIRFNFSXA\",\"UAUQJFKJXG@OJW.com\"]},{\"id\":5,\"cell\":[\"5\",\"FXJNOXOGPC\",\"JFHRUTKUJU\",\"DPMHXTFFKF\",\"EJKHKXSNWU\",\"LFONFVSSVJ@IPP.com\"]},{\"id\":6,\"cell\":[\"6\",\"YWYYSKJYEE\",\"HKFSQEWJRC\",\"PCSGKBSGOB\",\"NOUNOYEBQP\",\"LKOUYMFYBN@DCN.com\"]},{\"id\":7,\"cell\":[\"7\",\"XFLVHYSLTL\",\"LQXWWEVXAS\",\"WKQUWBMSQB\",\"BTXOPIVFDL\",\"XMFJANXELW@MFM.com\"]},{\"id\":8,\"cell\":[\"8\",\"SHDYQEAAXE\",\"WDFNARWJEE\",\"KBJGDNHGPW\",\"UEGJOJWBYT\",\"XSLRELQFJD@EDT.com\"]},{\"id\":9,\"cell\":[\"9\",\"JITKDSJSUQ\",\"VODMGPSHNH\",\"QSCDSUNLIO\",\"ERFMEMVIXE\",\"YIFGXWIQQS@KHA.com\"]},{\"id\":10,\"cell\":[\"10\",\"OKKECUJQUY\",\"DTFACCLGXC\",\"LQTKWUUBJR\",\"BKVNFEYRII\",\"AMCJIUJVJG@TYG.com\"]}]}"; context.Response.Write(data); } public bool IsReusable { get { return false; } } }
May 19, 2011 12:39 PM|LINK
Hi boss,
I have a small issue in this how can i get both ID and Name in button clikc................
please help me in this issue...............
May 20, 2011 04:38 AM|LINK
By button do you mean the anchor that is added dynamically? If so check the code below-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" /> <link href="http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#UsersGrid").jqGrid({ url: 'jqGridHandler.ashx', datatype: 'json', height: 250, colNames: ['UserID', 'UserName', 'FirstName', 'MiddleName', 'LastName', 'EmailID', 'Actions'], colModel: [ { name: 'UserID', index: 'UserID', width: 100, sortable: true }, { name: 'UserName', width: 100, sortable: true }, { name: 'FirstName', width: 100, sortable: true }, { name: 'MiddleName', width: 100, sortable: true }, { name: 'LastName', width: 100, sortable: true }, { name: 'EmailID', width: 150, sortable: true }, { name: 'act', index: 'act', width: 100, sortable: false } ], rowNum: 10, rowList: [10, 20, 30], pager: '#UsersGridPager', sortname: 'UserID', viewrecords: true, sortorder: 'asc', gridComplete: function() { var ids = jQuery("#UsersGrid").jqGrid('getDataIDs'); for (var i = 0; i < ids.length; i++) { var cl = ids[i]; var confirm = "<a href='#' customVal=" + cl + " class='confirm'>Confirm message</a>"; jQuery("#UsersGrid").jqGrid('setRowData', ids[i], { act: confirm }); } $("a.confirm").click(function() { var gridRowID = $(this).attr("customVal"); $("#dialogUserID").html($(this).closest("tr").children("td[aria-describedby*=UserID]").html()); $("#dialogUserName").html($(this).closest("tr").children("td[aria-describedby*=UserName]").html()); $("#dialog").dialog(); }) }, caption: 'Demo' }); $("#UsersGrid").jqGrid('navGrid', '#UsersGridPager', { edit: false, add: false, del: false }); }); </script> </head> <body> <form id="form1" runat="server"> <div id="dialog" style="display:none">Are you sure you want to do the processing? <br />User id: <span id="dialogUserID"></span> <br />User name: <span id="dialogUserName"></span></div> <table id="UsersGrid" cellpadding="0" cellspacing="0"> <div id="UsersGridPager"> </div> </table> </form> </body> </html>
Dhanunjai
Member
82 Points
59 Posts
Modelpopup problem in jqgrid in mvc
May 17, 2011 06:23 AM|LINK
Hi team,
In my project i'm using jqgrid, in that jqgrid i have one button for confirmation,when i click that button it will open a model popup window,
please tell me how to handel model popup in jqgrid.................
this is my grid ...
$("#InterviewsAvailable").jqGrid({
url: '<%= ConfigurationManager.AppSettings["VPath"] %>Json/GetMockupInterviewsAvailableList1',
datatype: 'json',
mtype: 'GET',
colNames: [' ', 'Interview Tittle', 'Description', 'Take the Interview'],
colModel: [
{ name: 'InterviewId', index: 'InterviewId', width: 10, hidden: true },
{ name: 'InterviewTittle', index: 'InterviewTittle', width: 50, center: 'center', formatter: InterviewTittleLinkButton, sortable: true },
{ name: 'Description', index: 'Description', width: 90, center: 'left', sortable: false },
{ width: 50, formatter: ConfirmationButton }
],
jsonReader: {
repeatitems: false,
id: "0"
},
rowNum: 5,
rowList: [5, 10, 20, 30, 40, 50],
pager: jQuery('#InterviewsAvailablePager'),
emptyrecords: "There is no data",
// viewrecords: true,
repeatitems: false,
sortname: 'InterviewTittle',
sortorder: "desc",
height: "auto",
width: "940"
});
});
function InterviewsAvailableButton(cellValue, Options, RowObject) {
var id = RowObject.InterviewId
return "<a href='#' class='removebtn' style='height:18px' >Confirm</a>";
}
please help me how to get popup window when i click confirm button............
asteranup
All-Star
30184 Points
4906 Posts
Re: Modelpopup problem in jqgrid in mvc
May 17, 2011 12:35 PM|LINK
Hi,
You cn try something like below-
HTML-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" /> <link href="http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#UsersGrid").jqGrid({ url: 'jqGridHandler.ashx', datatype: 'json', height: 250, colNames: ['UserID', 'UserName', 'FirstName', 'MiddleName', 'LastName', 'EmailID', 'Actions' ], colModel: [ { name: 'UserID', index: 'UserID', width: 100, sortable: true }, { name: 'UserName', width: 100, sortable: true }, { name: 'FirstName', width: 100, sortable: true }, { name: 'MiddleName', width: 100, sortable: true }, { name: 'LastName', width: 100, sortable: true }, { name: 'EmailID', width: 150, sortable: true }, { name: 'act', index: 'act', width: 100, sortable: false } ], rowNum: 10, rowList: [10, 20, 30], pager: '#UsersGridPager', sortname: 'UserID', viewrecords: true, sortorder: 'asc', gridComplete: function() { var ids = jQuery("#UsersGrid").jqGrid('getDataIDs'); for (var i = 0; i < ids.length; i++) { var cl = ids[i]; var confirm = "<a href='#' customVal=" + cl + " class='confirm'>Confirm message</a>"; jQuery("#UsersGrid").jqGrid('setRowData', ids[i], { act: confirm }); } $("a.confirm").click(function() { var gridRowID = $(this).attr("customVal"); $("#dialog").dialog(); }) }, caption: 'Demo' }); $("#UsersGrid").jqGrid('navGrid', '#UsersGridPager', { edit: false, add: false, del: false }); }); </script> </head> <body> <form id="form1" runat="server"> <div id="dialog" style="display:none">Are you sure you want to do the processing?</div> <table id="UsersGrid" cellpadding="0" cellspacing="0"> <div id="UsersGridPager"> </div> </table> </form> </body> </html>Handler-<%@ WebHandler Language="C#" Class="jqGridHandler" %> using System; using System.Web; public class jqGridHandler : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "application/json"; string data = "{\"page\":1,\"total\":50,\"records\":500,\"rows\":[{\"id\":1,\"cell\":[\"1\",\"AXKFCPWPPH\",\"WHEGRECKAB\",\"URJXGHNQMR\",\"MOKYPQTENN\",\"IHIOTWWTNS@PDK.com\"]},{\"id\":2,\"cell\":[\"2\",\"UFVPPYOTAE\",\"XXMXXFROND\",\"IVAXKKUHJS\",\"SQXLNFMDUK\",\"HEBUHCBFTU@SOA.com\"]},{\"id\":3,\"cell\":[\"3\",\"HJUYXXCXQF\",\"QOWKFRNFTX\",\"MIAINKKAXO\",\"EJWOAPDIWQ\",\"DVEOYANHWS@GYW.com\"]},{\"id\":4,\"cell\":[\"4\",\"CNNALPUBVS\",\"FEHECXULKV\",\"YHRSBJMFTC\",\"APIRFNFSXA\",\"UAUQJFKJXG@OJW.com\"]},{\"id\":5,\"cell\":[\"5\",\"FXJNOXOGPC\",\"JFHRUTKUJU\",\"DPMHXTFFKF\",\"EJKHKXSNWU\",\"LFONFVSSVJ@IPP.com\"]},{\"id\":6,\"cell\":[\"6\",\"YWYYSKJYEE\",\"HKFSQEWJRC\",\"PCSGKBSGOB\",\"NOUNOYEBQP\",\"LKOUYMFYBN@DCN.com\"]},{\"id\":7,\"cell\":[\"7\",\"XFLVHYSLTL\",\"LQXWWEVXAS\",\"WKQUWBMSQB\",\"BTXOPIVFDL\",\"XMFJANXELW@MFM.com\"]},{\"id\":8,\"cell\":[\"8\",\"SHDYQEAAXE\",\"WDFNARWJEE\",\"KBJGDNHGPW\",\"UEGJOJWBYT\",\"XSLRELQFJD@EDT.com\"]},{\"id\":9,\"cell\":[\"9\",\"JITKDSJSUQ\",\"VODMGPSHNH\",\"QSCDSUNLIO\",\"ERFMEMVIXE\",\"YIFGXWIQQS@KHA.com\"]},{\"id\":10,\"cell\":[\"10\",\"OKKECUJQUY\",\"DTFACCLGXC\",\"LQTKWUUBJR\",\"BKVNFEYRII\",\"AMCJIUJVJG@TYG.com\"]}]}"; context.Response.Write(data); } public bool IsReusable { get { return false; } } }Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
Dhanunjai
Member
82 Points
59 Posts
Re: Modelpopup problem in jqgrid in mvc
May 19, 2011 12:39 PM|LINK
Hi boss,
I have a small issue in this how can i get both ID and Name in button clikc................
please help me in this issue...............
asteranup
All-Star
30184 Points
4906 Posts
Re: Modelpopup problem in jqgrid in mvc
May 20, 2011 04:38 AM|LINK
Hi,
By button do you mean the anchor that is added dynamically? If so check the code below-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" /> <link href="http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#UsersGrid").jqGrid({ url: 'jqGridHandler.ashx', datatype: 'json', height: 250, colNames: ['UserID', 'UserName', 'FirstName', 'MiddleName', 'LastName', 'EmailID', 'Actions'], colModel: [ { name: 'UserID', index: 'UserID', width: 100, sortable: true }, { name: 'UserName', width: 100, sortable: true }, { name: 'FirstName', width: 100, sortable: true }, { name: 'MiddleName', width: 100, sortable: true }, { name: 'LastName', width: 100, sortable: true }, { name: 'EmailID', width: 150, sortable: true }, { name: 'act', index: 'act', width: 100, sortable: false } ], rowNum: 10, rowList: [10, 20, 30], pager: '#UsersGridPager', sortname: 'UserID', viewrecords: true, sortorder: 'asc', gridComplete: function() { var ids = jQuery("#UsersGrid").jqGrid('getDataIDs'); for (var i = 0; i < ids.length; i++) { var cl = ids[i]; var confirm = "<a href='#' customVal=" + cl + " class='confirm'>Confirm message</a>"; jQuery("#UsersGrid").jqGrid('setRowData', ids[i], { act: confirm }); } $("a.confirm").click(function() { var gridRowID = $(this).attr("customVal"); $("#dialogUserID").html($(this).closest("tr").children("td[aria-describedby*=UserID]").html()); $("#dialogUserName").html($(this).closest("tr").children("td[aria-describedby*=UserName]").html()); $("#dialog").dialog(); }) }, caption: 'Demo' }); $("#UsersGrid").jqGrid('navGrid', '#UsersGridPager', { edit: false, add: false, del: false }); }); </script> </head> <body> <form id="form1" runat="server"> <div id="dialog" style="display:none">Are you sure you want to do the processing? <br />User id: <span id="dialogUserID"></span> <br />User name: <span id="dialogUserName"></span></div> <table id="UsersGrid" cellpadding="0" cellspacing="0"> <div id="UsersGridPager"> </div> </table> </form> </body> </html>Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog