Welcome Guest Search | Active Topics | Sign In | Register

Grid Cell background Color in Static Row Options
RB0135
Posted: Sunday, October 6, 2013 8:06:25 PM
Rank: Member
Groups: Member

Joined: 9/26/2013
Posts: 23
Hi,

I have a grid where I have to create multiple header rows.

So, I added 3 rows, made them static rows, turned off the header and it looks/works fine.

All the grid columns are created in the c# code behind.

However, on row2 from column 3 to 40, I need to change the background colors depending on the header and these columns are dynamic.

For example, There are 5 groups of columns between 3 and column 40 with headers labelled E, I, H, C and S1. Each of these groups are a different color, but only for that Row.

I have tried to apply a style, but that continues down each group of column. I don't want that.

I have tried adding HTML formatting text by changing the DataFormat from other examples posted (eg: "<div style='color:green'>{0}</div>") but that doesn't do a thing. No formatting is applied yet the appropriate value is shown.

I have tried the StyleField option but these columns are dynamically created from the database, so that really isn't a solution.

The only other solution I have read about is the javascript GridCell.overrideStyle and this would work well, but, I cant seem to get it to work Grid is loading/being created. I tried using ClientSideOnLoad, and although I can get the grid, and attempt at getting a row or column in the grid returns a null value.

Is there an easy way (like the standard .net gridview) to change the row/cell combination background from either code behind or while the grid is being rendered?

Thanks,
Rob
eo_support
Posted: Monday, October 7, 2013 9:16:31 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
Hi,

You have pretty much enumerated all the options. Among them StyleFieldId might be the best option. What you can do is to add your data into a DataTable, then use code to add column into that DataTable. This step occurs in your code and has nothing to do with the database.

overrideStyle should work as well. If you have problem, please post your code and we will be happy to take a look.

Thanks!
RB0135
Posted: Monday, October 14, 2013 1:55:39 AM
Rank: Member
Groups: Member

Joined: 9/26/2013
Posts: 23
Thanks for your reply and sorry for the delay.

I suppose the main question I am asking is what routine (JavaScript I'm presuming) gets fired that I can use when the grid is being databound so that I can then check row and column and do things with that row/column.

Sure the overrideStyle will work, but I cant even get to the point where I can try to override it.

Is ClientSideOnLoad the correct function to use (That is, does this get fired when the grid is databound, before it is databound or after)? When I tested it, it only fired once and as stated, there were no Rows or Columns present to retrieve.

Is there another ClientSideOn???? routine I should be using.

Thanks for any replies.
eo_support
Posted: Monday, October 14, 2013 1:37:21 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
Hi,

ClientSideOnLoad is the right function to call. Data binding occurs on the server side. ClientSideOnLoad occurs on the client side. Because server side code always runs before client side runs, ClientSideOnLoad always occurs after data binding.

Thanks!
RB0135
Posted: Monday, October 14, 2013 8:36:27 PM
Rank: Member
Groups: Member

Joined: 9/26/2013
Posts: 23
Great, thanks for the heads up.

I also thought of a work around by using ClientSideGetText routine, and then using the overrideStyle. I haven't tried that yet, but would prefer the ClientSideOnLoad as it wouldn't fire each time one of the 40 columns was edited.

Thanks again.
RB0135
Posted: Monday, October 14, 2013 9:56:14 PM
Rank: Member
Groups: Member

Joined: 9/26/2013
Posts: 23
Well, I finally got there. Thanks for all your help. Code included for reference to others.

Code: JavaScript
function initBUGrid() {
    //Routine to do some formatting on the BU_Grid
     var grid = eo_GetObject("BU_EOGrid");
     var colCount = grid.getColumnCount();

     //Set Business Header
     var cellSingle = grid.getItem(0).getCell(3);
     cellSingle.overrideStyle("BUBusHeader");

     //Color the Sector Headings
     for (var i = 3; i < colCount; i++) {
         //Get the cell object
         var cell = grid.getItem(1).getCell(i);

         //Get the Cell Value
         var cellValue = cell.getValue()

         //Change the header/style
        switch (cellValue) {
            case "C":
                cell.overrideStyle("BUXColLightPink");
                break;
            case "E":
                cell.overrideStyle("BUXColLightBlue");
                break;
            case "H":
                cell.overrideStyle("BUXColLightMauve");
                break;
            case "I":
                cell.overrideStyle("BUXColLightGreen");
                break;
            case "S1":
                cell.overrideStyle("BUXColLightYellow");
                break;
        }
     }
 }
eo_support
Posted: Tuesday, October 15, 2013 9:17:42 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,195
Your code looks good. Thanks for sharing!
RB0135
Posted: Tuesday, October 15, 2013 4:00:15 PM
Rank: Member
Groups: Member

Joined: 9/26/2013
Posts: 23
Thanks for your help. Much appreciated


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.