using jqgrid binding and when i selected the record the edit modal pop must be open for submit the records and cancel.

In my aspx page i m using this javascript for binding the records,i have added the button for adding records,editing,and delete.

in my case when i m selecting one row record,for editing this record i need modal popup to edit and save record and cancel button is also required.

and what changes i need to done in aspx.cs for functionality

Default aspx page:

these are the source file i have added for binding grid:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <link type="text/css" href="http://jqueryrock.googlecode.com/svn/trunk/css/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
    <link type="text/css" href="http://jqueryrock.googlecode.com/svn/trunk/jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
    <script type="text/javascript" src="http://jqueryrock.googlecode.com/svn/trunk/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="http://jqueryrock.googlecode.com/svn/trunk/js/jquery-ui-1.9.2.custom.js"></script>
    <script src="http://jqueryrock.googlecode.com/svn/trunk/jqgrid/js/grid.locale-en.js" type="text/javascript"></script>
    <script src="http://jqueryrock.googlecode.com/svn/trunk/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript" >

$(document).ready(function () {

            $("#jqGrid").jqGrid({
                url: 'Default.aspx/ConvertDataTabletoString',

                datatype: "json",
                mtype: 'POST',

                serializeGridData: function (postData) {

                    // return JSON.stringify(postData);
                    return JSON.stringify(postData);
                },
                ajaxGridOptions: { contentType: "application/json" },
                loadonce: true,
                colNames: ['FirstName', 'LastName', 'Department', 'Zipcode', 'Salary', 'Email', 'Password'],
                colModel:
                    [
                        //{ name: 'UserId', index: 'UserId', width: 75, key: true, editable: true, editrules: { required: true } },
                        { name: 'FirstName', index: 'FirstName', width: 200, editable: true },
                        { name: 'LastName', index: 'LastName', width: 60, editable: true },
                        { name: 'Department', index: 'Department', width: 60, editable: true },
                        { name: 'Zipcode', index: 'Zipcode', width: 60, editable: true },
                        { name: 'Salary', index: 'Salary', width: 60, editable: true },
                        { name: 'Email', index: 'Email', width: 200, editable: true },
                        { name: 'Password', index: 'Password', width: 200, editable: true },
                    ],
                pager: '#jqGridPager',

                sortorder: 'asc',
                rowList: [10, 20, 30],
                viewrecords: true,
                width: 840,
                height: 200,
                rowNum: 10,
                jsonReader: {
                    page: function (obj) { return 1; },
                    total: function (obj) { return 1; },
                    records: function (obj) { return obj.d.length; },
                    root: function (obj) { return obj.d; },
                    repeatitems: false,

                },
                caption: 'GridDetails'

            });
            $('#jqGrid').navGrid('#jqGridPager',
                // the buttons to appear on the toolbar of the grid
                { edit: true, add: true, del: true, search: false, refresh: false, view: false, position: "left", cloneToTop: false },
                // options for the Edit Dialog
                {
                    editCaption: "The Edit Dialog",
                    recreateForm: true,
                    checkOnUpdate: true,
                    checkOnSubmit: true,
                    closeAfterEdit: true,
                    errorTextFormat: function (data) {
                        return 'Error: ' + data.responseText
                    }
                },
                // options for the Add Dialog
                {
                    closeAfterAdd: true,
                    recreateForm: true,
                    errorTextFormat: function (data) {
                        return 'Error: ' + data.responseText
                    }
                },
                // options for the Delete Dailog
                {
                    errorTextFormat: function (data) {
                        return 'Error: ' + data.responseText
                    }
                });


     
 </script>