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

Change text color on condition (client-side)

4 Answers 1001 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Stefania
Top achievements
Rank 2
Stefania asked on 21 Jul 2014, 03:19 PM
Hi,
How can I change in js the css or the text color of my cell based on it's content?
The grid is populated by ClientDataSource so I can't change the color on server-side (I think)

This is my column
<telerik:GridBoundColumn UniqueName="GPS" DataField="GpsTxt" HeaderText="GPS" AllowFiltering="false"
                           ItemStyle-HorizontalAlign="Center">
                           <ItemStyle Font-Bold="true" />
                       </telerik:GridBoundColumn>

The DataField "GpsTxt"  value can be "OK" or "ERR"
I would like to show "OK" in green and "ERR" in red

Is it possible?
Thanks

4 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 22 Jul 2014, 05:55 AM
Hi Stefania,

Try the below JavaScript code snippet to achieve your scenario.

JavaScript:
function pageLoad() {
    var grdOrders = $find("<%=rgridOrders.ClientID%>");
    var masterTable = grdOrders.get_masterTableView();
    var dataItems = masterTable.get_dataItems();
    var index, dataItem, cellText;
    for (index = 0; index < dataItems.length; index++) {
        dataItem = dataItems[index];
        cellText = dataItem.get_cell("GpsTxt").textContent;
        if (cellText == "OK") {
            dataItem.get_cell("GpsTxt").style.color = "Green";
        }
        else if (cellText == "ERR") {
            dataItem.get_cell("GpsTxt").style.color = "Red";
        }
    }
}

Thanks,
Shinu.
0
Accepted
Jayesh Goyani
Top achievements
Rank 2
answered on 22 Jul 2014, 07:00 AM
Hi,

Please try with the below code snippet.

function RowDataBound(sender, args) {
    if (args.get_cell("GpsTxt").textContent == "OK") {
        dataItem.get_cell("GpsTxt").style.color = "Green";
    }
    else {
        dataItem.get_cell("GpsTxt").style.color = "Red";
    }
}
<clientsettings>
   <ClientEvents OnRowDataBound="RowDataBound" />
</clientsettings>

As you have used client side binding so  above code is also works.

Thanks,
Jayesh Goyani
0
Stefania
Top achievements
Rank 2
answered on 22 Jul 2014, 08:33 AM
Hi Jayesh,
thanks!
I change it a little bit and it works perfectly

I had an error with args.get_cell so I change it with args.get_item().get_cell(...

function RowDataBound(sender, args) {
              var item = args.get_item();
              if (item.get_cell("GPS").textContent == "OK") {
                  item.get_cell("GPS").style.color = "Green";
              }
0
Jayesh Goyani
Top achievements
Rank 2
answered on 22 Jul 2014, 09:22 AM
HI Stefania,

Thanks for correction.

Thanks,
Jayesh Goyani
Tags
Grid
Asked by
Stefania
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 2
Jayesh Goyani
Top achievements
Rank 2
Stefania
Top achievements
Rank 2
Share this question
or