[Solved] rowdataboun client event help

[Uday]

hi ,
I have  a grid with server side binding. Based on certain value a cell I want to change background color and show some other value. I tried following some examples of the  

"onRowDataBound" event

in this forum but I am not able to get it working.  basically want to manipulate cell values of the grid rows, like we we do using the asp.net gridview rowdatabound event. Please help. Grid logic and rowdatabound event is attached below.

@{Html.Telerik().Grid(Model)
                           .Name("Tickets")
                           .DataKeys(dataKeys => dataKeys.Add(l => l.FSReportID))
                           .Columns(columns =>
                           {
 
                               columns.Command(commands => commands.Select()).Title("Select").HeaderHtmlAttributes(new { style = "font-size:1em; color:black; " });
                               //columns.Bound(l => l.FSReportID).Width(130);
                               columns.Bound(l => l.UnitNumberLookupText).Width(30).Title("Unit");
                               columns.Bound(l => l.SpareCol2).Title("Ticket Number");
                               columns.Bound(l => l.CANumber).Width(40);
                               columns.Bound(l => l.UnitSnapShotItems[0].TypeModel).Width(38).Title("Unit Type");
                               columns.Bound(l => l.UnitSnapShotItems[0].LeaseName);
                               columns.Bound(l => l.AreaName).Width(40);
                               columns.Bound(l => l.ServiceDate).Format("{0:dd/MM/yyyy}").HeaderHtmlAttributes(new { title = "Click here to sort" });
                               columns.Bound(l => l.SpareCol3).Title("Submit Date").Format("{0:d}").ToString().Substring(0,10);
                               //columns.Bound(l => l.ServicePerformed);
                               columns.Bound(l => l.ReportStatus);
                               columns.Bound(l => l.ReportOwnerFullname);
 
                           })
                           .ClientEvents(events => events
                           .OnRowDataBound("onRowDataBound")
                           )
                           .RowAction(row =>
                               {
                                   if (row.DataItem.ReportStatusID == 6)
                                   {
                                       //row.DataItem.ReportStatusID = 777777;
                                       row.HtmlAttributes["style"] = "background:red;";
            
                                   }
 
                                   if (row.DataItem.SpareCol3 != null || row.DataItem.SpareCol3 != "")
                                   {
                                       row.DataItem.SpareCol3 = row.DataItem.SpareCol3.Substring(0, 10);
                                      
 
                                   }
                                   
                               }
 
                            )
                            //.CellAction(cell => cell.HtmlAttributes.Add("TEST", cell.Column.Member))
                            //.CellAction(cell => cell.HtmlAttributes.Add("aaa", cell.Column.Member))
                            .Pageable()
                            .Sortable()
                            .Filterable()
                            .HtmlAttributes(new { style = "font-size: .85em; color:blue;" })
                            .RowAction(row => row.Selected = row.DataItem.FSReportID.Equals(ViewData["id"])).Render()
 
 
 
 
                            ;}

//***on rowdatabound****

function dump(obj) {
             obj = obj || {};
             var result = [];
             var resultStatus = "";
             $.each(obj, function (key, value) {
 
                 //result.push('"' + key + '":"' + value + '"');
 
                 if (key == "SpareCol3") {
                     value = "date";
                 }
 
                             });
             
             //return '{' + result.join(',') + '}';
         }
 
         function onRowDataBound(e) {
             //var dataItem = e.dataItem;
//             var grid = $(this).data("Tickets");
//             var dataItem = grid.dataItem(e.row);
//             
             //$console.log("OnRowDataBound :: " + dump(dataItem));
             
             if (e.row.cells[8].innerHTML != "") {
                 e.row.cells[8].innerHTML = e.row.cells[8].innerHTML.Substring(0, 10);
                 e.row.cells[8].forecolor = "red";
                
                 
             }

[Kenneth]

You may actually want to look at the CellAction() method that hangs off of the GridBuilder fluent API.  I've used that to alter cell style and text before:

@Html.Telerik().Grid(Model)

           .Columns(cols => /*...*/)

           .CellAction(cell =>

               {

                   if (!string.isNullOrEmpty(cell.Text))

                   {

                       cell.HtmlAttributes["style"] = "color: red;";
                                cell.Text = cell.Text.Substring(0,10);

                   }

               });