I have been utilizing SmartAdmin jqgrid to showcase data in tabular format. The number of columns in the datatable changes dynamically each time. I am converting the DataTable to a JSON object and assigning it to the jqgrid. However, it appears that jqgrid internally sets an equal width for each column. When I hide a column from the jqgrid, it hides the column but leaves empty space on my page. I would like the jqgrid to distribute the width evenly among all visible columns.
Below is a snippet of my code:
<table id="jqgrid" style="width:100%"></table>
<div id="pjqgrid"></div>
jqgrid initialization:
jQuery("#jqgrid").jqGrid({
data: <% = GetJasonData %>,
datatype: "local",
height: 'auto',
colNames: jsonColname,
colModel: <% = GetJsonColModel %>,
rowNum: 2,
rowList: [10, 20, 30],
pager: '#pjqgrid',
sortname: 'Name',
toolbarfilter: true,
viewrecords: true,
sortorder: "asc",
caption: "All Entries ",
multiselect: true,
shrinkToFit: true,
autowidth: true
});
jQuery("#jqgrid").jqGrid('navGrid', "#pjqgrid", {
edit: false,
add: false,
del: true
});
jQuery("#jqgrid").jqGrid('inlineNav', "#pjqgrid");
/* Add tooltips */
$('.navtable .ui-pg-button').tooltip({
container: 'body'
});
jQuery("#m1").click(function () {
var s;
s = jQuery("#jqgrid").jqGrid('getGridParam', 'selarrrow');
alert(s);
});
jQuery("#m1s").click(function () {
jQuery("#jqgrid").jqGrid('setSelection', "13");
});
$('#jqgrid').hideCol('EFORMINSTANCEID');
//// remove classes
//$(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
$(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
$(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
//$(".ui-jqgrid-pager").removeClass("ui-state-default");
//$(".ui-jqgrid").removeClass("ui-widget-content");
// add classes
$(".ui-jqgrid-htable").addClass("table table-bordered table-hover");
$(".ui-jqgrid-btable").addClass("table table-bordered table-striped");
})
$(window).on('resize.jqGrid', function () {
$("#jqgrid").jqGrid('setGridWidth', $("#content").width());
})
Where GetJasonData and GetJsonColModel contain JSON objects.
Your prompt responses will be greatly appreciated. Thank you in advance.