jquery - How to keep grid width if colums are switched in column menu -
jquery - How to keep grid width if colums are switched in column menu -
jqgrid has fixed width.
i tried code below based on how alter column name in column chooser pop in jqgrid?
to create column switcher. after turning column on or off grid width changes total screen. how prepare grid keeps 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>http://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 create total 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>
free jqgrid 4.8 based of jqgrid 4.7 version. if examine the lines of code see described behavior standard behavior in case of usage default shrinktofit: true option. have same behavior in columnchooser illustration if utilize default shrinktofit: true option.
write me if usage of shrinktofit: false alternative can't used in environment.
jquery html css jqgrid free-jqgrid
Comments
Post a Comment