how to call modal window on jqgrid row click? - asp.net-mvc

Question

i have jqgrid and a modal. By using the modal window we can add value to the grid
at the same time while editing on row of the grid the modal window has to be shown and populate with the row value from grid. i have tried the #htmlaction click on the jqgrid it goes to the controller it ok but how can call the modal window to populate the grid row data while on editing.
jQuery("#listvalues_ajaxGrid").jqGrid({
url: '#Url.Action("ListvaluesGrid")',
datatype: "json",
mtype: 'Get',
colNames: [
'List Key', 'List Value Name', 'List Value Code', 'Inactive'],
colModel: [
{ key: false, name: 'list_key', hidden: true },
{
key: false, name: 'list_value_name',
formatter: function (cellvalue, options, rowObject) {
show();
var x = '#Html.ActionLink("Col", "Edit", "Lists", new { id = "listvalid" }, new { #style = "color:black;font-weight:bold;" })';
return x.replace("listvalid", rowObject.list_key).replace("Col", rowObject.list_value_name);
}, sortable: true, align: 'left', width: 200, editable: true
},
#*#Html.ActionLink("Edit", "Edit", null, new { id = 234 }, new { #class = "modal" })*#
//{ key: true, name: 'list_value_name', hidden: false, editable:true },
{ key: false, name: 'list_value_code', hidden: false, editable: false },
{ key: false, name: 'inactive', hidden: false, width: 50, sortable: false, formatter: "checkbox", align: "center", editable: false },
],
sortname: 'list_key',
sortorder: "asc",
viewrecords: true,
rowNum: 5,
pager: '#listvalues_ajaxPager',
onSelectRow: function (id) {
if (id && id !== lastSel) {
listvalues_ajaxGrid.jqGrid('restoreRow', lastSel);
var cm = grid.jqGrid('getColProp', 'Name');
cm.editable = false;
grid.jqGrid('editRow', id, true, null, null, 'clientArray');
cm.editable = true;
lastSel = id;
}
},
height: '200px', mtype: 'GET',
emptyrecords: 'No records found',
autowidth: true,
mutiselect: true,
altRows: true,
'cellEdit': true,
'cellsubmit': 'clientArray',
editurl: '#Url.Action("ListvaluesGrid")',
loadComplete: function () {
var table = this;
setTimeout(function () {
updatePagerIcons(table);
}, 0);
},
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
userdata: "userdata"
},
//editurl:
});
my bootstrap modal window
<div class="modal fade" id="modalBootstrap" role="dialog">
#Html.Hidden("hid_listvalues")
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">List Values</h4>
</div>
<div class="modal-body">
<div class="form-group">
#Html.LabelFor(model => model.maslistvalues.list_value_code, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.maslistvalues.list_value_code, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.maslistvalues.list_value_code, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.maslistvalues.list_value_name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.maslistvalues.list_value_name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.maslistvalues.list_value_name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.maslistvalues.inactive, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.maslistvalues.inactive)
#Html.ValidationMessageFor(model => model.maslistvalues.inactive, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="wizard-actions">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" value="Save" class="btn btn-primary" onclick="saveclick_listvalues();" />
</div>
</div>
</div>
</div>
</div>

Answer 1

In the jquery formatter function we can call the modal popup
formatter: function (cellvalue, options, rowObject) {
var x ='#Html.ActionLink("Col", "Index", "Lists", new { id1 = "listid" }, new { #style = "color:black;font-weight:bold;", onclick="check();" })';
//var x+='<i class="fa fa-pencil icon"></i>';
var a = sessionStorage["Selected"];
if (a == 0)
{
$('#modalBootstrap').modal('show'); //---popupshow
sessionStorage["Selected"] = null;
}
return x.replace("listid", rowObject.list_value_key).replace("Col", rowObject.list_value_name);
}, sortable: false, align: 'left', editable: false