[Solved] Change text color on condition (client-side)

[Mattia]

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

[Shinu]

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.

[Jayesh Goyani]

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

[Mattia]

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";
              }

[Jayesh Goyani]

HI Stefania,

Thanks for correction.

Thanks,
Jayesh Goyani