Change text color on condition (client-side)

5 posts, 1 answers
  1. Stefania
    Stefania avatar
    115 posts
    Member since:
    May 2013

    Posted 21 Jul 2014 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 Jul 2014 in reply to Stefania Link to this post

    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.
  3. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 22 Jul 2014 in reply to Shinu Link to this post

    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
  4. Stefania
    Stefania avatar
    115 posts
    Member since:
    May 2013

    Posted 22 Jul 2014 Link to this post

    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";
                  }
  5. Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 22 Jul 2014 in reply to Stefania Link to this post

    HI Stefania,

    Thanks for correction.

    Thanks,
    Jayesh Goyani
Back to Top