.I’m using 5.1 with bootstrap.
The above may simply be my lack of understanding of jqgrid as I’m relatively new to it. Also, I can’t find any docs covering colmenu and related options. I have only been able to find a demo page here: http://www.guriddo.net/demo/guriddojs/functionality/column_menu/index.html
Thanks for any help
Hello,
1. The grid is independed from CSS style. Currently we support jQuery UI and Bootstrap. All the settings are stored in the common object $.jgrid.styleUI. For jQueryUi the styling is in $.jgrid.styleUI.jQueryUI property, and for Bootstrap $.jgrid.styleUI.Bootstrap. Properties under Bootstrap describes the classes and icons. To use the font awesome icon styling you will need to load the needed css files and changet the icon base. The icon base is in common property of Bootstrap and is equla to glyphicon. To change this you will need to change the base for font awesome. This can be done soething like this
|
1 2 3 4 |
... $.jgrid.defaults.styleUI.Bootstrap.common.icon_base = 'fa'; ... |
after loading the jqgrid files.
To change any icon in the column menu locate the styleUI Bootstrap colmenu in jqgrid javascript file property and change it to the desired icons.
Note that when using font awesome you will need to change all the icons for the grid – this is not tested and maybe both iconic systems can exists together using
|
1 2 3 |
... $.jgrid.defaults.styleUI.Bootstrap.common.icon_base = 'fa glyphicon'; ... |
2. To change the icon color/size one possible solution is to
|
1 2 3 4 5 6 |
.ui-jqgrid .fa .fa-camera-retro { /* your setting here */ } |
3. Can you please provide a example how will look this. Currently the coordinates can not be configured.
4. This is a bug and we have fixed it. Thank you.
5. Not sure that I understand this. Can you please explain it again? If you mean the texts you can access the language file and serch for the colmenu to see how to change the texts.
6. Can you please provide a example what you mean with sticky. We ask this in order to overcome some confusions. This is our example
Kind Regards,
Will
Guriddo Support Team
Thanks for your responses.
For questions 3, 5, and 6, I’ve created a screen shot here:
NEW question, this might be related to the above:
Your example link was helpful. I recreated it locally and I get similar formatting issues as above. Screen shot of formatting issues:
https://app.box.com/s/4jfrk4leh3yccoagzkljwfa1zju3omox" />
I used jqgrid 5.1 . I copied your example code then I changed the paths for the css and js, for my local drive, but it is similar to your original example.
It feels like I’m missing a link to css or js?
Here’s my code:
[code]
<!DOCTYPE html>
<html lang="en">
<head>
<!– The jQuery library is a prerequisite for all jqSuite products –>
<!– <script src="js/jquery-2.1.1.js"></script> –>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>
<!– We support more than 40 localizations –>
<script src="js/plugins/jqGrid/i18n/grid.locale-en.js"></script>
<!– This is the Javascript file of jqGrid –>
<script src="js/plugins/jqGrid/jquery.jqGrid.min.js"></script>
<!– This is the localization file of the grid controlling messages, labels, etc.
<!– A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom –>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!– The link to the CSS that the grid needs –>
<link href="css/plugins/jqGrid/ui.jqgrid-bootstrap-ui.css" rel="stylesheet">
<script>
$.jgrid.defaults.width = 780;
$.jgrid.defaults.responsive = true;
$.jgrid.defaults.styleUI = ‘Bootstrap’;
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<title>jqGrid Loading Data – Column Reordering</title>
</head>
<body>
<style type="text/css">
/* set the size of the datepicker search control for Order Date*/
#ui-datepicker-div { font-size:11px; }
/* set the size of the autocomplete search control*/
.ui-menu-item {
}
.ui-autocomplete {
font-size: 11px;
}
</style>
<table id="jqGrid"></table>
<div></div>
&amp;lt;script type="text/javascript"&amp;gt;
$(document).ready(function () {
var filter;
$("#jqGrid").jqGrid({
url: ‘data.json’,
mtype: "GET",
datatype: "json",
colModel: [
{ label : "Order ID",
//sorttype: ‘integer’,
name: ‘OrderID’,
key: true,
width: 75 ,
colmenu : true,
coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
searchoptions : {
searchOperMenu : false,
sopt : [‘eq’,’gt’,’lt’,’ge’,’le’]
}
},
{
label: "Customer ID",
name: ‘CustomerID’,
width: 150,
hidedlg : true,
// stype defines the search type control – in this case HTML select (dropdownlist)
stype: "select",
// searchoptions value – name values pairs for the dropdown – they will appear as options
searchoptions: {
value: " :[All];ALFKI:ALFKI;ANATR:ANATR;ANTON:ANTON;AROUT:AROUT;BERGS:BERGS;BLAUS:BLAUS;BLONP:BLONP;BOLID:BOLID;BONAP:BONAP;BOTTM:BOTTM;BSBEV:BSBEV;CACTU:CACTU;CENTC:CENTC;CHOPS:CHOPS;COMMI:COMMI;CONSH:CONSH;DRACD:DRACD;DUMON:DUMON;EASTC:EASTC;ERNSH:ERNSH;FAMIA:FAMIA;FOLIG:FOLIG;FOLKO:FOLKO;FRANK:FRANK;FRANR:FRANR;FRANS:FRANS;FURIB:FURIB;GALED:GALED;GODOS:GODOS;GOURL:GOURL;GREAL:GREAL;GROSR:GROSR;HANAR:HANAR;HILAA:HILAA;HUNGC:HUNGC;HUNGO:HUNGO;ISLAT:ISLAT;KOENE:KOENE;LACOR:LACOR;LAMAI:LAMAI;LAUGB:LAUGB;LAZYK:LAZYK;LEHMS:LEHMS;LETSS:LETSS;LILAS:LILAS;LINOD:LINOD;LONEP:LONEP;MAGAA:MAGAA;MAISD:MAISD;MEREP:MEREP;MORGK:MORGK;NORTS:NORTS;OCEAN:OCEAN;OLDWO:OLDWO;OTTIK:OTTIK;PERIC:PERIC;PICCO:PICCO;PRINI:PRINI;QUEDE:QUEDE;QUEEN:QUEEN;QUICK:QUICK;RANCH:RANCH;RATTC:RATTC;REGGC:REGGC;RICAR:RICAR;RICSU:RICSU;ROMEY:ROMEY;SANTG:SANTG;SAVEA:SAVEA;SEVES:SEVES;SIMOB:SIMOB;SPECD:SPECD;SPLIR:SPLIR;SUPRD:SUPRD;THEBI:THEBI;THECR:THECR;TOMSP:TOMSP;TORTU:TORTU;TRADH:TRADH;TRAIH:TRAIH;VAFFE:VAFFE;VICTE:VICTE;VINET:VINET;WANDK:WANDK;WARTH:WARTH;WELLI:WELLI;WHITC:WHITC;WILMK:WILMK;WOLZA:WOLZA"
}
},
{
label: "Order Date",
name: ‘OrderDate’,
width: 150,
sorttype:’date’,
formatter: ‘date’,
srcformat: ‘Y-m-d’,
stype : ‘text’,
newformat: ‘n/j/Y’,
searchoptions: {
// dataInit is the client-side event that fires upon initializing the toolbar search field for a column
// use it to place a third party control to customize the toolbar
dataInit: function (element) {
$(element).datepicker({
id: ‘orderDate_datePicker’,
dateFormat: ‘m/d/yy’,
//minDate: new Date(2010, 0, 1),
maxDate: new Date(2020, 0, 1),
showOn: ‘focus’
});
}
}
},
{
label : "Ship Name",
name: ‘ShipName’,
width: 150,
searchoptions: {
// dataInit is the client-side event that fires upon initializing the toolbar search field for a column
// use it to place a third party control to customize the toolbar
dataInit: function (element) {
$(element).autocomplete({
id: ‘AutoComplete’,
source: function(request, response){
this.xhr = $.ajax({
url: ‘http://trirand.com/blog/phpjqgrid/examples/jsonp/autocompletep.php?callback=?&amp;amp;acelem=ShipName’,
data: request,
dataType: "jsonp",
success: function( data ) {
response( data );
},
error: function(model, response, options) {
response([]);
}
});
},
autoFocus: true
});
},
sopt : [‘cn’]
}
},
{
label: "Freight",
sorttype: ‘number’,
name: ‘Freight’,
width: 150,
sopt : [‘eq’]
},
],
loadonce: true,
viewrecords: true,
width: 780,
height: 250,
rowNum: 10,
colMenu : true,
shrinkToFit : true,
pager: "#jqGridPager"
});
// activate the toolbar searching
$(‘#jqGrid’).jqGrid(‘filterToolbar’,{
stringResult: true,
//searchOnEnter: false,
searchOperators : true
});
$(‘#jqGrid’).jqGrid(‘navGrid’,"#jqGridPager", {
search: false, // show search button on the toolbar
add: false,
edit: false,
del: false,
refresh: true
});
$("#save").click(function(){
filter = $("#jqGrid").jqGrid(‘getGridParam’, ‘postData’).filters;
var perm = [ 1, 0, 2, 4, 3 ];
$("#jqGrid").jqGrid(‘remapColumns’, perm, true, false);
console.log($("#jqGrid").jqGrid(‘getGridParam’,’colModel’));
});
$("#load").click(function(){
console.log(filter);
$("#jqGrid").jqGrid(‘refreshFilterToolbar’, {
filters : filter,
onClearVal: function ( elem, name) {
if(name === ‘CustomerID’) {
console.log(elem);
elem.multiselect(‘refresh’);
}
},
onSetVal: function ( elem, name) {
if(name === ‘CustomerID’) {
console.log(elem);
elem.multiselect(‘refresh’);
}
}
});
});
var timer;
$("#search_cells").on("keyup", function() {
var self = this;
if(timer) { clearTimeout(timer); }
timer = setTimeout(function(){
//timer = null;
$("#jqGrid").jqGrid(‘filterInput’, self.value);
},0);
});
});
&amp;lt;/script&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&amp;nbsp;
[/code]
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top
