Highlight selected TELERIK MVC GRID row text in BOLD - model-view-controller

Question

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

Answer 1

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>

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