Question

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 rows) 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!

Answer 1

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.