RadGrid cell multiple backcolors

[Mark]

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

[Shinu]

Hi Mark,

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.

[Mark]

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

[Konstantin Dikov]

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

 

 

[Shinu]

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:

...
var OrderIDcell = MasterTable.getCellByColumnUniqueName(row, "OrderID");

OrderIDcell.style.backgroundImage = "url('backgroundimage.jpeg')";
...

Thanks,
Shinu.

[Shinu]

Hi Mark,

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.