Is it possible to have more than one background color in a radgrid cell? - i.e. can the cell painting method be overridden?
The colors that might need to be used and the percentage of the cell width that each color would occupy would vary from cell to cell, so I can't use CSS to control it.
Thanks
The colors that might need to be used and the percentage of the cell width that each color would occupy would vary from cell to cell, so I can't use CSS to control it.
Thanks
5 Answers, 1 is accepted
0

Shinu
Top achievements
Rank 2
answered on 23 Apr 2014, 08:33 AM
Hi Mark,
Please try the following JavaScript to give more than one background color in a RadGrid cell.
JavaScript:
Let me know if you have any concern.
Thanks,
Shinu.
Please try the following JavaScript to give more than one background color in a RadGrid cell.
JavaScript:
<script type=
"text/javascript"
>
function
pageLoad() {
var
OrderGrid = $find(
"<%=radgrdOrders.ClientID %>"
);
var
MasterTable = OrderGrid.get_masterTableView();
var
DataRows = MasterTable.get_dataItems();
for
(
var
i = 0; i < DataRows.length; i++) {
var
row = DataRows[i];
//accessing each cell by unique name
var
OrderIDcell = MasterTable.getCellByColumnUniqueName(row,
"OrderID"
);
//changing background color
OrderIDcell.bgColor =
"gray"
;
var
CustomerIDcell = MasterTable.getCellByColumnUniqueName(row,
"CustomerID"
);
CustomerIDcell.bgColor =
"green"
;
}
}
</script>
Let me know if you have any concern.
Thanks,
Shinu.
0

Mark
Top achievements
Rank 1
answered on 23 Apr 2014, 08:42 AM
Hi Shinu
Thanks for the reply.
I am unsure of the code you have sent me. That suggests that the OrderID cell will be coloured in gray and the CustomerID cell will be coloured in green. Isn't that just one colour per cell, rather than what I want might be 50% of a cell will be coloured in blue and the other 50% of the cell in purple (as an example). I don't think your code allows for more than one background colour in one cell.
Any further suggestions you could offer?
Regards
Mark
Thanks for the reply.
I am unsure of the code you have sent me. That suggests that the OrderID cell will be coloured in gray and the CustomerID cell will be coloured in green. Isn't that just one colour per cell, rather than what I want might be 50% of a cell will be coloured in blue and the other 50% of the cell in purple (as an example). I don't think your code allows for more than one background colour in one cell.
Any further suggestions you could offer?
Regards
Mark
0
Hello Mark,
Since the RadGrid cells are TD elements, it is not possible to have two colors for the background.
However, for your requirement you could set one color as the background color for the cell and place a DIV element within the cell with different color and a width corresponding to the percentage value.
For your convenience I have prepared a sample page with such result.
Hope the result meets your exact requirements.
Regards,
Konstantin Dikov
Telerik
Since the RadGrid cells are TD elements, it is not possible to have two colors for the background.
However, for your requirement you could set one color as the background color for the cell and place a DIV element within the cell with different color and a width corresponding to the percentage value.
For your convenience I have prepared a sample page with such result.
Hope the result meets your exact requirements.
Regards,
Konstantin Dikov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0

Shinu
Top achievements
Rank 2
answered on 24 Apr 2014, 12:51 PM
Hi Mark,
As far as i know it is not possible to five different background color for a single cell. As a suggestion you can set a background image for a cell as follows.
JavaScript:
Thanks,
Shinu.
As far as i know it is not possible to five different background color for a single cell. As a suggestion you can set a background image for a cell as follows.
JavaScript:
...
var
OrderIDcell = MasterTable.getCellByColumnUniqueName(row,
"OrderID"
);
OrderIDcell.style.backgroundImage =
"url('backgroundimage.jpeg')"
;
...
Thanks,
Shinu.
0

Shinu
Top achievements
Rank 2
answered on 24 Apr 2014, 01:02 PM
Hi Mark,
As a work around you can try the following CSS which works fine at my end.
CSS:
Thanks,
Shinu.
As a work around you can try the following CSS which works fine at my end.
CSS:
.RadGrid_Default .rgRow td, .RadGrid_Default .rgAltRow td
{
background-color : Red
!important
;
border-
right
:
400px
solid
green
!important
;
}
Thanks,
Shinu.