Andrus
Reputation: 27955
How to keep grid width if colums are switched in column menu
jqgrid has fixed width.
I tried code below based on How to change column name in column chooser pop up in jqgrid?
to create column switcher. After turning some column on or off grid width changes to full screen. How to fix this so that grid keeps its width after column seelcton in column menu ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>https://stackoverflow.com/q/27617764/315935</title>
<meta name="author" content="Oleg Kiriljuk">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/plugins/ui.multiselect.css">
<style>
html, body { font-size: 75%; }
.ui-datepicker select.ui-datepicker-year,
.ui-datepicker select.ui-datepicker-month {
color: black
}
.ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-active { margin: 1px; font-weight: normal; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>
<script>
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<!--<script src="../jqGrid/js/jquery.jqGrid.src.js"></script>-->
<script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script>
<script src="http://rawgit.com/free-jqgrid/jqGrid/master/plugins/jquery.jqgrid.showhidecolumnmenu.js"></script>
<script src="http://rawgit.com/free-jqgrid/jqGrid/master/plugins/jquery.contextmenu-ui.js"></script>
<script src="http://rawgit.com/free-jqgrid/jqGrid/master/plugins/jquery.createcontexmenufromnavigatorbuttons.js"></script>
<script src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/plugins/ui.multiselect.js"></script>
<script>
//<![CDATA[
/*global $ */
/*jslint browser: true */
$(function () {
"use strict";
var mydata = [
{ id: "10", invdate: "2007-10-01", name: "test", note: "note", amount: "", tax: "", closed: true, ship_via: "TN", total: "" },
{ id: "20", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "30", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "40", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "50", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "60", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "70", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "80", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "90", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
$grid = $("#grid"),
initDateEdit = function (elem) {
$(elem).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
},
initDateSearch = function (elem) {
setTimeout(function () {
initDateEdit(elem);
}, 100);
};
$grid.jqGrid({
data: mydata,
colNames: ["", "Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
colModel: [
{ name: "act", template: "actions" },
{ name: "name", align: "center", width: 92, editrules: {required: true} },
{ name: "invdate", width: 72, align: "center", sorttype: "date", frozen: true,
formatter: "date", formatoptions: { newformat: "d-M-Y", reformatAfterEdit: true }, datefmt: "d-M-Y",
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
{ name: "amount", width: 56, template: "number", hidden: true },
{ name: "tax", width: 35, template: "number", autoResizableMinColSize: 40, hidden: true },
{ name: "total", width: 43, template: "number", hidden: true },
{ name: "closed", width: 49, template: "booleanCheckboxFa" },
{ name: "ship_via", width: 76, align: "center", formatter: "select",
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
{ name: "note", width: 3343, edittype: "textarea", sortable: false }
],
cmTemplate: { editable: true, autoResizable: true },
iconSet: "fontAwesome",
rowNum: 10,
autoResizing: { compact: true },
rowList: [5, 10, 20, "10000:All"],
//pagerpos: "right",
//viewrecords: true,
//pgbuttons: false,
//pginput: false,
//width: 390,
toppager: true,
rownumbers: true,
sortname: "invdate",
sortorder: "desc",
navOptions: {
position: "center",
addtext: "Add",
edittext: "Edit",
deltext: "Delete",
searchtext: "Search",
refreshtext: "Reload",
viewtext: "View",
savetext: "Save",
canceltext: "Cancel",
iconsOverText: true
},
caption: "Demonstration how to make full width navigator bar",
width: '100px',
}).jqGrid("navGrid", {view: true})
.jqGrid("inlineNav")
//.jqGrid("filterToolbar")
// .jqGrid("gridResize")
.jqGrid("showHideColumnMenu")
.jqGrid("createContexMenuFromNavigatorButtons", $grid.jqGrid("getGridParam", "pager"));
$grid.jqGrid('setGridWidth', 200, false);
var autoedit = true;
$grid.jqGrid("navButtonAdd", "#grid_toppager", {
buttonicon: "fa-star",
caption: "Toggle",
id: "AutoEdit",
title: "Toggle autoedit",
onClickButton: function (options, e) {
var $me = $(e.currentTarget);
$me.toggleClass("ui-state-active");
autoedit = $me.hasClass("ui-state-active");
$me.attr("aria-pressed", autoedit ? "true" : "false");
}
});
$("#grid_toppager")
.find(".ui-pg-button")
.each(function (i) {
$(this).attr({
tabindex: String(i),
role: "button"
});
});
//$("#AutoEdit").attr("role", "button");
if (autoedit) {
$("#AutoEdit").click();
}
$grid.jqGrid("navButtonAdd", "#grid_toppager", {
buttonicon: "fa-table",
caption: "Columns",
title: "Choose columns",
onClickButton: function (options, e) {
$(this).jqGrid("columnChooser");
}
});
$("#grid_toppager_left").hide();
$("#grid_toppager_right").hide();
$("#grid_toppager_center").attr("colspan", "2");
$("#grid_toppager_center").css({width: "", "text-align": "left", "white-space": ""});
$("#grid_toppager_center").find(">.navtable").append(
$("#grid_toppager_center").find(">table.ui-pg-table")
);
$("#grid_toppager_center").find(">.navtable").children().each(function() {
$(this).css("float", "left");
});
$grid.bind("jqGridAfterGridComplete", function () {
var p = $(this).jqGrid("getGridParam"), $toppager = $(p.toppager);
$toppager.find(".navtable").css("width", "");
});
});
//]]>
</script>
</head>
<body>
<div id="outerDiv" style="margin:5px;">
<table id="grid"></table>
</div>
</body>
</html>
Upvotes: 2
Views: 533
Answers (1)
Oleg
Reputation: 222007
Free jqGrid 4.8 are based of the jqGrid 4.7 version. If you examine the lines of code you will see that the described behavior is the standard behavior in case of usage default shrinkToFit: true option. So you will have the same behavior in columnChooser for example if you would use default shrinkToFit: true option.
Write me if the usage of shrinkToFit: false option can't be used in your environment.
Upvotes: 3
Related Questions
- Resize jqGrid according to number of columns in the grid
- JQGrid Column auto width
- Set Fixed Column Width to JQGrid
- Change Columns width problems
- Jqgrid Column width According to Its Content
- Jqgrid Get and Set column width
- Jqgrid Editable Column width According to Its Content
- jQGrid set column width
- Auto resize column width in JQgrid
- Auto adjust jqgrid column width according to table grid width