Set width of jqgrid

Question

I am using SmartAdmin jqgrid for display tabular format data. Every time numbers of columns of datatable changes dynamically. I am converting DataTable to json object and assinging it to jqgrid. It seems that jqgrid internally set equal width to each column. When I hide column from jqgrid , it will hide that column but it shows that space in my page. I want that jqgrid will divide width to all visible columns.

Here is My Code Snippet:

<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 are holding json objects.

Thanks in advance. Quick responses are highly appreciable.

Answer 1

try this

<table id="jqgrid" style="width:1250px;"></table>