Style a single row in a Telerik MVC Grid - Client Side

I am trying to style only one row (from the client) of a Grid.

Here is my setup: I am using Ajax binding to load the initial Grid data. After that, I am editing all data from the Client side based on events from other controls. So, a user may click some other control which causes a row to be "highlighted" on my Gird (without ever actually touching the grid).

I did some inspecting (with firebug) and see that the in the table that gets created does not have an ID or a class (except the alternating row开发者_C百科s) so I don't see a way to access that element. I would like to use jQuery and call the .addClass() and .removeClass() methods on the rows, but I don't quite know how to access them. At this point I will take any solution ... so, is this something that is possible?

Thanks in advance for any help!

I ended up using the .ClientTemplate() to add a to a hidden element, then found the row it belongs to by finding the row's parent().parent().

Grid Razor:

@(Html.Telerik().Grid<Multimedia.Web.Models.GroupModel>()
    .Name("group-grid")
    .DataBinding(dataBinding => dataBinding.Ajax().Select("_GroupGridAjaxBinding", "TelerikControls"))

    .Columns(columns =>
    {
        columns.Bound(o => o.GroupNumber).Width("30%");
        columns.Bound(o => o.GroupName).Width("80%").Title("Name");
        columns.Bound(o => o.GroupNumber).Hidden(true).ClientTemplate("<div id='group-row-<#= GroupNumber#>'></div>"); //i will find this <td> by the <div> id
    })

   .Scrollable(scrolling => scrolling.Enabled(true))
   .Sortable(sorting => sorting.Enabled(true))
   .Pageable(paging => paging.Enabled(false))
   .Filterable(filtering => filtering.Enabled(false))
   .Groupable(grouping => grouping.Enabled(false))
   .Footer(false)
)

And then, in my JavaScript, I was able to access the table row using the following jQuery:

var groupNum = getGroupNumSomehow();
$('#group-row-' + groupNum).parent().parent().addClass('highlight');

And it worked!

You could always use the client-side row template and re-bind the grid when these external actions occur. Here's Telerik's example of the client-side row template to be used when doing ajax binding:

<%= Html.Telerik().Grid<Customer>()
   .Name("Grid")
   .DataBinding(dataBinding => dataBinding.Ajax().Select("Action", "Controller"))
   .Columns(columns =>
   {
       columns.Bound(c => c.CustomerID);
       columns.Bound(c => c.ContactName);
       columns.Bound(c => c.Country);
   })
   .ClientRowTemplate(grid => "<ul>" +
           "<li>CustomerID: <#= CustomerID #></li>" +
           "<li>Contact Name: <#= ContactName #></li>" +
           "<li>Country: <#= Country #></li>" +
        "</ul>" 
   )
%>

This might allow you to inject information into each row you can use to highlight.

More documentation about it on Telerik's site.