Forum



03:05

06/11/2010

17:31

09/11/2010

New to jqGrid and having issues with local sorting as well. I'm using JSON to load the data but I want the sorting to be done locally. I found this snippet on the site:
loadComplete : function () {
$("#alerttable").setGridParam({datatype:'local'});
},
But once I add that when I click a column header all the data disapears.
01:20

09/11/2010

For my local sorting issue here is the code:
<script>
$(function() {
jQuery("#alerttable").jqGrid({
url:'ActionServlet?ACTION=P1BYACTION',
datatype: "json",
height:800,
autoWidth:true,
jsonReader : {
id: 'groupLabel',
repeatitems: false
},
loadComplete : function () {
$("#alerttable").setGridParam({datatype:'local'});
},
sortable:true,
colNames:['Group Label','Count of Alerts','xVal','DVal'],
colModel:[
{name:'groupLabel',label:'Group Label', width:305,formatter:'showlink',
formatoptions:{baseLinkUrl:'DDAlertGroup.jsp',idName:'grouplabel'}},
{name:'countOfAlerts',width:120,sorttype:'int'},
{name:'xValue',width:120,sorttype: 'float',formatter:'number'},
{name:'dValue',width:120, sorttype: 'float',formatter:'number'}
],
rowNum:1000,
sortname: 'groupLabel',
viewrecords: true,
sortorder: "desc",
caption:"Alerts" });
});
</script>
The data loads fine initially but when I click a column all the data disapears.
19:18

10/08/2009

Sorry but to make any tests one need some test JSON data.
I already see one small errors in your javaScript file: there are no autoWidth parameter in jqGrid: only autowidth.
Moreover if groupLabel column contain unique data for every grid row you should probably better define key:true in the groupLabel column definition. Then you can remove id: 'groupLabel' from the jsonReader.
Instead of setting datatype to 'local' inside of loadComplete it is better to use new parameter loadonce:true which do the same.
Best regards
Oleg
07:04

11/05/2009

Here's me detailed grid definition:
$("#tblActiveProjects").jqGrid({
url:'../Data_Templates/DTM_Projects_Select.asp?FilterType=1&TeamMemberType=1',
colNames: ['Prj. No.','Project Name', 'Status','RAG','Latest Update','','','','Issues','Risks','Changes','Defects',''],
colModel: [
{name:'ProjectNumber', width:80, align:'center', sorttype:'text'},
{name:'ProjectName', width:445, align:'left', sorttype:'text', classes:'gridLink'},
{name:'ProjectStatus', width:90, align:'center', sorttype:'text'},
{name:'ProjectRAGIndicator', width:40, align:'center', sortable:false, formatter:RAG_formatter},
{name:'ProjectStatusDate', width:90, align:'center', datefmt:'d M Y', sorttype:'date', formatter:'date'},
{name:'IsOverdue', width:0, align:'center', hidden:true},
{name:'LinkToDashboard', width:0, align:'center', hidden:true},
{name:'LinkToWorkspace', width:0, align:'center', hidden:true},
{name:'ActiveIssues', width:50, align:'center', sorttype:'integer', classes:'gridLink'},
{name:'ActiveRisks', width:50, align:'center', sorttype:'integer', classes:'gridLink'},
{name:'ActiveChanges', width:50, align:'center', sorttype:'integer'},
{name:'ActiveDefects', width:50, align:'center', sorttype:'integer'},
{name:'Delete', width:25, align:'center', sortable:false, classes:'actionIcon', title:'Delete'}
],
height: 160,
sortname: 'ProjectName',
pager: '#pagerActiveProjects',
gridview: false,
toolbar: [true,"top"],
afterInsertRow: function(rowid, aData){
$("#tblActiveProjects").setCell(rowid,'ProjectName',"<a href='" + aData.LinkToWorkspace + "' target=_new title='Click the Project Name to open the Project Workspace'>" + aData.ProjectName + "</a>");
$("#tblActiveProjects").setCell(rowid,'ActiveRisks',"<a href='" + aData.LinkToWorkspace + "/Lists/Risks' target=_new title='Click to open the Project Risks list'>" + aData.ActiveRisks + "</a>");
$("#tblActiveProjects").setCell(rowid,'ActiveIssues',"<a href='" + aData.LinkToWorkspace + "/Lists/Issues' target=_new title='Click to open the Project Issues list'>" + aData.ActiveIssues + "</a>");
$("#tblActiveProjects").setCell(rowid,'Delete',"<img src='../Images/ButtonImages/delete_small.png' onclick=alert('" + rowid + "'); />");
if (aData.IsOverdue=='True'){
$("#tblActiveProjects").setCell(rowid,'ProjectStatusDate',"<a href='Reports/RPT_Dashboard.asp?ReportProjectID= " + rowid + "' target=_new title='Progress Updates on this project is outdated! Click to open the latest Project Dashboard'>" + $("#tblActiveProjects").getCell(rowid,4) + "</a>","gridLink gridOverdue");
}
else{
$("#tblActiveProjects").setCell(rowid,'ProjectStatusDate',"<a href='Reports/RPT_Dashboard.asp?ReportProjectID=" + rowid + "' target=_new title='Click to open the latest Project Dashboard' class='gridLink'>" + $("#tblActiveProjects").getCell(rowid,4) + "</a>","gridLink");
}
}
});
The grid works 100% on 3.6.5, but when I upgrade to 3.72, 3.8.0 or 3.8.1, the sorting of the date colum is not working. I get "NaN" errors in this column.
Thanks!
16:31

