We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to strikethrough all the text in a row?

Thread ID:

Created:

Updated:

Platform:

Replies:

142897 Feb 25,2019 11:50 AM UTC Feb 26,2019 08:39 AM UTC ASP.NET MVC 3
loading
Tags: Grid
kalum
Asked On February 25, 2019 11:50 AM UTC

Hi,

I have a requirement to strikethrough all the text in a perticular grid row when a cell button is clicked in the same row. Is there a way to achive this?

Thank you
Kalum


Vignesh Natarajan [Syncfusion]
Replied On February 26, 2019 04:52 AM UTC

Hi Kalum, 
 
Thanks for using Syncfusion support.  
 
Query: “I have a requirement to strikethrough all the text in a perticular grid row when a cell button is clicked in the same row.” 
 
From your query, we understand that you need to strike the text inside the cell on the button click of the corresponding row. We have achieved your requirement by adding the css class “text-decoration”.  
 
Refer the below code example 
 
@(Html.EJ().Grid<EmployeeView>("CustomGrid") 
            .Datasource((IEnumerable<object>)ViewBag.datasource) 
            .EnableRowHover(false) 
            .AllowSelection(false) 
            .Columns(col => 
            { 
                col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(100).Add(); 
                col.Field("FirstName").HeaderText("First Name").Width(100).Add(); 
                col.Field("LastName").HeaderText("Last Name").Width(100).Add(); 
                col.Field("HireDate").HeaderText("Hire Date").TextAlign(TextAlign.Right).Width(100).Format("{0:MM/dd/yyyy}").Add(); 
                col.Field("Country").Width(100).HeaderText("Country").Add(); 
                col.HeaderText("Employee Details").Commands(command => 
                { 
                    command.Type("detail") 
                           .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties() 
                           { 
                               Text = "Details", 
                               Width = "100px", 
                               Click = "onClick" 
                           }).Add(); 
                }) 
                .IsUnbound(true) 
                .TextAlign(TextAlign.Left) 
                .Width(150) 
                .Add(); 
            }) 
) 
 
 
……………………………… 
<script type="text/javascript"> 
    function onClick(args) { 
        $(args.target.closest("tr")).find("td").css("text-decoration", "line-through"); // to strike the text inside the td element 
    } 
</script>  
//To remove the strike use below css 
$(args.target.closest("tr")).find("td").css("text-decoration", "none "); 
 
 
 
Refer the below screenshot for the output 
 
 
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan 
 


kalum
Replied On February 26, 2019 08:31 AM UTC

Hi Vignesh,
That solved my problem. Thank you very much.
Best regards,
Kalum

Vignesh Natarajan [Syncfusion]
Replied On February 26, 2019 08:39 AM UTC

Hi Kalum, 

Thanks for the update.  

We are glad to hear that your query has been resolved by our solution.  

Please get back to us if you have further queries. 

Regards, 
Vignesh Natarajan. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon