Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
Custom fonts and colors for cells
24/12/2009
22:55
Avatar
karabot
Member
Members
Forum Posts: 15
Member Since:
06/11/2009
sp_UserOfflineSmall Offline

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

26/12/2009
13:06
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Look at docs - see setCell method

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

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.

28/12/2009
18:00
Avatar
newperson
Member
Members
Forum Posts: 27
Member Since:
28/12/2009
sp_UserOfflineSmall Offline

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.

28/12/2009
18:29
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

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.

28/12/2009
23:26
Avatar
karabot
Member
Members
Forum Posts: 15
Member Since:
06/11/2009
sp_UserOfflineSmall Offline

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

29/12/2009
00:24
Avatar
newperson
Member
Members
Forum Posts: 27
Member Since:
28/12/2009
sp_UserOfflineSmall Offline

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
}

});

29/12/2009
00:46
Avatar
karabot
Member
Members
Forum Posts: 15
Member Since:
06/11/2009
sp_UserOfflineSmall Offline

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.

29/12/2009
04:44
Avatar
newuser
Guest
Guests

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
 }

....

29/12/2009
16:50
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

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.

30/12/2009
00:15
Avatar
newperson
Member
Members
Forum Posts: 27
Member Since:
28/12/2009
sp_UserOfflineSmall Offline

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!

03/01/2010
14:01
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

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.

09/01/2010
01:07
Avatar
hyperspace
Guest
Guests

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

09/01/2010
01:20
Avatar
hyperspace
Guest
Guests

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?

09/01/2010
01:35
Avatar
karabot
Member
Members
Forum Posts: 15
Member Since:
06/11/2009
sp_UserOfflineSmall Offline

Hi Hyper,

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

George

09/01/2010
02:52
Avatar
hyperspace
Guest
Guests

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

09/01/2010
10:28
Avatar
karabot
Member
Members
Forum Posts: 15
Member Since:
06/11/2009
sp_UserOfflineSmall Offline

Did you try any of the jqGrid events found at http://www.trirand.com/jqgridw.....&nbsp; Maybe the loadComplete or gridComplete events will work for you.   I have never used them personally but look like they are good candidates.

George

09/01/2010
12:00
Avatar
hyperspace
Guest
Guests

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

16/01/2010
17:09
Avatar
k2s
Member
Members
Forum Posts: 11
Member Since:
13/01/2010
sp_UserOfflineSmall Offline

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

19/01/2010
11:30
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

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.

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
32 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.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information