I'm trying to use jqGrid on modal but it doesn't work even though it is exist on code when i look at the inspector. i just need simple table that shows data. however it works when it's outside of modal-dialog().
***
html
<div class="modal fade" id="addLkp05Modal" tabindex="-1" role="dialog" style="margin:auto;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="addLkp05Modal_Label">제시외 건물 입력</h4>
</div>
<div class="modal-body">
<table id="apprEtcListToggle">
</table>
<button type="button" class="btn btn-primary apprBtn" id="apprEtcList">평가제시외 목록</button>
<div id="apprEtcListCon">
</div>
<div class="row tbl_padd" id="tbl_modal_wrap" style="margin-left: 0;">
<table id="addLkp05Inputs">
<tr>
<th>용도</th>
<td><input type="text" name="UTIL" /></td>
</tr>
<tr>
<th>구조</th>
<td><input type="text" name="SHAPE" /></td>
</tr>
<tr>
<th>면적내용</th>
<td><input type="text" name="AREA" /></td>
</tr>
<tr>
<th>평가액</th>
<td><input type="text" name="GAM_AMT" /></td>
</tr>
<tr>
<th>비고</th>
<td><input type="text" name="BIGO" /></td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-blue-grey waves-effect btn_size" data-dismiss="modal" id="addLkp05Btn">추가</button>
</div>
</div>
</div>
</div>
js
$("#apprEtcListToggle").jqGrid({
width: 'auto',
height: 'auto',
datatype: "local",
styleUI : 'Bootstrap',
iconSet : 'Octicons',
shrinkToFit :false,
autowidth: true,
multiselect: true,
modal: true,
colNames: ["기호", "용도", "구조", "면적", "단가", "감정평가액"],
colModel : [
{ name: "BD_Sign", index: "BD_Sign", align: 'center', width:60 },
{ name: "BD_Use", index: "BD_Use", align: 'center' },
{ name: "BD_Structure", index: "BD_Structure", align: 'center' },
{ name: "EstiArea", index: "EstiArea", align: 'center' },
{ name: "AppliedUPrice", index: "AppliedUPrice", align: 'center' },
{ name: "BDApprasalVal", index: "BDApprasalVal", align: 'center' },
],
beforeSelectRow: () => {
$("#apprListToggle").jqGrid("resetSelection");
},
onSelectRow: (rowid) => {
},
});
$("#apprEtcListToggle").jqGrid('setGridParam', { data : apprEtcItems }).trigger('reloadGrid');
***
it also works outside of modal. only if it comes inside of modal(class modal-dialog) it doesn't appear.