|
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
|
|
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!
|
|
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.
|
|
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!
|
|
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.
|
|
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;
}
}
}
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,195
|
Your code looks good. Thanks for sharing!
|
|
Rank: Member Groups: Member
Joined: 9/26/2013 Posts: 23
|
Thanks for your help. Much appreciated
|
|