RowAction styles lost while sorting Telerik extension grid

Question

I am using Grid control from Telerik Extensions for ASP.NET MVC. I have loaded the grid in the partial view using Ajax binding. When I sort the grid columns, the styles specified in RowAction are lost.

 @(Html.Telerik().Grid<MySite.DTO.CaseDto>(Model.Cases)
                .Name("CasesGrid")
                .HtmlAttributes(new { style = "width: 1000px;" })
                .DataBinding(dataBinding => dataBinding.Ajax()            
                    .OperationMode(GridOperationMode.Client)         
                    .Select("DI_UrgentCases_AjaxRead", "Dashboard")
                )

I am using RowAction to highlight certain rows based on the values of the particular cell.

    .RowAction(row =>
                         {
                             if (row.DataItem.IsUrgent)
                             {
                                 row.HtmlAttributes["style"] = "background:#FFBABA";
                             } 
                         })

I tried the suggestion given in http://www.telerik.com/forums/ajax-binding-and-rowaction-conflict- but it did not work. I tried rebinding the grid on client side, but when I do that, the sorted grid appears in the new page instead of within the partial view.

Please help!

Answer 1

Finally, I found a solution to my issue. My problem was that every time I sorted the grid, all the rendering and events bindings were lost. Every time the grid was rebind using ajax binding, it only returned the data and loaded in the grid. To retain any css styles and event binding, I had to apply the css again and rebind the events after the data was bound to the grid.

Telerik extension provides a client event called "OnDataBound" which is called when the grid is data bound via ajax or web-service. (Reference: Client Events for Telerik Extensions Grid

   @(Html.Telerik().Grid<MySite.DAL.DTO.UserDto>(Model.Users)
                .Name("MyUsersGrid")                   
                .ClientEvents( events =>   events.OnDataBound("grid_OnDataBound"))

function grid_OnDataBound(e) { code for rebind, apply css...}

Then in function grid_OnDataBound(), we can define the code to rebind events and apply css when this event is raised on data bound.