[Solved] CellAction doesn't seem to work

[Flame Boy]

I can't seem to figure out why the CellAction method will not execute. Here is the code:

<%= Html.Telerik().Grid<TransactionViewModel>()
        .Name("Transactions")
            .Columns(col =>
            {
                col.Add(c => c.TransactionDate).Width(160);
                col.Add(c => c.TransactionType).Width(65);
                col.Add(c => c.MerchantName).Width(100);
                col.Add(c => c.Description);
                col.Add(c => c.Amount).Width(65);
                col.Add(c => c.TransactionResult).Width(70);
                col.Add(c => c.MerchantResponse).Width(70);
            })
            .CellAction(cell =>
        {
                    cell.HtmlAttributes["style"] = "display:none";
        })
        .Pageable()
        .Sortable()
        .Filterable()
        .Ajax(ajax => ajax.Action("_AjaxTransactions", "CRM", new { oid = ViewData["FirstOrder"] }))
        .BindTo((IEnumerable<TransactionViewModel>)ViewData["Transactions"])
%>

In this instance I am just trying to hide the text within the cell, but I have also tried to change the color. It doesn't matter what I put there because the code never runs!

Any ideas?

[Atanas Korchev]

Hello Flame Boy,

CellAction and RowAction work only with server-side binding because only then we output HTML. When using Ajax or WebService binding only json is transmitted so we cannot support templates, or any formatting applied to the cells.

As a workaround I can suggest using the onRowDataBound client-side event.

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Flame Boy]

Thanks for the reply. Maybe I have missed something but I can't seem to figure out the members of the "e" object passed to the OnRowDataBound function.

I have tried:

.ClientEvents(events => events
            .OnRowDataBound(() =>
                { %>
                    function(e) {
                    e.HtmlAttributes["style"] = "color:Green;";
                    // e.row.HtmlAttributes["style"] = "color:Green;";
                    // e.css = "color:Green;";
                    // e.row.css = "color:Green;";
                    }
                <%
                }))

Is there an example containing how to access the row's style client-side? Thanks!!


EDIT: I figured it out it's e.row.style.color = "Green". Javascript Debugger for Firefox rocks :)

[Nebras]

Thanks Flame Boy for your solution , it works for me

[Sun]

//We can use OnRowDataBound Event to format the Cell,
//This is a example to set RGB color for cells[4]: "CLOSE_TIME"
<script type="text/javascript">
function onRowDataBoundDetail(e) {
  var style = "";
  var redGreenStatus = "";
  var oneday = 24*60*60*1000;
  var adddates = 30*oneday; //add days
  if (e.dataItem != null) {
        var date1 = new Date(Date.parse(e.dataItem.CLOSE_TIME));
        var datenow = new Date();
        if (date1 > datenow) {
            var iCoeficient = (date1 - datenow) / adddates;
            if (iCoeficient<=1) // winthin 30 days
            {
                redGreenStatus = toHexColor(255 * (1 - iCoeficient),255 * iCoeficient, 0)
                style = "font-weight: bold; color: " + redGreenStatus;
            }
            else
            {
                redGreenStatus = "#000000";
                style = "";
            }
        }
        else {
            redGreenStatus = "#c0c0c0";
            style = "color: " + redGreenStatus;
        }
        @*pls modified the [cell number] if necessary *@
        e.row.cells[4].style.cssText = style;
    }
}
function toHexColor(r,g,b)
{
    var hex='#';
    var hexStr = '0123456789ABCDEF';
    // R
    low = r % 16;
    high = (r - low)/16;
    hex+=hexStr.charAt(high) + hexStr.charAt(low);
    // G
    low = g % 16;
    high = (g - low)/16;
    hex+=hexStr.charAt(high) + hexStr.charAt(low);
    // B
    low = b % 16;
    high = (b - low)/16;
    hex+=hexStr.charAt(high) + hexStr.charAt(low);
    return hex;
}
</script>