How to strikethrough all the text in a row?

[kalum]

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]

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]

Hi Vignesh,

That solved my problem. Thank you very much.

Best regards,

Kalum

[Vignesh Natarajan]

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.