Modelpopup problem in jqgrid in mvc : The Official Microsoft ASP.NET Forums

Reply

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............

Moved by DarrellNorton on May 17, 2011 09:22 AM

Reply

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;
        }
    }

}

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Reply

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...............

Reply

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>

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Marked as answer by BU XI - MSFT on May 23, 2011 08:46 AM

Modelpopup problem in jqgrid in mvc RSS

3 replies

Dhanunjai

Modelpopup problem in jqgrid in mvc

asteranup

Re: Modelpopup problem in jqgrid in mvc

Dhanunjai

Re: Modelpopup problem in jqgrid in mvc

asteranup

Re: Modelpopup problem in jqgrid in mvc

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft