CODEWITHSUNDEEP
javascriptjqgridwidth
Carbosound1
Carbosound1

Reputation: 610

jqgrid columnchooser width

I have a nice jqgrid with a columnchooser. But when i remove all columns with the columnchooser my JQGrid-table disappears. (width:0) So is there a possibility to have a minimum-width and maximum-width?
Thanks in advance. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link href="../../Scripts/plugins/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-ui-1.8.23.min.js" type="text/javascript"></script>
<script src="../../Scripts/plugins/ui.multiselect.js" type="text/javascript"></script>
<script src="../../Scripts/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../../Scripts/src/i18n/grid.locale-nl.js" type="text/javascript"></script>
<link href="../../Scripts/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<table id="list"></table>
<div id="pager"></div>

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery("#list").jqGrid({
        url: '/Home/GridData/',
        datatype: 'json',
        mtype: 'GET',
        autowidth: true,
        colNames: ['Budgetsleutel', 'Beleidsdomein', 'beleidsitem'],
        colModel: [
      { name: 'budetsleutel', index: 'budetsleutel', width: 40, align: 'left', sortable: true, resizable: true, search: true },
      { name: 'beleiddsdomein', index: 'beleidsdomein', width: 40, align: 'left', sortable: true, resizable: true, search: true },
      { name: 'beleidsitem', index: 'beleidsitem', width: 200, align: 'left', sortable: true, resizable: true, search: true}],
        pager: '#pager',
        pgbuttons: true,
        rowNum: 10,
        rowList: [],
        sortname: 'Id',
        sortorder: "desc",
        gridview: true,
        viewrecords: true,
        height: 100,
        caption: "Toolbar Searching"
    });
    jQuery("#list").jqGrid('navGrid', '#pager');
    jQuery("#list").jqGrid('navButtonAdd', '#pager', {
        caption: "Columns",
        buttonicon: "ui-icon-calculator",
        title: "choose columns",
        jqModel:true,
        onClickButton: function () {
            jQuery("#list").jqGrid('columnChooser');
        }
    });
});

Upvotes: 1

Views: 840

Answers (1)

Carbosound1
Carbosound1

Reputation: 610

I found the solution to my problem in the wiki page from jqgrid.
see code below:

        onClickButton: function () {
            jQuery("#list").jqGrid('columnChooser', {
                done: function (perm) {
                    if (perm) {
                        this.jqGrid("remapColumns", perm, true);
                        this.jqGrid("setGridWidth", $("#gridwrapper").width());
                    } 
                }
            });
        }

Upvotes: 1

Related Questions