[Solved] Graying out a row conditionally on a model item value

[James]

What's the easiest way to conditionally gray out a row based on a property on the instance the row is being bound to?  

I see that you can specify HtmlAttributes at the column level or at the table level, but it doesn't appear possible at the row level, and I am not sure if that would work anyway, b/c the other htmlAttributes properties don't take a lambda, so I wouldn't be able to dynamically add the attribute based on a proprety...

I was thinking maybe I could use the .Format() method for each column, and apply a css class for each cell, but I am not sure that I can arbitrarily access any property; only the property being bound to can be accessed as far as I can tell.

So that leaves Template columms... I haven't tried that.  I don't think I can do template columns with the Razor syntax, which means I would have to resort to an ASPX view...

My grid right now is fairly simple with a minimal amount of code... It seams that there is no way to easily add a CSS class conditionally on a row level basis w/o completely redoing what would otherwise be a simple grid binding scenario:

@(

    

    //Company search results

    Html.Telerik().Grid<ContactView>()

        .Name("Contacts")

        .DataBinding(dataBinding =>

                        dataBinding.Ajax().Select("ContactsForGrid", "CompanyEdit", new { companyId = Model.CompanyId })

            )

        .Columns(col =>

            {

                col.Bound(c => c.Name);

                col.Bound(c => c.Title);

                col.Bound(c => c.Email).Encoded(false).Format("<a href='mailto:{0}'>{0}</a>");

                col.Bound(c => c.PhoneNumber);

                col.Bound(c => c.ContactId).Encoded(false).Title("")

                    .Format("<a href='#' onclick='loadContactDetails({0});return false;'>View</a>");

            })

        .Pageable()

        .Sortable()

    )

What approach would you take?

Thanks,
James Foster

[James]

I ended up solving the problem with a client-side event, OnRowDataBound:

    @(

    

    //Company search results

    Html.Telerik().Grid<ContactView>()

        .Name("Contacts")

        .HtmlAttributes(new { id = "divContactsTable" })

        .DataBinding(dataBinding =>

                        dataBinding.Ajax().Select("ContactsForGrid", "CompanyEdit", new { companyId = Model.CompanyId }))

        .ClientEvents(ce => 

            {

                ce.OnRowDataBound("onContactsRowDataBound");

            })

        .Columns(col =>

            {

                col.Bound(c => c.Name);

                col.Bound(c => c.Title);

                col.Bound(c => c.Email).Encoded(false).Format("<a href='mailto:{0}'>{0}</a>");

                col.Bound(c => c.PhoneNumber);

                col.Bound(c => c.ContactId).Encoded(false).Title("")

                    .Format("<a href='#' onclick='loadContactDetails({0});return false;'>View</a>");

            })

        .Pageable()

        .Sortable()

    )

And then I used the following jQuery to gray out the text:

function onContactsRowDataBound(e) {

    if (e.dataItem.Grayed)

        $(e.row).find("td").addClass("grayed");

}

As you can see I am doing a jQuery find() for the td elements, I tried just adding the css class at the row level, but it would only gray out alternate rows due to an existing alt-r class on the alternate row TDs, but this works for me, problem solved.

James