How to strikethrough the text in grid

4 posts, 0 answers
  1. Joe
    Joe avatar
    57 posts
    Member since:
    Mar 2013

    Posted 03 Sep 2013 Link to this post

    is it possible to strikethrough the text in the grid ?

    For example, in the Staff name column, i want to strikethrough the staff name who had left the company (see capture screen).

    Thanks.

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 03 Sep 2013 Link to this post

    Hi Joe,

    Please try the following code snippet to strike through a cell of a column.

    C#:
    protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
       {
           if (e.Item is GridDataItem)
           {
               GridDataItem item = (GridDataItem)e.Item;
               string val = item.GetDataKeyValue("ID").ToString();//Access the DataKeyValue       
               TableCell cell = item["StaffName"];//Access cell value of Column that you want to strike
              //Your Condition goes here
               {
                 cell.CssClass = "text";               
               }
           }
       }

    CSS:
    <style type="text/css">
           .text
           {
            text-decoration: line-through;
           }
       </style>

    Thanks,
    Princy
  3. Attila
    Attila avatar
    22 posts
    Member since:
    Oct 2016

    Posted 02 Feb 2018 in reply to Princy Link to this post

    Hi!

    How can I solve this with JavaScript in the function of onDataBound?

    Thanks

  4. Attila Antal
    Admin
    Attila Antal avatar
    303 posts

    Posted 07 Feb 2018 Link to this post

    Hi Attila,

    The DataBound event is slightly different on client-side as it only fires once. Within the event handler, you can get a reference to the data items collection of the master table, iterate though each item, access the desired cell and assign a CSS class to it.

    Markup
    <telerik:RadGrid ...>
        <ClientSettings>
            <ClientEvents OnDataBound="onDataBound" />
        </ClientSettings>
    </telerik:RadGrid>

    JavaScript
    <script type="text/javascript">
        function onDataBound(sender, args) {
            var dataItems = sender.get_masterTableView().get_dataItems()
            for (var i = 0; i < dataItems.length; i++) {
                dataItems[i].get_cell("ShipName").classList.add("text");
            }
        }
    </script>

    CSS
    <style type="text/css">
        .text {
            text-decoration: line-through;
        }
    </style>

    Attached you can find a basic sample demonstrating this scenario.

    Please give the suggestion from above a try and see if that works for you.

    Kind Regards,
    Attila Antal
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top