I am using jQGrid Latest version in my project.following is complete configuration that i configured.
jQuery("#list").jqGrid( {
url : 'Link.do?method=findAllBrand',
mtype : 'GET',
height : 350,
datatype : "xml",
colNames : [ 'Name' ],
colModel : [ {
name : 'name',
index : 'name',
width : 620
} ],
rowNum : 10,
rowList : [ 10, 20, 30 ],
sortname : 'id',
sortorder : "desc",
viewrecords : true,
multiselect : true,
imgpath : 'themes/base/images',
caption : "Brand (s) Summary Grid",
pager : #pager,
cache : false,
onSelectRow : function(id) {
}
});
I am getting following data in form of xml from server :
<?xml version="1.0" encoding="UTF-8" standalone="yes"?><rows><page>1</page><total>4</total><records>75</records><row id="BRD00005"><cell>AEG</cell></row><row id="BRD00010"><cell>ARC</cell></row><row id="BRD00006"><cell>Aga</cell></row><row id="BRD00007"><cell>Allenzi </cell></row><row id="BRD00008"><cell>Amana</cell></row><row id="BRD00009"><cell>Andi</cell></row><row id="BRD00011"><cell>Arda</cell></row><row id="BRD00012"><cell>Ariston</cell></row><row id="BRD00013"><cell>Asko</cell></row><row id="BRD00014"><cell>Baumatic</cell></row><row id="BRD00015"><cell>Bendix</cell></row><row id="BRD00003"><cell>Blanco</cell></row><row id="BRD00001"><cell>Bosch</cell></row><row id="BRD00004"><cell>Chef</cell></row><row id="BRD00016"><cell>Damani</cell></row><row id="BRD00017"><cell>Davell</cell></row><row id="BRD00018"><cell>Delonghi</cell></row><row id="BRD00019"><cell>Dishlex</cell></row><row id="BRD00020"><cell>Electrolux</cell></row><row id="BRD00021"><cell>Emilia</cell></row><row id="BRD00022"><cell>Euro</cell></row><row id="BRD00023"><cell>Eurolec</cell></row><row id="BRD00024"><cell>Euromaid</cell></row><row id="BRD00002"><cell>F&P</cell></row><row id="BRD00027"><cell>FP</cell></row><row id="BRD00025"><cell>Fagor</cell></row><row id="BRD00026"><cell>Fisher And Paykel</cell></row><row id="BRD00028"><cell>Franke</cell></row><row id="BRD00030"><cell>GE</cell></row><row id="BRD00034"><cell>GVA</cell></row><row id="BRD00029"><cell>Gaggenau</cell></row><row id="BRD00031"><cell>Glem </cell></row><row id="BRD00032"><cell>Glem Gas</cell></row><row id="BRD00033"><cell>Glemgas</cell></row><row id="BRD00035"><cell>Haier</cell></row><row id="BRD00036"><cell>Hisense </cell></row><row id="BRD00037"><cell>Hitachi</cell></row><row id="BRD00038"><cell>Hoover</cell></row><row id="BRD00039"><cell>Hotpoint</cell></row><row id="BRD00040"><cell>IAG</cell></row><row id="BRD00041"><cell>Ilve</cell></row><row id="BRD00042"><cell>Indesit</cell></row><row id="BRD00043"><cell>Jenn Air</cell></row><row id="BRD00044"><cell>Kelvinator </cell></row><row id="BRD00045"><cell>Kleenmaid</cell></row><row id="BRD00047"><cell>LG</cell></row><row id="BRD00046"><cell>La Germania</cell></row><row id="BRD00048"><cell>Liebherr</cell></row><row id="BRD00049"><cell>Linea</cell></row><row id="BRD00050"><cell>Lofra</cell></row><row id="BRD00051"><cell>Maytag</cell></row><row id="BRD00052"><cell>Midea</cell></row><row id="BRD00053"><cell>Miele</cell></row><row id="BRD00054"><cell>NEC</cell></row><row id="BRD00055"><cell>Neff</cell></row><row id="BRD00056"><cell>Nobel</cell></row><row id="BRD00057"><cell>Omega</cell></row><row id="BRD00058"><cell>Onix</cell></row><row id="BRD00059"><cell>Panasonic </cell></row><row id="BRD00060"><cell>Robinhood</cell></row><row id="BRD00061"><cell>Sagi</cell></row><row id="BRD00062"><cell>Samsung</cell></row><row id="BRD00063"><cell>Seimen </cell></row><row id="BRD00064"><cell>Sharp</cell></row><row id="BRD00065"><cell>Simpson</cell></row><row id="BRD00066"><cell>Smeg</cell></row><row id="BRD00067"><cell>St George</cell></row><row id="BRD00068"><cell>Technika</cell></row><row id="BRD00069"><cell>Techno</cell></row><row id="BRD00070"><cell>Technogas</cell></row><row id="BRD00071"><cell>Teka</cell></row><row id="BRD00072"><cell>Thor</cell></row><row id="BRD00073"><cell>Vintec</cell></row><row id="BRD00074"><cell>Westinghouse</cell></row><row id="BRD00075"><cell>Whirlpool</cell></row></rows>
I have modified the pager parameter as suggested by user Oleg in the other post.but still the pager is not working as expected. initially it shows only the 10 data of the record , when i click on next it does nothing.
what did i do wrong
Thank You
Mihir Parekh
The value of pager option must be quoted: pager : "#pager". You use datatype: "xml" without loadonce: true. In the case your server (url : 'Link.do?method=findAllBrand') is responsible for paging and sorting. If the user click on the next page new request to the server with the corresponding parameters page=2.
Typically the server should return the number of items which corresponds page and rows parameters. The XML response contains much more items. I suppose that the server returns all items independent from the requested page. In the case you should include loadonce: true. In the case the client code (JavaScript code of jqGrid) will do paging and sorting for you. If you use loadonce: true option you can remove the part
<page>1</page><total>4</total><records>75</records>
from the XML data returned from the server.
Additionally I would recommend you to consider to change to use JSON instead of XML whenever it's possible. In the case you could reduce the representation of items like
<rows>
<row id="BRD00022"><cell>Euro</cell></row>
<row id="BRD00002"><cell>F&P</cell></row>
<row id="BRD00026"><cell>Fisher And Paykel</cell></row>
</rows>
to
[["Euro","BRD00022"],["F&P","BRD00002"],["Fisher And Paykel","BRD00026"]]
So you can reduce the size of transferred data.
Additionally, like I wrote you in the comment to your previous question, you should replace sortname : 'id' to sortname : 'name' bacsue your grid don't have the column with the name "id". The option sortorder : "desc" should be probably removed.
You should remove deprecated option imgpath and remove option cache which not exist in jqGrid too. Instead of that I strictly recommend you to add gridview: true option and autoencode: true. If you use autoencode: true you will don't need to use HTML encoding (converting F&P to F&P on the server side).
UPDATED: The demo demonstrate how the grid could looks like:
I included toolbar filter and advanced searching in the grid to show how easy one can implement the features if one uses loadonce: true.
Related
I have a jqGrid that I set up like this
gridAltMpn.jqGrid({
autowidth: true,
shrinkToFit: true,
datatype : 'local',
data : input,
height : '100',
scrollrows: true,
scrollOffset : '0',
hidegrid : false,
colNames : [ 'P', 'MPN' ],
colModel : [
{ name : 'Col1', width : 30, align:'center' },
{ name : 'Col2', width : 250, sorttype: 'integer'}
],
pager : '#altmpn_pager',
pagerpos : 'left',
scroll: 50,
gridview : true,
caption : 'A useful table title',
emptyRecordText : '<div id="no_data_msg" style="text-align:center"> No Results Found</div>',
hoverrows : true,
onSelectRow: function(id) {
var gsr = gridAltMpn.jqGrid('getGridParam', 'selrow');
if (gsr) {
var rowData = gridAltMpn.jqGrid('getRowData', gsr);
if ($("input[name='optInvInqType']:checked").val() == 'MPN') {
getInvInq("MPN", rowData.MPN);
}
}
},
loadComplete: function() {
gridAltMpn.setSelection(gridAltMpn.getDataIDs()[0], true);
}
});
The data in this grid looks like this
XX 774860A6
774860A8
774860A4
774860A3
774860A10
STARTER, PNEUM,PW4000
When the grid is first loaded that it fine but if the user wants to sort by the second column it ends up like this
774860A10
774860A3
774860A4
XX 774860A6
774860A8
STARTER, PNEUM,PW4000
The 774860A10 should go after the 774860A8 just like in an integer sort. I cannot use an integer sort because these are not integers as there is some alpha characters in there. In other words I want a text entry to sort like an integer. Do I need to use a custom sort routine and then have my Javascript to do a integer like sort? I also don't need this sorted on the first time because my server sorts it by the first column. The user might want it sorted by the second column
You should use a custom function for this type of sorting.
For this, set sort type property of jqgrid as your custom function. As stated in this link, sort type can have the following values.
sorttype:
int/integer - for sorting integer
float/number/currency - for sorting decimal numbers
date - for sorting date
text - for text sorting
function - defines a custom function for sorting. To this function we pass the value to be sorted and it should return a value too.
And the custom function can be something like this: (From this link found in the answer by Oleg for this question.)
colModel: [
{name:'Posn', index:'Posn', width:100, sorttype:
function(cell)
{
//Here you have to apply your own logic
if (cell=='GK') return '0';//returns the sort order
if (cell=='DEF') return '1';
if (cell=='MID') return '2';
if (cell=='STR') return '3';
}
},
By the way, you can set the sortname property of jqgrid to set a column for initial loadtime sorting.
I am using jquery grid version 4.4.1 . I have used multiselect: true option to enable the checkboxes for all the rows. I am also using 2 level grouping i.e grouping by 2 fields. But i am not getting the checkboxes for those grouping headers. only my actual records are getting checkboxes. Please help me to know if there is any way we can use it.
<code> grouping: true,
groupingView : { groupField : ['moduleName', 'subModuleName'],
groupColumnShow : [false, false],
groupText : ["<b>{0} </b>","<b>{0} </b>"],
groupCollapse : true,
groupOrder: ['asc', 'asc'],
The groupText : field
</code>
I am using jQGrid Latest version in my project.following is complete configuration that i configured.
jQuery("#list").jqGrid( {
url : 'Link.do?method=findAllBrand',
mtype : 'GET',
height : 350,
datatype : "xml",
colNames : [ 'Name' ],
colModel : [ {
name : 'name',
index : 'name',
width : 620
} ],
rowNum : 10,
rowList : [ 10, 20, 30 ],
sortname : 'id',
sortorder : "desc",
viewrecords : true,
multiselect : true,
imgpath : 'themes/base/images',
caption : "Brand (s) Summary Grid",
pager : $('#pager'),
cache : false,
onSelectRow : function(id) {
}
});
I am getting following data in form of xml from server :
<?xml version="1.0" encoding="UTF-8" standalone="yes"?><rows><page>1</page><total>1</total><records>4</records><row id="BRD00003"><cell>Blanco</cell></row><row id="BRD00001"><cell>Bosch</cell></row><row id="BRD00004"><cell>Chef</cell></row><row id="BRD00002"><cell>F&P</cell></row></rows>
i know that in the last cell of last row is creating problem , because it contains & char which has special meaning in the xml. however i have escaped sequence the whole xml using Apache commons lang library using below function.
toXml = StringEscapeUtils.escapeXml(toXml);
and the resulting string is
<?xml version="1.0" encoding="UTF-8" standalone="yes"?><rows><page>1</page><total>1</total><records>4</records><row id="BRD00003"><cell>Blanco</cell></row><row id="BRD00001"><cell>Bosch</cell></row><row id="BRD00004"><cell>Chef</cell></row><row id="BRD00002"><cell>F&P</cell></row></rows>
still i got the same error in Mozilla firefox latest version and in chrome , ie 7,8 also.
I have to show you this special characters in the gird so how can i solve this problem ?
Thank You
Mihir Parekh
i am generating the xml from server side.
Then escape each text node and each attribute value separately, it's all simple as that.
I recommend you to use JSON format instead of XML whenever it's possible.
If you do need to use XML and you need to place some general values in XML you need use CDATA construct (<![CDATA["some common text"]]>).
Additionally I would recommend you to use autoencode: true as your standard jqGrid options. In the case you will be able to place any text in jqGrid cells. jqGrid will do the encoding of all characters which have special meaning for HTML.
I am using jqGrid with treeGrid. I have added a filterToolbar. I would like to search locally instead of having a server call. The treegrid docs say that, "When we initialize the grid and the data is read, the datatype is automatically set to local." (This is regards to TreeGrid)
So, is it possible to implement local search with treeGrid. I tried the below configuration, but it is resulting in server calls.
My Configuration is
var grid = $("#grid").jqGrid({
treeGrid: true,
treeGridModel: 'adjacency',
ExpandColumn: 'businessAreaName',
ExpandColClick : true,
url:'agileProgramme/records.do',
datatype: 'json',
mtype: 'GET',
colNames:['Id'
, 'Business Area'
, 'Investment'
, 'Org'
, 'Goal'
],
colModel:[
/*00*/ {name:'agileProgrammeId',index:'agileProgrammeId', width:0, editable:false,hidden:true},
/*01*/ {name:'businessAreaName',index:'businessAreaName', width:160, editable:false},
/*02*/ {name:'programmeName',index:'programmeName', width:150, editable:false, classes:'link'},
/*03*/ {name:'org',index:'org', width:50, editable:false, classes:'orgHierarchy', sortable : false},
/*04*/ {name:'goal',index:'goal', width:70, editable:false}
],
treeReader : {
level_field: "level",
parent_id_field: "parent",
leaf_field: "leaf",
expanded_field: "expanded"
},
autowidth: true,
height: 240,
pager: '#pager',
sortname: 'id',
sortorder: "asc",
toolbar:[true,"top"],
caption:"TableGridDemo",
emptyrecords: "Empty records",
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "agileProgrammeId"
}
});
And to implement the search toolbar
$('#grid').jqGrid('filterToolbar', {stringResult: true,searchOnEnter : true});
Would appreciate any help or any pointer on even if it is possible?
The most problem in the TreeGrid filtering is that it's not clear what should be displayed in the TreeGrid as the result of applying the filter. The standard behavior of applying filter to the grid consist from removing all non-filtered rows. Such behavior will be wrong in case of TreeGrid. In the answer to the close question I tried to explain the problem.
What one can try to implement is some kind of highlighting of the filtered rows only (see here as an idea) or one can set some CSS class to the non-filtered rows to make there gray (like disabled). In any way one have to display parents of the filtered rows in some way. One more option will be to display the filtered TreeGrid not in the Tree form. On can display for example an additional column with the path to the filtered row and the rest row data.
UPDATED: What I mean with "to display parents of the filtered rows" is about the following. Let us we have the TreeGrid like the following
+root 123
+testchild1 32
test1 4
+child2 30
test2 7
and we filter for the first column for the text "test". In the case it would be wrong to display just the lines which has the text "test"
+testchild1 32
test1 4
test2 7
but in some scenarios if would be enough to display the above lines with the full path till the root element:
root\testchild1 32
root\testchild1\test1 4
root\testchild1\test2 7
In the case the information will be displayed in the grid instead of TreeGrid.
In other cases the searching in the leafs only can have sense. In the case one could really display the results in the TreeGrid form, but it will be not the common case.
Scenario:
Use "stype:'select'" for 'Client' column in search popup.
The dataUrl for this column returns "<select><option value='F'>F</option><option value='O'>O</option></select>"
Bring up the Search Popup.
First line of the search criteria: 'Client not equal F'
Second line of search criteria: 'Amount not equal 300'
match type: 'any'
Click on Find.
I expect both the records with client type == 'F' to show up but neither do. Looks like the match type is still 'AND' instead of 'OR'.
$(function() {
var mydata = [
{id:"1", name:"test", amount:"200"},
{id:"2", name:"test2", amount:"300"},
{id:"3", name:"F", amount:"400"},
{id:"4", name:"test4", amount:"200"},
{id:"5", name:"test5", amount:"300"},
{id:"6", name:"test6", amount:"400"},
{id:"7", name:"test7", amount:"200"},
{id:"8", name:"test8", amount:"300"},
{id:"9", name:"test9", amount:"400"},
{id:"10",name:"test10", amount:"500"},
{id:"11",name:"F", amount:"500"},
{id:"12",name:"test11", amount:"500"},
{id:"13", name:"test", amount:"200"},
{id:"14", name:"O", amount:"200"}
];
jQuery("#list").jqGrid({
datatype: "local",
data: mydata,
width: 700,
colNames:['Inv No','Client', 'Amount'],
colModel:[
{name:'id',index:'id', width:65, sorttype:'int', searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},
{name:'name',index:'name', width:100, searchoptions:{dataUrl:'/api/domains/producttypedomain'}},
{name:'amount',index:'amount', sorttype:'int', width:80, align:"right"}
],
rowNum:100,
pager: '#pager',
height:'auto',
viewrecords: true,
rownumbers: true,
gridview : true,
caption:"Advanced Search Example"
});
jQuery("#list").jqGrid('navGrid','#pager',
{
edit:false,add:false,del:false,search:true,refresh:true
},
{}, // edit options
{}, // add options
{}, //del options
{multipleSearch:true, overlay:false, recreateFilter:true} // search options
);
});
I verified your example and I see that you found a bug in jqGrid. So +1 from me for you.
By the way the same bug still exist in the new version of the new multisearch plugin which is now in the alpha phase (see here for more information). The bug can be reproduced if one try to make OR (any) operation of two "not equal" operation. The "not equal" implementation has a bug.
In the current version (with the bug) of jqGrid the searching/filtering follows to execution of the statements like
!(parseInt(this.amount,10) == parseInt(200,10)) && !(parseInt(this.amount,10) == parseInt(500,10))
in case of operation ((amount<>200)||(amount<>500)). It is wrong. The "not equal" implementation is buggy in the current version of jqGrid.
I fixed the problem in the source code of jqGrid as following:
1) I added new function notEquals defined as
this.notEquals=function(f,v,t){
return self._compareValues(self.equals,f,v,"!==",t);
};
and inserted it after the this.equals (see here).
2) I modified the line 1359 of the grid.base.js from
'ne':function(queryObj) {return queryObj.not().equals;},
to
'ne':function(queryObj) {return queryObj.notEquals;},
After the fixes the searching works correct. You can see the results here (your original version one can test here)
In the next time I will post my suggestion in the trirand forum and I hope that Tony Tomov (the developer of jqGrid) will implement the fixes in the jqGrid.
UPDATED: How I promised I posted the bug report together with my suggestions to fix the problem.
UPDATED 2: The bug is already fixed in the current developer version on the GitHub. You can see the results here which use new fixed version with even more changes as I suggested in my answer. The new multiselect interface you can see here.