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

How to strikethrough the text in grid

3 Answers 854 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 04 Sep 2013, 04:02 AM
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.

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 04 Sep 2013, 04:41 AM
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
0
Attila
Top achievements
Rank 2
answered on 02 Feb 2018, 10:44 AM

Hi!

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

Thanks

0
Attila Antal
Telerik team
answered on 07 Feb 2018, 07:57 AM
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.
Tags
Grid
Asked by
Joe
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Attila
Top achievements
Rank 2
Attila Antal
Telerik team
Share this question
or