I am using jqGrid to display the data. I am using hidecol/showcol to hide/show columns in the jqGrid. ShrinkToFit is true.
First I am hiding the column using hideCol. When user select one option I am displaying the hidden column using showCol method. The problem is each time when I call showCol it is reducing the width of that column.
Sample Code:
var mydata = [{name1:"abcdef",name2:"abcdef",name3:"abcdef"},
{name1:"abcdef",name2:"abcdef",name3:"abcdef"},
{name1:"abcdef",name2:"abcdef",name3:"abcdef"},
{name1:"abcdef",name2:"abcdef",name3:"abcdef"},
{name1:"abcdef",name2:"abcdef",name3:"abcdef"},
{name1:"abcdef",name2:"abcdef",name3:"abcdef"}];
jQuery("#list2").jqGrid({ data: mydata,
datatype: 'local',
height: 300,
rowNum: 30,
rowList: [10,20,30],
colNames:['Name1','Name2', 'Name3'],
colModel:[ {name:'name1',index:'name1', width:250},
{name:'name2',index:'name2', width:225},
{name:'name3',index:'name3', width:250}],
pager: '#pager2',
viewrecords: true,
sortorder: "desc",
hidegrid: false
}).navGrid('#pager2',{edit:false,add:false,del:false,search:true},
{},{},{},{});}
jQuery("#list2").jqGrid().showCol("name1"); //show col
jQuery("#list2").jqGrid().hideCol("name1"); //hide col
It seems the same problem which I has recently. I described the bug with my suggestions to fix it in the trirand forum here. The problem is already fixed in the code on the github.
I recommend you to look additionally on another my suggestion which improved performance of showCol and hideCol methods. The suggestions are included in the github code of jqGrid.
You can make the same changes in the jquery.jqGrid.src.js.
Related
I recently upgraded my jqGrid from an older version (4.4.5) up to (4.13.4-pre)
"autowidth": false,
"shrinkToFit": true,
"loadonce": true,
"scroll": 1,
FWIW - I'm using it inside a paneled layout (acheived via jQuery UI Layout )
Everything works great, both versions initially load up my data and display nicely - no need to change my startup grid options or colModel etc..
However, if I hover my mouse over the data region and use the wheel to start scrolling through the data, eventually the 4.13.4 version of the jqGrid will flicker or refresh to build up the next page of data and that's when it introduced the undesired scrollbar state shown here:
I have some resizing logic already in place so that when the parent panel is resized, the grid snaps into correct position - same for when the user resized the window. All of that functions just as well on both versions of jqGrid -
Just wondering if there was something I missed in the meantime - I feel like I've uncovered a bug, however.
UPDATE
I've been able to isolate the jqGrid control from the aforementioned jquery UI Layout scripts. The bad behavior persists.
When the page is finished loading, I call a script like this to "patch up" the width and size of my jqGrid so it fits inside a desired parent DIV:
function patchUpJQGrid_FitInParentDiv() {
var newWidth, newHeight, myGridCtrl;
myGridCtrl = $("#mainGridControl");
newWidth = $("#parentMainGridDiv").width() - 50;
newHeight = $("#parentMainGridDiv").height() - 50;
myGridCtrl.jqGrid('setGridWidth', newWidth, false);
myGridCtrl.jqGrid('setGridHeight', newHeight);
}
window.setTimeout(patchUpJQGrid_FitInParentDiv, 5000);//ensure jqGrid correctly sized
Thus, after the above script runs, the UI is all set and sized correctly.. but then you begin scrolling (either with mouse wheel or using scroll bar) and eventually the grid width disregards what was initially instructed via 'setGridWidth' and now the parent DIV is essentially masking or eclipsing the vertical scrollbar that you need if you want to continue scrolling..
SOLUTION
See the accepted answer below for more details. I'd like to mention that these add'l options (copied from another Oleg answer) are helping me acheive what I want in my jqGrid instances (see updated jsfiddle demo)
cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
autoresizeOnLoad: true
Some jqGrid options, which you use in jqGrid are wrong in case of usage scroll: 1. You fixed the problems in old jqGrid by usage patchUpJQGrid_FitInParentDiv. To make the code working in free jqGrid you need just fix the original options of jqGrid.
The main problem in the options is the usage of height: 'auto' and specifying of no width options. It's wrong if you use scroll: 1. One should specify any fixed values for height and width options. You can modify the values later, but the initial values are very important and there modifies the behavior of resizing.
What you need to do is to change the options
...
pager: '#pager1',
altRows: true,
altclass: 'myAltRowClass',
rownumbers: true,
gridview: true,
rowNum: 50,
rowList: [50, 100, 250],
height: 'auto',
caption: "Test Queue",
scrollOffset: 2,
viewrecords: true,
sortorder: 'desc',
}
to
pager: '#pager1',
altRows: true,
altclass: 'myAltRowClass',
rownumbers: true,
gridview: true,
//rowNum: 50,
//rowList: [50, 100, 250],
//height: 'auto',
width: 450,
height: 404,
caption: "Test Queue",
//scrollOffset: 2,
viewrecords: true
//sortorder: 'desc',
}
After the changes one can remove the call of patchUpJQGrid_FitInParentDiv because it's no more required.
I want to stress that the above changes are strictly recommended event for the old jqGrid versions. The changes are required for free jqGrid.
i want to save the width of coumns of jqgrid, when user re-size the column the width should be saved, so next time when user open the page the width should be the same user did. is it possible?
js code
{ name: 'FirstName', index: 'FirstName', width:100, align: "left", sorttype: 'text', resizable: true, editable: true, editrules: { required: true } },
i have tried shrinkToFit:false, autowidth:false
any idea, any suggestion will be appreciated...i will mark it as answer if it works for me
thank. if you need any extra information about the code i am here to explain..just comment ;)
jqGrid don't provide any API to change the column width after the grid been created, but I created the plugin which do this. You can download jQuery.jqGrid.setColWidth.js from here, included it after jqGrid JavaScript files and then you can just use new setColWidth method in the form
$("#grid").jqGrid("setColWidth", colNameIrIndex, newWidth);
The method setColWidth will adjust the total grid width after changing the width of the column. If you don't need it you ca add false as an additional last parameter of setColWidth:
$("#grid").jqGrid("setColWidth", colNameIrIndex, newWidth, false);
Additional details about the method you will find in the answer and in this one.
Probably you can write your code so that the width of columns will be set before the grid will be created. In the case you will don't nee the method setColWidth. For example you can try the demo from the answer (see the previous answer too). If you changes the width of some column and then reload the full page you will see that the grid will be created using the widths of column which the used made at the last time. Is it not close to your requirements?
I want to set a cell's background color based on the contents of the cell.
My first question: is there a way to set a cell's background color from within the xml data?
If not, here is my grid definition:
$("#grid_sites").jqGrid({
url:"getgridxmlsites.php?detailid=" + $('#hdnStudyDetailId').val(),
datatype: "local",
height: 160,
width: 832,
shrinkToFit: true,
caption:"",
colNames :["Site","Name","PI","Location","Phone","Status"],
colModel :[
{name:"sitenumber", index:"sitenumber", width:50, align:"right"},
{name:"name", index:"name", width:120},
{name:"location", index:"location", width:100},
{name:"phone", index:"phone", width:100},
{name:"status", index:"status", width:70}
],
pager:"pager_sites",
scroll: 1,
viewrecords:true,
sortable:true,
sortname: "sitenumber",
autowidth: true,
pgbuttons: false,
loadonce: true,
gridview: true
});
I want to change the background color of the status cell based on its contents.
I know I should probably use a formatter on the status column, but I'm not sure of the code to change just the background color for that cell.
{name:"status", index:"status", width:70, formatter: statusFormatter}
function statusFormatter(cellvalue, options, rowObject)
{
What exactly would go here for something like this:
if (cellValue == 'Pending') change the cell's background color to yellow
else if (cellValue == 'Approved') change the cells's background color to green;
}
Thanks!
There are exist many ways to do what you want. In the answer you would find an example how to use custom formatter to change the background color of the cell based on its contents. The answer is written before cellattr attribute are introduced. The main purpose of the custom formatter is to create the HTML contain of the cell based on the data of the cell.
The cellattr attribute introduced as modification of my feature request have advantage because it allows only set/modify attributes of the HTML code of the cell and use some predefined formatter like 'number' or 'select'. So you can just set class or style attribute and use at the same time some predefined formatter which corresponds the data contain. Look at this answer which shows how to set dynamically background-color over class and another answer which shows how to set it over style.
The answer discuss additionally advantages and disadvantages of the both approaches.
One more remark to your code. I don't recommend you to use url parameter in the form
url:"getgridxmlsites.php?detailid=" + $('#hdnStudyDetailId').val()
It has two important disadvantages. First, the $('#hdnStudyDetailId').val() could be send and decoded on the server in the wrong way if the contain of $('#hdnStudyDetailId').val() contain some special characters (' ', '+', '=', 'ä', 'д', '電', ...). The second problem is that the value from the '#hdnStudyDetailId' will be read only once at the time of the grid creation. So on any refreshing of the grid contain like sorting by another column, paging and so on the same old value from the '#hdnStudyDetailId' element will be used. I recommend you to read the answer and to use URL with respect of url and postData parameters:
url: "getgridxmlsites.php",
postData: {
detailid: function() { return $('#hdnStudyDetailId').val(); }
}
I have been stuck on this problem for past 2 days. Did lot of googling but was not able to find the exact answer.
Following is the JQGrid definition
$("#tblresults").jqGrid({
datastr: data,
datatype: 'jsonstring',
height: 230,
colNames: colNames,
colModel: colModel,
rowNum: -1,
viewrecords: true,
loadComplete: function() {
ChangeSize('#tblresults', 70);
}
});
And this is the filter definition
$("#tblresults").filterToolbar({ searchOnEnter: true, stringResult: true, defaultSearch: "cn", groupOp: "AND" });
I get the data from a simple getJSON call. But when I try to use the filter nothing works.
I debugged a the code and found out that jqgrid internally calls the reloadgrid, which makes the data to disappear.
Can anyone tell me how can we do filtering in jqgrid completely on client.
I am using v3.8 and I learnt that jqgrid v3.7 had this client side filtering logic in place.
Thanks in Advance
Do you have the data First of all you should not use -1 as the value of rowNum. Instead of that use any reliable value like rowNum:1000. More better would be to use local data paging. In the case you should just set for example rowNum:10, rowList:[5,10,20,100].
If you get the input parameters colNames, colModel and data parameters of jqGrid from the server per ajax call you should additionally consider to use data parameter instead of datastr. In the case the datatype should be changed from 'jsonstring' to 'local'.
Some other common parameters like gridview:true and height:'100%' can be also usefull for you. The first one (gridview:true) just improve the performance without any disadvantages and the second (height:'100%') will follow to choosing of the optimal grid height without the vertical scroll bar. It can be good combined with the local data paging (parameters like rowNum:10, rowList:[5,10,20,100]).
add these parameters and your toolbar search should work. i have faced similar problem too when started with jqgrid.
search:true,
loadonce:true,
I've got an interesting issue with creating a subgrid in the excellent jqGrid plugin. The main grid is working fine itself. However, when I add the parameters to create the subgrid, I get the new first column but do not get the plus sign. When I inspect the demo using Firebug I see that an href and several classes are added to the first column. I do not see those classes in the first column of my grid. Here's the code:
$("#quotelist").jqGrid({
datatype:'xml',
url:'getQuotes',
mtype: 'GET',
postData:{"a":$("#AccountNumber").val(),
"op":"y",
"cl":"n",
"cd":"All",
"eq":"All",
"sess":$("#SessionID").val(),
"d":new Date().getTime()
},
colNames:['Origin Zip', 'Destination Zip', 'Equipment', 'Commodity'],
colModel:[
{name:'ozip', index:'ozip', title:false, width:140},
{name:'dzip', index:'dzip', title:false, width:40},
{name:'equipment', index:'equipment', title:false, width:40},
{name:'commodity', index:'commodity', title:false, width:40}
],
loadError:function(xhr, st, err) {
alert('loaderror on quote request grid - ' + st)
},
pager:'#pager',
height: 550,
width: 425,
rowNum: -1,
hidegrid: false,
gridview: true,
gridstate:'hidden',
viewrecords: true,
altRows: true,
sortname: 'ozip',
sortorder: 'asc',
caption: 'Carriers',
subGrid:true,
subGridUrl:"getQuoteResponse&a="+$("#AccountNumber").val() +
"&sess=" + $("#SessionID").val(),
subGridModel: [
{name:['Carrier Name','Status'], width:[200,100]}
]
});
Other information:
I included the 'pager' to make sure the icons appear on the pager - they do. I've tried this on jqGrid versions 3.8.2 and 3.6.5 with the same result. jQuery version is 1.4.2, jquery UI version 1.8.2.
I think that the plus isn't appearing because I'm not getting the new classes in the first column when the grid loads, but I have no idea why not. It's weird that the first column appears when subGrid is set to true but then the plus sign isn't loaded.
Any idea? Many thanks for any suggestions!
edit: nevermind! I was editing this post to fix some formatting and found the problem. Too many parameters about hidegrid, gridview, etc. Those were left over from my initial experimentation with jqGrid.
The main problem is that gridview:true can not be used in your case. In the description of the gridview option in the documentation you will find
If set to true we can not use
treeGrid, subGrid, or afterInsertRow
event.
I gone through the same problem when I was working with jQuery Grid. In my case plus icon is not appearing but when I clicked on first column cell my subgrid appear. After searching for hour I finally got solution. In ui.jqgrid.css file include this code.
.ui-icon-plus {
height: 10px;
width: 10px;
background-image: url('../../Images/plus.gif');
}
.ui-icon-minus {
height: 10px;
width: 10px;
background-image: url('../../Images/minus.gif');
}
Image path will be your Image path. I am not giving height and width of image that's why I am not able to see in UI. Hope this help.