選択されたハイライト選択されたTELERIK MVC GRIDの行テキストBOLD

Question

私は、 "選択"、 "編集"として列を持っているTelerik MVCグリッドを持っています。私はFormatプロパティを使ってActionMethodsへのリンクを表示しています。ここで、「選択」/「編集」リンクをクリックしたときに、選択した行テキストを太字で表示しますか？

JQuery/Javascriptを使用してこれを達成する方法は？ RowActionを使ってみましたが、FormatプロパティとAjax.ActionLinkを使用してActionLinkを選択して編集しているので、これを整理できませんでした。

<% 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プロパティを使用すると、選択した行が強調表示されています（選択した行の新しい背景色が自分の要件を満たしていません）。私にもう1つの要件があることに加えて、私はツールバーの背景色をグレーに変更したい。

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