Forum
07:58
20/05/2009
We are having an issue where an image tag loaded via JSON is not clickable in IE (FF it is fine). If I click in the cell on empty area the click is registered.
I added a an alert to check. Thanks
Kevin
The JSON looks like this (just first record)
{"ROWS":[[1179,"AA, BB","ABBY34@testme.com","","","<img src=\\"\\/includes\\/images\\/buttons\\/ico_edit.gif
\\" style=\\"border: medium none ;\\" alt=\\"edit record\\" \\/>"]
jqGrid
$("#list").jqGrid(
{
url:'/model/administration.cfc?method=getUsers', //CFC that will return the users
datatype: 'json', //We specify that the datatype we will be using will be JSON
colNames:['ID','Fullname','Username','Office Location','Staff Type','det'], //Column Names
/*
The Column Model to define the data. Note you can make columns non sortable, specify width, alignment, etc.
We also specify the editoptions, edittype=text shows a nice textbox for inline edit.
We have also specified Edit Rules, to say which fields are required/not required for add/edit
*/
colModel :[
{name:'id',index:'id',sorttype:"int", hidden:true},
{name:'fullname',index:'fullname', width:250,align:"left",sorttype:"text"},
{name:'username',index:'username', width:250,align:"left",sorttype:"text"},
{name:'officelocation',index:'officelocation', width:180,align:"left",sorttype:"text"},
{name:'stafftype',index:'stafftype', width:180,align:"left",sorttype:"text"},
{name:'userdetail',index:'userdetail', width:50,sortable:false}
],
pager: $('#pager'), //The div we have specified, tells jqGrid where to put the pager
rowNum:20, //Number of records we want to show per page
rowList:[10,20,30,50], //Row List, to allow user to select how many rows they want to see per page
sortorder: "asc", //Default sort order
sortname: "lastname", //Default sort column
postData: {usertype: 'internal'},
viewrecords: true, //Shows the nice message on the pager
imgpath: '/includes/js/jqGrid_themes/basic/images', //Image path for prev/next etc images
//caption: 'Users', //Grid Name
height:'auto', //I like auto, so there is no blank space between. Using a fixed height can mean either a scrollbar or a blank space before the pager
mtype:'GET',
cellEdit: false,
recordtext:'Total Records', //On the demo you will notice "7 Total Records" - The Total Reocrds text comes from here
//pgtext:' of', //You notice the 1/3, you can change the /. You can make it say 1 of 3
//editurl:"/model/administration.cfc?method=addeditUser", //The Add/Edit function call
//toolbar:[true,"top"], //Shows the toolbar at the top. We will use it to display user feedback
//Things to do when grid is finished loading
loadComplete:function(){
//We get the Userdata for the grid.
var recorddata = $("#list").getUserData();
//show the msg in the toolbar
$("#t_list").html(recorddata.MSG);
},
onCellSelect: function(rowid, iCol, cellcontent) {
alert(iCol); // this is a test for click
if (iCol == 5 || iCol == 4 ) {
//alert(rowid + ":" + iCol +":"+ cellcontent);
var ret = jQuery("#list").getRowData(rowid); //alert("id="+ret.id+" invdate="+ret.username+"...");
$.nyroModalManual({
url: 'index.cfm?event=ehAdmin.dspInternalUserEdit',
ajax: {data: 'userId='+ret.id+'&username='+ret.username+'&fullname='+ret.fullname, type: 'POST'},
type: 'form',
modal: false,
bgColor: '#666666',
width: 680,
height: 410,
minWidth: 680, // Minimum width<strong></strong>
minHeight: 410, // Minimum height
//resizeable: true, // Indicate if the content is resizable. Will be set to false for swf
autoSizable: true,
closeButton: '<a href="#" class="nyroModalClose" id="closeBut" title="close">Close</a>'
});
return false;
}
},
//The JSON reader. This defines what the JSON data returned from the CFC should look like
jsonReader: {
root: "ROWS", //our data
page: "PAGE", //current page
total: "TOTAL", //total pages
records:"RECORDS", //total records
userdata:"USERDATA", //Userdata we will pass back for feedback
cell: "", //Not Used
id: "0" //Will default to frist column
}
}
Sample of table render
<tr id="1179" class="jqgrow">
<td title="1179" style="display: none;">1179</td>
<td title="AA, BB" style="text-align: left;">AA, BB</td>
<td title="ABBY34@testme.com" style="text-align: left;">ABBY34@testne.com</td>
<td title=" " style="text-align: left;"> </td><td title=" " style="text-align: left;"> </td>
<td title="undefined"><img alt="edit record" style="border: medium none ;" src="/includes/images/buttons/ico_edit.gif"/></td>
</tr>
09:54
Moderators
30/10/2007
Hello,
This is absolutley true. There is a bug in IE where the fidden columns (colIndex) is not calculated right. In Order to resolve the problem in IE you should move all the hidden coumns at end (in colModel) in your case this should be:
colModel :[
{name:'fullname',index:'fullname', width:250,align:"left",sorttype:"text"},
{name:'username',index:'username', width:250,align:"left",sorttype:"text"},
{name:'officelocation',index:'officelocation', width:180,align:"left",sorttype:"text"},
{name:'stafftype',index:'stafftype', width:180,align:"left",sorttype:"text"},
{name:'userdetail',index:'userdetail', width:50,sortable:false},
{name:'id',index:'id',sorttype:"int", hidden:true}
]
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
Most Users Ever Online: 715
Currently Online:
97 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