javascript - Why does the "Column Chooser" icon in footer (navGrid) not visible? (jqGrid) -
i'm new on jqgrid, got started on last week. i'm bit stump on why column chooser not visible. tried 3 different column chooser scripts w/ no luck. downloaded latest jqgrid version w/ no luck. :-( seems not have enough knowledge of jquery , jqgrid work. thanks...
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- force ie use latest version of html, css , javascript instead of being forced use 1 specific ie version --> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <title>blah</title> <link rel="stylesheet" type="text/css" href="css/jquery-ui-v1.10.3.themes/base/minified/jquery-ui.min.css" /> <link rel="stylesheet" type="text/css" href="css/jqgrid-v4.5.0/ui.jqgrid.css" /> <link rel="stylesheet" type="text/css" href="css/jqgrid-v4.5.0/ui.multiselect.css" /> <script type="text/javascript" src="scripts/jquery-v2.0.0.min.js"></script> <script src="scripts/jquery-ui-v1.10.3/minified/jquery-ui.min.js" type="text/javascript"></script> <script src="scripts/jqgrid-v4.5.0/i18n/grid.locale-en.js" type="text/javascript"></script> <!--<script src="scripts/jqgrid-v4.5.0/jquery.jqgrid.min.js" type="text/javascript"></script>--> <script src="scripts/jqgrid-v4.5.0/jquery.jqgrid.src.js" type="text/javascript"></script> <script src="scripts/jqgrid-v4.5.0/ui.multiselect.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var jqgridspreadsheetid = $('#myinventoryjqgrid_spreadsheet'); var jqgridpagerid = $('#myinventoryjqgrid_pager'); ////jqgrid column chooser / jquery multiselect plugin... ////http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods&s[]=column&s[]=chooser... //jqgridspreadsheetid.extend({ // columnchooser: function (opts) { // opts = $.extended({ // "title": 'select columns', // "width": 200, // "height": 400, // //classname: '', // "done": function (parm) { if (perm) { self.jqgrid("remapcolumns", perm, true); } }, // "msel": "multiselect"//, // //dlog: '', // //dlog_opts: '', // //cleanup: function () { } // }); // } //}); //jqgrid plugin... //http://www.trirand.com... jqgridspreadsheetid.jqgrid({ url: '../websrvc/jqgrid.ashx', datatype: 'json', mtype: 'post', postdata: { whichjqgridtemplate: '<%=jqqridtools.template.myinventory%>', whichaction: '<%=jqqridtools.action.display%>' }, colnames: ['id','stock number','vin','year','make','model','trim','mileage','purchase price','stock date','repair cost','total cost','days in inventory'], //display text in column header... colmodel: [ //in case, use "sorttype" property in "colmodel" work when "loadonce" set true... { name: 'id', index: 'id', hidden: true, sorttype: 'int', width: 0, align: 'left' }, { name: 'stocknumber', index: 'stocknumber', sorttype: 'text', width: 100, align: 'left' }, { name: 'vin', index: 'vin', sorttype: 'text', width: 140, align: 'left' }, { name: 'year', index: 'year', sorttype: 'int', width: 50, align: 'left' }, { name: 'make', index: 'make', sorttype: 'text', width: 80, align: 'left' }, { name: 'model', index: 'model', sorttype: 'text', width: 80, align: 'left' }, { name: 'trim', index: 'trim', sorttype: 'text', width: 100, align: 'left' }, { name: 'mileage', index: 'mileage', sorttype: 'int', width: 60, align: 'left' }, { name: 'purchaseprice', index: 'purchaseprice', sorttype: 'currency', width: 60, align: 'left' }, { name: 'stockdate', index: 'stockdate', sorttype: 'date', width: 80, align: 'left', formatter: 'date', formatoptions: { newformat: 'm/d/y' } }, //"formatter" , "formatoptions" required date sorting works properly... { name: 'repaircost', index: 'repaircost', sorttype: 'currency', width: 60, align: 'left' }, { name: 'totalcost', index: 'totalcost', sorttype: 'currency', width: 60, align: 'left' }, { name: 'daysininventory', index: 'daysininventory', sorttype: 'int', width: 65, align: 'left' } ], pager: jqgridpagerid, rownum: 10, rowlist: [5, 10, 20, 50], //drop-down selection in footer - show how many rows per page... //sortname: 'stockdate', //sortorder: 'desc', sortname: 'vin', sortorder: 'desc', viewrecords: true, //gridview: true, imgpath: '', caption: 'my inventory', width: 1022, shrinktofit: false, height: 200, sortable: true, /* allows both 1) moving columns sideway other location fields , 2) jqgrid column chooser plugin / jquery multiselect plugin work... */ loadonce: true, //in case, use "sorttype" property in "colmodel" work when "loadonce" set true... loaderror: function (xhr, st, err) { //alert("type: " + st + "; response: " + xhr.state + "; status: " + xhr.statusteext + "; error: " + err); alert("an error had occurred, please try again or notify webmaster of error"); } }).jqgrid('navbuttonadd', jqgridpagerid, { caption: 'ddd', buttonicon: 'ui-icon-calculator', title: 'choose columns', onclickbutton: function () { jqgridspreadsheetid.jqgrid('columnchooser'); } }); //navigation buttons... /* $('#' + jqgridspreadsheetid).jqgrid('navbuttonadd', '#' + jqgridpagerid, { caption: "dd", buttonicon: "ui-icon-calculator", title: "choose columns", onclickbutton: function () { $(this).jqgrid('columnchooser', { done: function (perm) { if (perm) { this.jqgrid("remapcolumns", perm, true); savecolumnstate.call(this.perm); } } }); } }); */ }); </script> </head> <body> <table id="myinventoryjqgrid_spreadsheet" class="scroll"></table> <div id="myinventoryjqgrid_pager" class="scroll" style="text-align:center;"></div> </body> </html>
navbuttonadd can add button in existing navigator bar. have call navgrid before (see the documentation). example
$("#myinventoryjqgrid_spreadsheet").jqgrid({ url: "../websrvc/jqgrid.ashx", datatype: "json", pager: "#myinventoryjqgrid_pager", ... }).jqgrid("navgrid", "#myinventoryjqgrid_pager", {add: false, edit: false, del: false, search: false, refresh: false}) .jqgrid("navbuttonadd", "#myinventoryjqgrid_pager", { caption: "ddd", buttonicon: "ui-icon-calculator", title: "choose columns", onclickbutton: function () { $(this).jqgrid("columnchooser"); } });
Comments
Post a Comment