Highlight selected TELERIK MVC GRID row text in BOLD

I have a Telerik MVC Grid where I have a column as " select " , " edit" forwhich I have used Format Property to show Links to my ActionMethods . Now I want to show the selected 开发者_如何学编程Row text in Bold when someone clicks on " Select" / " Edit " link ?

How to achieve this using JQuery / Javascript ? Tried using RowAction but couldnt sort out this as I am using Format Property and Ajax.ActionLink for Select and Edit ActionLinks.

    <% Html.Telerik().Grid(Model.GetLegends)
                    .Name("PaymentScheduleLegendGrid")

                    .ToolBar(toolBar => toolBar.Template(() =>
                                  { 
                            %>
                                 <label style="height:10px; float:left;padding-right:230px;" >Legend</label>

                                  <%= Ajax.ActionLink("Add", "AddLegend", "PaymentSchedule", new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "addlegend", HttpMethod = "Get" }, new { Style="text-decoration:underline;" })%>

                                 <% 
                        })).HtmlAttributes("style='background:none grey'")
                    .DataKeys(dataKeys => dataKeys.Add(m => m.LegendId))                        
                    .Columns(columns =>
                        {

                           // columns.Bound(m => m.Legend_color).ClientTemplate("<div><div style='float:right;text-align:left;width:80%'><#= legend_name #></div>" + "<div style='padding:3px;background-color:<#= legend_color #>;width:20px;height:15px'></div></div>").Title("Legend");
                            columns.Bound(m => m.LegendColor).Format(Html.ColorBlock("{0}").ToHtmlString()).Encoded(false).Title("");
                            columns.Bound(m => m.LegendId).Hidden(true).HeaderHtmlAttributes(new { @class = "newBack" }); ;
                            columns.Bound(m => m.LegendName).Title("");
                            columns.Bound(m => m.LegendId).Title("").Format(Ajax.ActionLink("Select", "Select", "PaymentSchedule", new { Id = "{0}" }, new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "AddPaymentSchedule", HttpMethod = "Get" }, new { Style = "text-decoration:underline;" }).ToHtmlString().Replace("{", "{{").Replace("}", "}}")).Encoded(false).Width(60);
                            columns.Bound(m => m.LegendId).Title("").Format(Ajax.ActionLink("Edit", "EditLegend", "PaymentSchedule", new { Id = "{0}" }, new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "addlegend", HttpMethod = "Get" }, new { Style = "text-decoration:underline;" }).ToHtmlString().Replace("{", "{{").Replace("}", "}}")).Encoded(false).Width(60);                             
                        })
                     //   .RowAction(row => row.Selected = row.HtmlAttributes.Add("style", "background:#321211;"))
                        .Sortable()
                        .Selectable().HtmlAttributes("style=font:bold")
                        .DataBinding(databinding => databinding
                        .Ajax().Select("AjaxIndex", "Legend"))
                        .Pageable(pager => pager.PageSize(5))
                        .Render();                 
 %>         

This is my code and When user clicks on Select / Edit ActionLink ... Selected LegendName should be highlighted in bold . When I use Selectable property I am getting the selected row as highlighted ( new Background color for selected row which doesnt satisfy my requirement). Besides that I have one more requirement , I want to change the background color of my toolbar to GREY . Can you please help me

In order to apply certain style for certain table row you need to use CSS. For server side binding you can use the HtmlAttributes from RowAction. However I don't know (as you haven't described) how to determine if a row is selected inside the RowAction method. If you want a more concrete answer I suggest you attach a running project which shows the entire scenario in the forum thread which you opened in the Telerik forums.

If you want to do that client-side you can use jQuery:

<%: Html.Telerik().Grid().ClientEvents(e => e.OnLoad("onLoad")) %>

<script>
function onLoad() {
   $(this).delegate("tr a", "click", function(e){
       $(this).closest("tr").addClass("t-state-selected") // add the css class
                            .siblings()
                            .removeClass("t-state-selected") // remove css class from other rows
   });
}
</script>

    So far I have done this .

<style type="text/css"> 
#PaymentScheduleLegendGrid table thead 
{ 

}
.newBack
{
background:none grey;
}
.newBoldtext
{
 font-weight:bold;
 color:red;
 }
 </style>
<script type="text/javascript">
   function onLoad() {

    $(this).delegate("tr a", "click", function (e) {
        $(this).closest("tr").addClass("newBoldtext"); // or any other CSS class
    });
   }
</script>

<div>
 <% Html.Telerik().Grid(Model.GetLegends)
                    .Name("PaymentScheduleLegendGrid")                       
                    .ToolBar(toolBar => toolBar.Template(() =>
                                  { 
                            %>
                                 <label style="height:10px; float:left;padding-right:230px;" >Legend</label>

                                  <%= Ajax.ActionLink("Add", "AddLegend", "PaymentSchedule", new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "addlegend", HttpMethod = "Get" }, new { Style="text-decoration:underline;" })%>

                                 <% 
                        })).HtmlAttributes("style='background:none grey'")
                    .DataKeys(dataKeys => dataKeys.Add(m => m.LegendId))
                      .ClientEvents(e => e.OnLoad("onLoad"))                      
                    .Columns(columns =>
                        {


                            columns.Bound(m => m.LegendColor).Format(Html.ColorBlock("{0}").ToHtmlString()).Encoded(false).Title("");
                            columns.Bound(m => m.LegendId).Hidden(true).HeaderHtmlAttributes(new { @class = "newBack" }); ;
                            columns.Bound(m => m.LegendName).Title("test");

                            columns.Bound(m => m.LegendId).Title("")
                                .Format(Ajax.ActionLink("Select", "Select", "PaymentSchedule",
                                                         new { Id = "{0}"}
                                                        , new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "AddPaymentSchedule", HttpMethod = "Get" }
                                                        , new { name = "SelectRow", Style = "text-decoration:underline;" }

                                                         ).ToHtmlString().Replace("{", "{{").Replace("}", "}}")).Encoded(false).Width(60);

                            columns.Bound(m => m.LegendId).Title("").Format(Ajax.ActionLink("Edit", "EditLegend", "PaymentSchedule", new { Id = "{0}" }, new AjaxOptions { OnSuccess = "updateTarget", UpdateTargetId = "addlegend", HttpMethod = "Get" }, new { Style = "text-decoration:underline;" }).ToHtmlString().Replace("{", "{{").Replace("}", "}}")).Encoded(false).Width(60);                             
                        })

                        .Sortable()
                        .Selectable().HtmlAttributes("style=font:bold")
                        .DataBinding(databinding => databinding
                        .Ajax().Select("AjaxIndex", "Legend"))
                        .Pageable(pager => pager.PageSize(10))
                        .Render();                 
 %>