11/11/2010

Hi,
I'm also having the problem where data disappears on sorting - below is a short example that shows the behaviour. If I use setRowData instead of addJSONData it works OK - the rows are sorted and do not disappear. Trouble is I need the pager method as I want to set userdata. This worked ok in 3.6.
Thanks,
Andy
<script type="text/javascript">
$(document).ready(function () {
$("#foo").jqGrid({
datatype: "local",
colNames: ["", "Name", "QTY", "Total"],
colModel: [
{name: "key", index: "key", sorttype: "text", width: 10, sorttable: false, resizable: false},
{name: "name", index: "name", sorttype: "text", width: 200, resizable: false},
{name: "qty", index: "qty", sorttype: "float", width: 50, align: "right" },
{name: "total", index: "total", sorttype: "float", width: 90, formatter: "currency", align: "right", resizable: false}
],
localReader : {
cell: ""
}
});
});
function adddata()
{
var pager = {
rows: [
{id: 1, key: "t", name: "test", qty: 1, total: 1.99},
{id: 2, key: "t", name: "test2", qty: 2, total: 2.99}
],
records: 2,
total: 1,
userdata: [{test: 123}, {test2: 456}]
};
$("#foo").jqGrid("clearGridData");
$("#foo")[0].addJSONData(pager);
}
</script>
<table id="foo"></table>
<button onclick="adddata()">add data</button>
</body>
11:28

11/05/2009

Hi Oleg,
I'm using the grid.locale-en.js language file. I'm using an XML data source, and not JSON. Here's an extract of my XML:
<?xml version='1.0' encoding='ISO-8859-1'?><rows><records>8</records><row id='14668'><cell><![CDATA[PRJ-3366]]></cell><cell><![CDATA[Banking - Italian Casino]]></cell><cell>2 Active</cell><cell>Green</cell><cell>11/10/2010</cell><cell>False</cell><cell></cell><cell>http://derpwa3/EPM2007/Banking - Italian Casino</cell><cell>0</cell><cell>0</cell><cell>99</cell><cell>99</cell><cell></cell></row><row id='14669'><cell><![CDATA[PRJ-2853]]></cell><cell><![CDATA[Banking - WebECash NET]]></cell><cell>2 Active</cell><cell>Green</cell><cell>11/10/2010</cell><cell>False</cell><cell></cell><cell>http://derpwa3/EPM2007/Banking - WebECash NET</cell><cell>0</cell><cell>0</cell><cell>99</cell><cell>99</cell><cell></cell></row><row id='14670'><cell><![CDATA[PRJ-2537]]></cell><cell><![CDATA[Business Applications - Affiliates - Project Brooklyn]]></cell><cell>2 Active</cell><cell>Green</cell><cell>11/10/2010</cell><cell>False</cell><cell></cell><cell>http://derpwa3/EPM2007/Project Brooklyn (Affiliates Redesign)</cell><cell>0</cell><cell>2</cell><cell>99</cell><cell>99</cell><cell></cell></row><row id='14671'><cell><![CDATA[PRJ-3288]]></cell><cell><![CDATA[Business Applications - Affiliates - Spiral Upgrade Project]]></cell><cell>2 Active</cell><cell>Green</cell><cell>11/10/2010</cell><cell>False</cell><cell></cell><cell>http://derpwa3/EPM2007/Business Applications - Affiliates - Spiral Upgrade Project</cell><cell>0</cell><cell>0</cell><cell>99</cell><cell>99</cell><cell></cell></row><row id='14672'><cell><![CDATA[PRJ-2897]]></cell><cell><![CDATA[Business Applications - Game Recommendation Engine]]></cell><cell>2 Active</cell><cell>Green</cell><cell>11/10/2010</cell><cell>False</cell><cell></cell><cell>http://derpwa3/EPM2007/Business Applications - Game Recommendation Engine</cell><cell>0</cell><cell>0</cell><cell>99</cell><cell>99</cell><cell></cell></row><row id='14673'><cell><![CDATA[PRJ-3179]]></cell><cell><![CDATA[Business Applications - Orinoco - Casino Management System]]></cell><cell>2 Active</cell><cell>Green</cell><cell>11/10/2010</cell><cell>False</cell><cell></cell><cell>http://derpwa3/EPM2007/Business Applications - Vision - Cashier Management System</cell><cell>0</cell><cell>0</cell><cell>99</cell><cell>99</cell><cell></cell></row><row id='10269'><cell><![CDATA[PRJ-1869]]></cell><cell><![CDATA[Collusion and Fraud Control (CFC)]]></cell><cell>6 On Hold</cell><cell>Green</cell><cell>3/31/2010</cell><cell>True</cell><cell></cell><cell>http://derpwa3/EPM2007/Collusion and Fraud Control (CFC)</cell><cell>1</cell><cell>2</cell><cell>99</cell><cell>99</cell><cell></cell></row><row id='14674'><cell><![CDATA[PRJ-3362]]></cell><cell><![CDATA[OLR-NET v16]]></cell><cell>2 Active</cell><cell>Green</cell><cell>11/10/2010</cell><cell>False</cell><cell></cell><cell>http://derpwa3/EPM2007/OLR-NET v16</cell><cell>0</cell><cell>0</cell><cell>99</cell><cell>99</cell><cell></cell></row></rows>
Thanks,
Cas
15:42

