This is a migrated thread and some comments may be shown as answers.

RadGrid cell multiple backcolors

5 Answers 11 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 22 Apr 2014, 01:06 PM
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

5 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
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:
<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
0
Konstantin Dikov
Telerik team
answered on 24 Apr 2014, 12:26 PM
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
 

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 1
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:
...
var
OrderIDcell = MasterTable.getCellByColumnUniqueName(row, "OrderID");
OrderIDcell.style.backgroundImage = "url('backgroundimage.jpeg')";
...

Thanks,
Shinu.
0
Shinu
Top achievements
Rank 1
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:
.RadGrid_Default .rgRow td, .RadGrid_Default .rgAltRow td
{
    background-color : Red !important;
    border-right : 400px solid green !important;
}

Thanks,
Shinu.
Tags
Grid
Asked by
Mark
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or