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,
Related
I have to set JQGrid property loadonce : true for searching JQGrid data.
For loadonce: false searching is not possible.
My grid containg multiple pages. But while setting loadonce : true , my pagination is not working. its showing disabled.
//Search
{
searchOnEnter: true,
closeOnEscape: true,
reloadAfterSearch: true
},
How can I make pagination work along with search operation.
If you want to use loadonce: true then the server should return all data instead of returning one page. jqGrid will save locally all the data in internal data and _index parameter and it will display only the first page of data. The paging will be enabled and it will be implemented locally like sorting and filtering/searching.
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 can't find a way to set search options for a column? It seem they are set by default and there's no way I can change it.
We have this option in Jqgrid:
{ name: "outputid", index: "outputid", width: 30, searchoptions: { sopt: ['eq']} }
When doing this in MvcJqGrid:
.AddColumn(new Column("promoDate").SetAlign(MvcJqGrid.Enums.Align.Center).SetLabel("Fecha Ingreso").SetSearchType(Searchtype.Datepicker).SetSearchDateFormat("yy-mm-dd"))
I receive a 'bw' as rule op, not 'eq' as I would like to set.
Thanks!
I've updated MvcJqGrid (nuget package is also updated). As of now you can set a searchoption per column with 'SetSearchOption'. Your example would look something like this:
.AddColumn(new Column("promoDate")
.SetAlign(MvcJqGrid.Enums.Align.Center)
.SetLabel("Fecha Ingreso")
.SetSearchType(Searchtype.Datepicker)
.SetSearchDateFormat("yy-mm-dd")
.SetSearchOption(SearchOptions.Equal))
Let me know if this works for you.
First of all I should mention that I don't use MvcJqGrid myself. It's really important to set different sopt option for different columns especially if one uses toolbar searching. It seems that MvcJqGrid don't provide you enough possibilities to do this. Nevertheless it looks so that MvcJqGrid generate some JavaScript code for you. So if you can't generate exactly the code which you need then you can still change some properties of grid later. For example
$("#grid").jqGrid("setColProp", "outputid", { searchoptions: { sopt: ['eq']} });
change the properties of "outputid" column. It is important to make the changes before searching toolbar are created (before method filterToolbar) will be called. If you can't inject your JavaScript code before creating searching toolbar you can recreate it later with modified properties using destroyFilterToolbar method (see the answer and the pull request):
$("#grid").jqGrid("destroyFilterToolbar");
$("#grid").jqGrid("filterToolbar", { stringResult: true, defaultSearch: "cn" });
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 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.