This is a migrated thread and some comments may be shown as answers.
Graying out a row conditionally on a model item value
1 Answer 49 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
James
Top achievements
Rank 1
James asked on 14 Nov 2010, 01:51 AM
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

1 Answer, 1 is accepted

Sort by
0
James
Top achievements
Rank 1
answered on 14 Nov 2010, 03:53 AM
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
Tags
Grid
Asked by
James
Top achievements
Rank 1
Answers by
James
Top achievements
Rank 1
Share this question
or