JQgrid custom button to display additional record details as in view record dialog - jqgrid

Question

Here is my code for custom button, i would like to display additional details about the selected row from server side to jqgrid dialog box with similar look and feel of view record dialog. Can someone help with a sample code to create a dialog box similar to view record from custom button onclick?
jQuery("#list2").jqGrid('navButtonAdd','#pager2',{
caption:"", title: "History",buttonicon:"ui-icon-clock",
onClickButton : function () {
var grid = $("#list2");
var rowid = grid.jqGrid('getGridParam', 'selrow');
if (rowid) {
var alertIDs = {themodal:'alertmod',modalhead:'alerthd',modalcontent:'alertcnt'};
//if ($("#"+alertIDs.themodal).html() === null) {
//alert("1");
$.jgrid.createModal(alertIDs," <span tabindex='0'><span tabindex='-1' id='jqg_alrt' class='ui-jqgrid'></span></span>",
{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqModal:true,drag:true,resize:true,
caption:"History",
top:300,left:500,width:'auto',height: 'auto',closeOnEscape:true,
zIndex: null},"","",true);
$.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqm:true});
$("#jqg_alrt").focus();
$("#jqg_alrt").load('jsontableHeadingsApartmentResource.action?viewBy=' + viewBy+'&timeZone=' + timeZone);
} else {
var alertIDs = {themodal:'alertmod',modalhead:'alerthd',modalcontent:'alertcnt'};
$.jgrid.createModal(alertIDs,"<div>"+$.jgrid.nav.alerttext+"</div><span tabindex='0'><span tabindex='-1' id='jqg_alrt'></span></span>",
{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqModal:true,drag:true,resize:true,
caption:$.jgrid.nav.alertcap,
top:300,left:500,width:200,height: 'auto',closeOnEscape:true,
zIndex: null},"","",true);
$.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqm:true});
$("#jqg_alrt").focus();
}
}
});

Answer 1

Found the solution.
Here is the updated working code, i had to use jgrid info_dialog,
jQuery("#list2").jqGrid('navButtonAdd','#pager2',{
caption:"", title: "History",buttonicon:"ui-icon-clock",
onClickButton : function () {
var grid = $("#list2");
var rowid = grid.jqGrid('getGridParam', 'selrow');
var msg = "" ;
if (rowid) {
$.ajax({
url: 'jsontableHistoryApartmentResource.action?viewBy=' + viewBy+'&rowId=' + rowid,
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data, st) {
if (st == "success") {
msg = data.rr.history;//jqgrid history data
$.jgrid.info_dialog('History','<span style="white-space: nowrap">' + msg +'</span>', $.jgrid.edit.bClose,{buttonalign:'center', width:'auto',resize: true , align: 'left'});
}
},
error: function () {
// alert("Error with AJAX callback");
}
});
} else {
var alertIDs = {themodal:'alertmod',modalhead:'alerthd',modalcontent:'alertcnt'};
$.jgrid.createModal(alertIDs,"<div>"+$.jgrid.nav.alerttext+"</div><span tabindex='0'><span tabindex='-1' id='jqg_alrt'></span></span>",
{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqModal:true,drag:true,resize:true,
caption:$.jgrid.nav.alertcap,
top:300,left:500,width:200,height: 'auto',closeOnEscape:true,
zIndex: null},"","",true);
$.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqm:true});
$("#jqg_alrt").focus();
}
}
});