10/08/2009

Hello Cas,
the code which you posted has some problems. First, I don't found datatype:'xml' in the code which you posted. Second, your XML data has no page and total items. So it will be supposed that you have the first page from total 0 pages. Next, the date format of the XML data are not in the ISO format which is expected. So you have to use
instead of datefmt:'d M Y'. At the end you not really use the most of data formated by the jqGrid. Instead of that you overwrite the data with absolute another formatted data inside of afterInsertRow. What you will have for example in the column, which you mark as the column in date format, are far from the declared date type. To be able to sort the data jqGrid should be able to read the data value from the cell, unformat it with the formatter which you declared (date formatter). Then jqGrid try compare different values decoded in the way. Is it possible with the data thich you placed in the grid manually?
After all of changes which are required and commenting of the RAG_formatter, which code you not posted, the data can be displayed, but I see no "NaN" error (see here). I could imagine that with other data you can have different kind of errors, because like I wrote before, you do manual formatting of data with declaring the data as the data formatted corresponds to another formatter.
If you need format the cell contains manually, you should define your custom formatter and custom unformater as a functions. Inside of the functions you can do almost the same as you do inside of afterInsertRow. After removing afterInsertRow you can set also gridview:true which is almost always recommended.
Best regards
Oleg
16:02

11/05/2009

Hi Oleg,
Sorry, I forgot to post the jqGrid defaults. Here it is:
$.extend(jQuery.jgrid.defaults,{
altRows: true,
altclass: 'altRow',
datatype: 'xml',
emptyrecords: 'No records to display.',
gridview: true,
loadonce: true,
loadui: 'disable',
pgbuttons: false,
pginput: false,
rowNum: -1,
recordtext: '{2} items',
sortable: true,
viewrecords: true,
viewsortcols: [false,'vertical',true]
});
I have also made the following change in the language file: newformat:"d M Y"
Thanks,
Cas
18:16

11/05/2009

Hi Oleg,
I'm trying your suggestion of custom formatter and unformatter, but with no luck. Can you please give me some guidance: I've got a date column that comes in the XML in format m/d/Y. I want to display this in the jqGrid in the format d M Y. But, I also want to be able to sort this column in date order.
Can you please give me the code for the colmodel, as well for the formatter and unformatter fucntions?
Thanks,
Cas
20:13

10/08/2009

Hi,
look at this old answer which can be easy modified for your date format. You can also use $.fmatter.util.DateFormat function. But if you need only display only the date like you describe in your last post, you can use predefined formatter date like I used on the example.
Regards
Oleg
12:42

11/05/2009

Hi Oleg,
After implementing the custom formatter, I'm getting closer to the solution.
However, I'm facing this issue now:
If I add the following code in my custom formatter function, the data is displayed correctly in the gird, and the sorting works well:
return "<a href='Reports/RPT_Dashboard.asp?ReportProjectID=" + options.rowId + "' target=_new title='Progress Updates on this project is outdated! Click to open the latest Project Dashboard'>" + $.fmatter.util.DateFormat("m/d/Y",cellvalue,"d M Y",$.jgrid.formatter.date) + "</a>";
When I however add a condition into this function, the data is still diplayed correctly, but the moment I sort, all the rows disappear from the grid:
if (rowObject.childNodes[5].textContent == "True"){
return "<a href='Reports/RPT_Dashboard.asp?ReportProjectID=" + options.rowId + "' target=_new title='Progress Updates on this project is outdated! Click to open the latest Project Dashboard'>" + $.fmatter.util.DateFormat("m/d/Y",cellvalue,"d M Y",$.jgrid.formatter.date) + "</a>";
}
else{
return "<a href='Reports/RPT_Dashboard.asp?ReportProjectID=" + options.rowId + "' target=_new title='Click to open the latest Project Dashboard'>" + $.fmatter.util.DateFormat("m/d/Y",cellvalue,"d M Y",$.jgrid.formatter.date) + "</a>";
}
01:46

10/08/2009

Probably custom sorting with sorttype as function or index as function could solve your problem.
In case of index as function it should be declared as index: function(obj) {/**/} and return for example text string which can be used instead of the cell contain. Look at my old post for more details. In the post you will find some urls to code examples.
Best regards
Oleg
Most Users Ever Online: 715
Currently Online:
57 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66