Forum
22:55
06/11/2009
Hello all,
I have a requirement in one of my projects where I have to highlight malformed entries on a table. So I am wondering whether there is a way to customize the look and feel of individual cells in a grid? Setting the value with a <font...>...</font> HTML tag does not seem to work for me.
TIA,
George
13:06
Moderators
30/10/2007
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.
18:29
Moderators
30/10/2007
Hello,
Another possible and very easy solution is to use a custom formatter.
There is example for this here:
http://www.trirand.com/jqgridw.....er#example
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.
23:26
06/11/2009
I used the setCell() functionality that Tony mentioned on his original response (BTW, thank you Tony!).
I obtain the data on the server side throught a separate JSON request and I check for malformed cells in there. I am pretty sure you can do it if you are obtaining the data directly through the jqGrid. I then have a return data structure which is an array containing entries of the form: {message: "my message", rowId: row, cellId: cell}. Remember rowId is what you have set your ID to be or if you have not set anything its an iuncremental number. Cell Id is also what you have specified as name is the colModel.
I first set the grid in JavaScript and then iterate through the forementioned data structure to highlight the malformed entries. Here's the code:
...
// Create the preview grid
jQuery("#gridErrorPreviewTable").jqGrid({
datatype: "local",
height: "100%",
colNames: response.data.colNames,
colModel: response.data.colModel,
pager: '#pagerErrorGridPrevieTable',
viewrecords: true,
caption: 'Import File Preview'
});
// set the pager
jQuery('#gridErrorPreviewTable').jqGrid('navGrid','#pagerErrorGridPreviewDiv', {edit:false,add:false,del:false,search:true});
// add the data
for (var i = 0; i <= response.data.rows.length; i++) {
jQuery("#gridErrorPreviewTable").jqGrid('addRowData',i + 1, response.data.rows[i]);
}
for(var i=0;i<response.errorMessages.length;i++) {
var rowId=response.errorMessages[i].rowId;
var cellId=response.errorMessages[i].cellId;
jQuery("#gridErrorPreviewTable").jqGrid('setCell',rowId,cellId,'',{color: 'yellow',background: 'red'});
}
...
I hope it helps you newperson 🙂
George
00:24
28/12/2009
Thank you very much for the update. What I'd like to accomplish is check columnid 'item_count' (which is defined in colModel and data is provided by server using php and a json response) to see if it has a value under 600, if it does I want to highlight the entire row with colors. I included the modified code using some of yours and I added comments on the things I didn't really understand maybe you can help me.
jQuery(document).ready(
function() {
jQuery("#s4list").jqGrid({
scroll: 1,
url:'jqgrid/search_adv.php?q=1',
datatype: "json",
width: 500,
colNames:['Store','Business Unit', 'SKU Count', 'Date'],
colModel:[
{name:'Store',index:'store_number', width:65, searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},
{name:'Businness Unit',index:'bu', width:80, align:"right",searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},
{name:'SKU Count',index:'item_count', width:80,align:"right",searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},
{name:'Date',index:'datetime', width:90, align:"right",searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}},
],
rowNum:30,
mtype: "POST",
rowList:[30,40,60],
pager: '#s4pager',
sortname: 'item_count',
viewrecords: false,
rownumbers: true,
gridview : true,
sortorder: "asc",
caption:"SKU Count of stores databases"
});
jQuery("#s4list").jqGrid('navGrid','#s4pager',
{
edit:false,add:false,del:false,search:true,refresh:true
},
{}, // edit options
{}, // add options
{}, //del options
{multipleSearch:true} // search options
);
jQuery("#s4list").jqGrid('gridResize',{minWidth:350,maxWidth:800,minHeight:80, maxHeight:350});
for (var i = 0; i <= response.data.rows.length; i++) { //Increments
jQuery("#s4list").jqGrid('addRowData',i + 1, response.data.rows[i]); //Goes through each row setting color
}
for(var i=0;i<response.errorMessages.length;i++) { //Checks the Length of errorMessages but what is stored inside ErrorMessages?
var rowId=response.errorMessages[i].record; //$responce->rows[$i]['id']=$row[record]; I do not use this in my colModel but this is an AutoIncrementing field in my DB. Set it to record per your suggestion
var cellId=response.errorMessages[i].item_count; //Per your suggestion I changed cellId with the cellId that I'd like to perform the check on and it's item_count defined in colModel
jQuery("#s4list").jqGrid('setCell',rowId,cellId,'',{color: 'yellow',background: 'red'}); //This is obvious sets the color on the entire cell if the cellId equals condition
}
});
00:46
06/11/2009
Alright I think you need to go back to the wiki and read the introductory material on jqGrid. All the response.* you see such as response.errorMessages are data specific for my application.
Maybe what you need to do is add a handler for a loadComplete event. In the body you can use the getRowData and setRowData to check for the value you are interested and to update the CSS for the rows you would like to highlight.
I am also fairly new to jQuery, jqGrid, etc. so maybe looking into the formatter Tony mentioned in his second post may worth your while.
Again I would suggest you look into the introductory material and understand how jqGrid works--I assure you this investment will re-pay you multiple times. 🙂
George.
04:44
Yeah I've read quite a bit about it. I looked into it and what I need to do is provide a custom formatter for what I need, the only problem is that I am having a hard time putting it together. This is what I got so far. I will keep trying until I get it, even if it takes me a while.
jQuery(document).ready(
function() {
jQuery("#s4list").jqGrid({
........
datatype: "json",
.....
colModel:[
{name:'SKU Count',index:'item_count', width:80,align:"right",searchoptions:{sopt:['eq','ne','lt','le','gt','ge']}, formatter:highlight},
......
function highlight (cellvalue, options, rowObject)
{
varCellValueInt = parseInt(cellvalue); //How does it know that the cell I want to use is item_count ?
if (cellValueInt < 600) //I want the item_count column to be checked if it finds a value < 600 to highlight entire row.
return Json(new_formated_cellvalue); //Not sure what to put in the new formatted value to highlight the row a certain color.
else
return Json(cellvalue); //Not sure if this is correct, does it even need an else statement? I will need to test
}
....
16:50
Moderators
30/10/2007
Hello,
Basically you are in the right direction.
In the optins parameter you have the id of the row. So it can be something like
function highlight (cellvalue, options, rowObject)
{
...
if(cellValueInt < 600) $("#"+options.rowId).addClass("redclass")
else $("#"+options.rowId).addClass("blueclass")
...
return cellvalue
}
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.
00:15
28/12/2009
Thank you for the reply, I have been working on this all day today but everything I think of trying just doesn't seem to work.
Maybe you can clarify a few things for me.
<head>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
//This does not work it returns the cell value + [object Object]
…
function highlight (cellvalue, options, rowObject)
{
return cellvalue + $(”#”+options.rowId).addClass(”selected”, “highlight”);
}
//Nothing changes on my grid. I think it might be because of the return statement, I am not actually returning anything but original values.
function highlight (cellvalue, options, rowObject)
{
if(parseint(cellvalue) < 600) $(”#”+options.rowId).addClass(”selected”, “highlight”);
else $(”#”+options.rowId).addClass(”selected”, “highlight”);
return cellvalue
}
Tony,
Thanks again for reading this!
14:01
Moderators
30/10/2007
Hello,
This call is wrong:
return cellvalue + $(”#”+options.rowId).addClass(”selected”, “highlight”);
should be:
function highlight (cellvalue, options, rowObject)
{
$(”#”+options.rowId).addClass(”selected highlight”);
return cellvalue;
}
Note the addClass - where you mixed some things. See here: http://docs.jquery.com/Attribu.....lass#class
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.
01:07
Hi, im also trying to solve a similar problem, this is in an app im developing with CakePHP and jqGrid, btw Tony, jqGrid rocks!
I may be prematurely asking here, but from all the great responses that I see, I think you guys can help me out.
My grid is fine, working as intended, but I have a feature request to colorize the text in cells that have changed from the previous
version of a database table that the end user edits through the grid form.
I have this inside my jQuery(document).ready();, after my jqGrid stuff.
url: "<?php echo $html->url('/ayp/getchanges'); ?>",
cache: false,
success: function(xml){
jQuery(xml).find('Change').each(function(){
var rowId = jQuery(this).attr('rowId');
jQuery(this).find('colId').each(function(rowId){
var cellId = jQuery(this).text();
jQuery('#list4').jqGrid('setCell',rowId,cellId,'',{color:'red'});
});
});
}
});
The XML response that I am parsing looks like this...
<Change rowId="7">
<colId>note</colId>
</Change>
<Change rowId="10">
<colId>apscn_race</colId>
<colId>note</colId>
</Change>
<Change rowId="2704">
<colId>apscn_StudentName</colId>
<colId>apscn_grade</colId>
<colId>apscn_race</colId>
</Change>
</Changes>
The request fires and my response comes back to me, but I am not getting any sort of style change on my cells.
Am I hooking into the grid incorrectly? I began with this function defined in another file, and it didn't work there so I
moved it into the success: callback.
Please help! 🙂
01:20
Ok, I revised...
url: “<?php echo $html->url('/ayp/getchanges'); ?>”,
cache: false,
success: function(xml){
jQuery(xml).find('Change').each(function(){
var rowId = jQuery(this).attr('rowId');
jQuery(this).find('colId').each(function(){
var cellId = jQuery(this).text();
jQuery('#list4').jqGrid('setCell',rowId,cellId,'',{color:'red'});
});
});
}
This works now, I thought if I had reloadAfterSubmit:true in my jqGrid that it would colorize on submit, but I was wrong.
How can I get it to call this after submit?
02:52
Howdy,
I changed:
var cellId = jQuery(this).text();
jQuery('#list4').jqGrid('setCell',rowId,cellId,'',{color:'red'});
});
to...
var cellId = jQuery(this).text();
jQuery('#list4').jqGrid('setCell',rowId,cellId,'',{color:'red'});
});
(Just removed the rowId) from that anonymous function(){} after .each.
Is there a way that I can put that entire ajax call in a function and call it after the load and reloadAfterSubmit:true ?
Im wanting it to do the ajax call after the user submits the form, and if they go to the next page in the grid etc...
10:28
06/11/2009
Did you try any of the jqGrid events found at http://www.trirand.com/jqgridw..... Maybe the loadComplete or gridComplete events will work for you. I have never used them personally but look like they are good candidates.
George
17:09
13/01/2010
tony said:
Hello,
Basically you are in the right direction.
In the optins parameter you have the id of the row. So it can be something like
function highlight (cellvalue, options, rowObject)
{
…
if(cellValueInt < 600) $(”#”+options.rowId).addClass(”redclass”)
else $(”#”+options.rowId).addClass(”blueclass”)
…
return cellvalue
}
Regards
Tony
My experience is that this approach will not work, because the row is not inserted into DOM when formatter runs. So
is not valid.
I had to use afterInsert event, which is not a bad way:
...
gridview:false,
altRow:false,
afterInsertRow:function (rowid,rowdata,rowelem){
if (rowdata._disabled>0){
$("#"+rowid).addClass("disabledRow");
}
}
This will work until you don't have 2 instances of jqGrid at your page.
What is the best selector to select row of jqGrid executing this function ? (something like $("#"+rowid, this))
11:30
Moderators
30/10/2007
Hello,
@k2s
Thanks for the correction. It is the way that you write it.
It is my mistake.
Best 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:
47 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