突出显示所选TELERIK MVC网格行文本BOLD

Question

我有一个Telerik MVC网格，我有一列作为“选择”，“编辑”，我已经使用了格式属性来显示我的ActionMethods的链接。现在，当有人点击“选择”/“编辑”链接时，我想要以粗体显示选定的行文本？

如何使用JQuery/Javascript实现此目的？尝试使用RowAction，但不能解决这个问题，因为我使用格式属性和Ajax.ActionLink选择和编辑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();     
%>   

这是我的代码，并当选择/编辑ActionLink的......选择LegendName用户点击，应以粗体突出显示。当我使用Selectable属性时，我将选中的行高亮显示（所选行的新背景颜色不符合我的要求）。除此之外，我还有一个要求，我想将我的工具栏的背景颜色更改为灰色。你能帮我吗

Answer 1

为了对某些表格行应用某些样式，你需要使用CSS。对于服务器端绑定，您可以使用RowAction中的HtmlAttributes。但是我不知道（因为你没有描述过）如何确定RowAction方法内是否选择了一行。如果你想得到更具体的答案，我建议你附上一个正在运行的项目，在Telerik论坛中打开的论坛主题中显示整个场景。

如果你想这样做的客户端，你可以使用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> 

Answer 2

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();     
%>