Forum
19:08
21/09/2010
Hello
I have just upgraded jQuery (1.5.2) jQuery UI (1.8.12) and jQgrid (4.0.0) so that I can take advantage of some of the latest features like local search. The one problem I am having is that though the grid loads fine and the search works beautifully, clicking on a row causes an error in ie7 of 'className is null or not an object' on line 129.
Before performing the upgrade, I already had the grid loading and was able to click on a row with no error. I have checked every upgraded file to make sure I have the correct versions. I have also checked other applications where we use jQgrids(but no search) and those don't give the error. I have also checked the data being returned to see if I added something that could break the js. I also commented out the last four columns to see if the urls, style info, or spans as breaking something in the grid and again I still get the error.
here is my grid:
jQuery.noConflict();
jQuery(document).ready(function(){jQuery('#spinner2').show();
jQuery("#grid").jqGrid({
type:'GET',
url: "dataFeeder.jsp?sql=<%=intelliSql%>&db_connection=DPDCSQL",
datatype: "json",
jsonReader : {
repeatitems: true,
root: "rows",
page: "page",
total: "total",
records: "records",
cell:"cell",
id: "0″
},
colNames: ["Region","Substation","Feeder","Switch","Type","Status","Prg","PrgT1","PrgT2","Edit"],
colModel:[
{"name":"Region", "index":"Region" ,"align": "center", "sortable": true, "width": 75, "hidden":false, "key":true, "search":true},
{"name":"Substation", "index":"Substation","align": "center", "sortable": true, "width": 100, "hidden":false, "search":true},
{"name":"Feeder", "index":"Feeder","align": "center", "sortable": true, "width": 75, "hidden":false, "search":true},
{"name":"Switch", "index":"Switch","align": "center", "sortable": true, "width": 75, "hidden":false, "search":true},
{"name":"Type", "index":"Type","align": "center", "sortable": true, "width": 100, "hidden":false, "search":true},
{"name":"Status", "index":"Status","align": "center", "sortable": true, "width": 100, "hidden":false, "search":true},
{"name":"Prg", "index":"Prg","align": "center", "sortable": true, "width": 45, "hidden":false, "search":false},
{"name":"PrgT1", "index":"PrgT1","align": "center", "sortable": true, "width": 45, "hidden":false, "search":false},
{"name":"PrgT2", "index":"PrgT2","align": "center", "sortable": true, "width": 45, "hidden":false, "search":false},
{"name":"Edit", "index":"Edit","align": "center", "sortable": true, "width": 35, "hidden":false, "search":false}
],
pager: jQuery('#pager'),
toppager: true,
rowNum: 20,
altRows:true,
altclass:'alternate_row',
width: '750',
height:'450',
rowList: [20, 50, 100, 200],
loadtext:'<img src="/_includes/images/progressbar.gif"> Loading Data….',
viewrecords: true,
repeatitems: true,
shrinkToFit: false,
loadonce: true,
autowidth:false,
sortname: 'region',
sortorder: 'asc',
loadError: function(xhr,status,error){
alert(xhr.status + ' error ' + error);
}
});
jQuery("#grid").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
jQuery("#grid").jqGrid('navGrid','#pager',
{ view: false, del: false, add: false, edit: false, excel:false, search: false },
{}, // default settings for edit
{}, // default settings for add
{}, // delete
{}, // search options
{}
);
jQuery("#grid").jqGrid('navButtonAdd','#pager',{caption:"Excel",
onClickButton:function(){
window.open("../_includes/output_excel.jsp");
} });
jQuery('#spinner2').hide();});
Html of grid:
<table id="grid" ></table>
<div id="pager"></div>
Here is some sample JSON data
{"rows":[
{"rowID":0,"cell":["REGION1","SUBSTATION1","123456","A41146","Switch","Constructed","<span style='background:lightgrey;color:lightgrey; width:100px;'>one</span>","<span style='background:green;color:green; width:100px;'>two</span>","<span style='background:green;color:green; width:100px;'>two</span>","<a href='switchUpdate.jsp?mode=getValues&switch=A41146'><img src='../_includes/images/edit.gif'/></a>"]},
{"rowID":1,"cell":["REGION1","SUBSTATION1","123456","A41148","Switch","Proposed Install","<span style='background:lightgrey;color:lightgrey; width:100px;'>one</span>","<span style='background:green;color:green; width:100px;'>two</span>","<span style='background:green;color:green; width:100px;'>two</span>","<a href='switchUpdate.jsp?mode=getValues&switch=A41148'><img src=../_includes/images/edit.gif'/></a>"]},
{"rowID":2,"cell":["REGION1","SUBSTATION1","67890","A40890","Switch","Constructed","<span style='background:lightgrey;color:lightgrey; width:100px;'>one</span>","<span style='background:green;color:green; width:100px;'>two</span>","<span style='background:green;color:green; width:100px;'>two</span>","<a href='switchUpdate.jsp?mode=getValues&switch=A40890'><img src='../_includes/images/edit.gif'/></a>"]}
],"page":"1″,"records":3,"sidx":"Region","sord":"asc"}
Any help will be greatly appreciated.
Thank you
Joan
23:15
21/09/2010
BTW I went ahead and added all the individual files for jqGrid. So instead of line 129 that is referenced above, it is actually line 2460 in the grid.base.js which is :
if(!pt || pt.className.indexOf( 'ui-state-disabled' ) > -1 ) { return; }
Looking at that code and something above it, I solved this one myself.
I made a change to my colModel and changed which column had the defined key: true on it and set it on a more unique column of data.
{"name":"Region", "index":"Region" ,"align": "center", "sortable": true, "width": 75, "hidden":false, "search":true},
{"name":"Substation", "index":"Substation","align": "center", "sortable": true, "width": 100, "hidden":false, "search":true},
{"name":"Feeder", "index":"Feeder","align": "center", "sortable": true, "width": 75, "hidden":false, "search":true},
{"name":"Switch", "index":"Switch","align": "center", "sortable": true, "width": 75, "hidden":false, "search":true, "key": true},
{"name":"Type", "index":"Type","align": "center", "sortable": true, "width": 100, "hidden":false, "search":true},
{"name":"Status", "index":"Status","align": "center", "sortable": true, "width": 100, "hidden":false, "search":true},
{"name":"Prg", "index":"Prg","align": "center", "sortable": true, "width": 45, "hidden":false, "search":false},
{"name":"PrgT1", "index":"PrgT1","align": "center", "sortable": true, "width": 45, "hidden":false, "search":false},
{"name":"PrgT2", "index":"PrgT2","align": "center", "sortable": true, "width": 45, "hidden":false, "search":false},
{"name":"Edit", "index":"Edit","align": "center", "sortable": true, "width": 35, "hidden":false, "search":false}
03:59
26/04/2011
I am having this exact same problem. I'm not able to solve it the same way as the OP, however. I dont always have a clear primary / unique field to work with. It happens if I click on any field that is not unique.
I am using asp.net. Help would be greatly appreciated.
I can work around it with binding to a primary key column and setting it to Visible = false.
However, say I want to bind to a View rather than a table? Views cannot have primary keys in ms sql server so this wont work.
Thanks.
Most Users Ever Online: 715
Currently Online:
25 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