突出顯示所選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();     
%>