jQuery Grid Plugin - jqGrid - Topic: Custom fonts and colors for cells

tony on Custom fonts and colors for cells

Tue, 19 Jan 2010 11:30:45 +0200

Hello,

@k2s

Thanks for the correction. It is the way that you write it.

It is my mistake.

Best regards

Tony

k2s on Custom fonts and colors for cells

Sat, 16 Jan 2010 17:09:05 +0200

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

$(”#”+options.rowId)

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))

hyperspace on Custom fonts and colors for cells

Sat, 09 Jan 2010 12:00:42 +0200

gridComplete is what I was looking for. Thanks for pointing me in the right direction. 🙂

karabot on Custom fonts and colors for cells

Sat, 09 Jan 2010 10:28:52 +0200

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

hyperspace on Custom fonts and colors for cells

Sat, 09 Jan 2010 02:52:44 +0200

Howdy,

I changed:

jQuery(this).find('colId').each(function(rowId){
var cellId = jQuery(this).text();
jQuery('#list4').jqGrid('setCell',rowId,cellId,'',{color:'red'});
});

to...

jQuery(this).find('colId').each(function(){
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...

karabot on Custom fonts and colors for cells

Sat, 09 Jan 2010 01:35:52 +0200

Hi Hyper,

I cannot see what has changed from the original post you made.

George

hyperspace on Custom fonts and colors for cells

Sat, 09 Jan 2010 01:20:20 +0200

Ok, I revised...

jQuery.ajax({
            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?

hyperspace on Custom fonts and colors for cells

Sat, 09 Jan 2010 01:07:19 +0200

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.

jQuery.ajax({
            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...

<Changes>
    <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! 🙂

tony on Custom fonts and colors for cells

Sun, 03 Jan 2010 14:01:59 +0200

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

newperson on Custom fonts and colors for cells

Wed, 30 Dec 2009 00:15:46 +0200

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!

tony on Custom fonts and colors for cells

Tue, 29 Dec 2009 16:50:03 +0200

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

newuser on Custom fonts and colors for cells

Tue, 29 Dec 2009 04:44:36 +0200

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
}

....

karabot on Custom fonts and colors for cells

Tue, 29 Dec 2009 00:46:40 +0200

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.

newperson on Custom fonts and colors for cells

Tue, 29 Dec 2009 00:24:50 +0200

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
}

});

karabot on Custom fonts and colors for cells

Mon, 28 Dec 2009 23:26:03 +0200

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

tony on Custom fonts and colors for cells

Mon, 28 Dec 2009 18:29:21 +0200

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

newperson on Custom fonts and colors for cells

Mon, 28 Dec 2009 18:00:23 +0200

karabot,

if you figure it out it'd be cool if you could follow up here, what you want to do is a cool idea and I could definetely use it on my grid. I looked at the link tony provided but god damn it's way over my head.

tony on Custom fonts and colors for cells

Sat, 26 Dec 2009 13:06:05 +0200

Hello,

Look at docs - see setCell method

http://www.trirand.com/jqgridw.....ki:methods

Regards

Tony

karabot on Custom fonts and colors for cells

Thu, 24 Dec 2009 22:55:15 +0200

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