Change text color on condition (client-side)

5 posts, 1 answers
  1. Stefania
    Stefania avatar
    107 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. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2732 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
  5. Stefania
    Stefania avatar
    107 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";
                  }
  6. Jayesh Goyani
    Jayesh Goyani avatar
    2732 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
UI for ASP.NET Ajax is Ready for VS 2017