[Solved] MVC Grid Lost its HTML attributes when it's Used With Ajax

[Saadat]

I am using Mvc telerik Grid and using Ajax with paging.  (.RowAction) I set the value of its id through HTML Attributes. My problem is when i press [Page 2] Link on the buttom of the Grid, it goes back to controller and brings back new new for that page but somehow i lost HTML ID attribute in this process. If i see the source code of my page the <tr> does not have any id.

This works fine if i dont use Ajax.

Please Help me. I am pasting my View's Source code below.


@{Html.Telerik().Grid(Model)

.Name(

"Grid")

 .Pageable(paging =>paging.PageSize(10))

 

 .Columns(columns =>

 {

 columns.Bound(o => o.Name);

 columns.Bound(o => o.CarrierId);

 })

.Pageable(paging => paging.PageSize(10).Style(

 GridPagerStyles.NextPreviousAndNumeric).Position(GridPagerPosition.Bottom))

 .DataBinding(dataBinding => dataBinding.Ajax().Select(

 

"_Index", "Home"))

 .CellAction(cell =>

 

 {

if (cell.Column.Member == "Name"){

 

 cell.HtmlAttributes[

"id"] = cell.DataItem.CarrierId;

 }

 

})

.RowAction(row=>

{

 row.HtmlAttributes[

"id"] = row.DataItem.CarrierId;

}

 

)

.Render();

}

[Petur Subev]

Hello Saadat,

Basically when using Ajax binding for the Grid you need to handle the OnRowDataBound client event and execute your logic.
e.g.
C#: 

Html.Telerik().Grid(Model)
     .Name("Grid")
//...
    .ClientEvents(events=>events.OnRowDataBound("onRowDataBound"))

JavaScript: 

function onRowDataBound(e){
    $(e.row).attr('id',e.dataItem.CarrierId);
}

Also instead of the CellAction method you can set a client template instead
e.g. 

columns.Bound(o => o.Name).ClientTemplate("<div id='cell<#= CarrierId#>'></div>");

Please notice I use cell as prefix to the ID attribute to avoid duplicate IDs on the same page (rows would have the same ID as the cells).
I hope this helps. 


Kind regards,
Petur Subev
the Telerik team