How to conditionally format a grid cell?

[Brandix]

Hi,

I want to change the background color of a cell based on the value of adjecent cell. For example, change color of actual value cell based on the estimated value. How do I go about this? Do row templates support condition checking?

Apppreciate any help.
Thanks in advance

[Paul]

Hi,
Me too please. I used to handle this in the RowDataBound event with script as straightforward as:

<script type="text/javascript">

    function Grid_onRowDataBound(e) {

        var row = e.row;

        var dataItem = e.dataItem;

 

        if (dataItem.MyFieldValue == 2) { row.cells[3].bgColor = "#FFC0CB"; }

        if (dataItem.MyFieldValue == 1) { row.cells[3].bgColor = "#FFFACD"; }

        if (dataItem.MyFieldValue == 0) { row.cells[3].bgColor = "#90EE90"; }

    }

</script>

What now?
Thanks in advance.

[Chris]

Same.  Trying to convert some of our applications from Telerik and this seems to be gone.

(Edit)Looks like this is the answer.  Doesn't seem as clean.

http://www.kendoui.com/forums/ui/grid/styling-individual-cells-of-grid-with-a-template.aspx

[tony]

Yes this is a very popular question as i am having the same problem.

my scenario is that i would like to place a graphic or a character (large colored dot) in the cell based upon its value. eg if data field is 0, then display a green dot. the data is coming from a json call to a stored procedure with fields bound to a grid.

i am currently creating a row template with a style class defined using something like this

<script type="text/javascript">

 $("td")

 .filter

 (

   function()

   {

       return $(this).text() == "0" ;

   }

 )

 .addClass("highlight");

 

 

</script>

i am sure this approach is more convoluted than necessary and in any event it's not working - probably due to my own ignorance of structuring the code.

Chris' link provided a much cleaner solution....btw, row templates seem to override styling set in the databound event. Thank you Chris!!!

[Atanas Korchev]

Hi,

 The documentation about this can be found here: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/faq#how-do-i-customize-the-way-a-property-is-displayed-in-a-grid-bound-column? 

Regards,
Atanas Korchev
the Telerik team

[Brandix]

Thank you all for your help!!!

[steve]

Thanks Atanas for showing us that the real documentation is hidden in the FAQ.

The way it works is:

1. User has problem
2. Doco is missing
3. User asks question
4. Telerik waits until 100 people ask the same question
5. Provides response as an FAQ
6. Goes on holiday
7. Releases new product
8. Takes another holiday
9. Writes doco by post-processing last-years FAQ

Great way to work.

[Brandon]

Hi Steve,

Thanks for your feedback, and I'm sorry to hear that you're frustrated with the documentation. We've done a lot over the last several months to drastically improve our documentation experience (both for our users and for our documentation authors), but we also know that we can always do more to improve the volume of our content, as well as its organization.

In fairness, I would like to point out that the specific item the customer was looking for was, in fact, in the docs, and not buried in a faq that lives outside of our documentation repository. Even still, I know that "just because it's there" doesn't always mean that a doc or docs are in the right place or intuitively findable by our customers.

Along those lines, we are trying to be very open about our documentation process, and all of our docs can be found in a public, MIT-licensed GitHub repo (http://github.com/telerik/kendo-docs). In addition to making the docs public via this repo, we gladly accept both Issue reports and pull requests. So if you ever have an issue with something being missing, or you feel that key information is in the wrong place, please feel free to create an issue and let us know what way.

Have a great weekend! 
Brandon
the Telerik team

[Chris]

Is there any way to get this to work in a Client Template Grid?

I have tried

columns.Bound(p => p.Enabled).ClientTemplate(

"<input type='checkbox' value='#= ProductID #' " +

"# if (Enabled) { #" +

"checked='checked'" +

"# } #" +

"/>"

);

and

// -- removed for brevity

 columns.Bound(p => p.ProductID).ClientTemplate("#= productDetails(data) #");

 // -- removed for brevity

 

<script>

function productDetails(product) {

    var action = '@Url.Action("ProductDetails", "Product")';

 

    var html = kendo.format("<a href='{0}/{1}'>Show Product Details</a>",

        action,

        product.ProductID

    );

 

    return html;

}

</script>

Looks like it's only called once when the row expands.

Thanks for any help.

[Chris]

Might have found a cleaner way, at least more like the old Telerik way.  Found some of this code in the Migrating From Telerik Documentation (at the bottom).  I was unable to get this.View() in the documentation to work, but what i changed seems too...Sure it can be written better, but this seems cleaner to me.

This checks a checkbox based on the property Selected(from the model) and adds a class to the 4th td based on the property Available.

function OnDataBound() 

{ 

    var data = this._data; 

    for(var x = 0; x< data.length; x++) 

    { 

        var dataItem = data[x]; 

        var tr = $("#Resources").find("[data-uid='" + dataItem.uid + "']"); 

        if (dataItem.Selected) 

        { 

            $("input:first", tr).attr("checked", "checked"); 

        }
 

        var cell = $("td:nth-child(4)", tr); 

        if (dataItem.Available) 

        { 

            cell.addClass("correct"); 

        } 

        else

        { 

            cell.addClass("error"); 

        } 

    } 

}

[Brandix]

According to their reply to my support ticket, it's possible by using column templates. Well, they should improve their documentation to clearly showcase these common scenarios. 

columns.Bound(p=> p.Price).Template(@<text>

    @if (item.Price < item.Total)

    {

        <div style="background-color: Red;">

            @item.Price

        </div>

    } else

    {

        <div style="background-color: Green;">

            @item.Price

        </div>              

    }          

</text>)

[Ken Lewis]

Brandix,

Thank you for your solution, it was exactly what I was looking for.

Ken

[quote]Brandix said:According to their reply to my support ticket, it's possible by using column templates. Well, they should improve their documentation to clearly showcase these common scenarios. 

columns.Bound(p=> p.Price).Template(@<text>

    @if (item.Price < item.Total)

    {

        <div style="background-color: Red;">

            @item.Price

        </div>

    } else

    {

        <div style="background-color: Green;">

            @item.Price

        </div>              

    }          

</text>)

[/quote]

[Atanas Korchev]

Hello Chris,

 The client template works only if your grid is ajax-bound. Make sure this is the case. Other than that your code looks correct.

Regards,
Atanas Korchev
the Telerik team

[Chris]

Both grids are ajax.  I still couldn't get it to work, so i went with the DataBound event.  Thanks for the reply.

[Atanas Korchev]

Hello Chris,

 Could you provide the complete declaration of your Grid? I suspect the grid is initially bound server-side:

@(Html.Kendo().Grid(Model)
)

This link may be helpful: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/troubleshooting#a-column-template-is-not-displayed

Regards,
Atanas Korchev
the Telerik team

[Chris]

Attached.  Thanks.

[Atanas Korchev]

Hello Chris,

 Thank you for providing a sample. It helped reproducing your problem.

 You need to escape the "#" in the child grid template otherwise it is executed in the context of the parent row:

columns.Bound(e => e.ExperienceId).ClientTemplate("\\#= productDetails(data) \\#");

Find attached the updated project.

Greetings,
Atanas Korchev
the Telerik team

[Chris]

Thanks.  That helps...I actually thought i had tried that, but maybe it was with:

columns.Bound(p => p.Enabled).ClientTemplate(

"<inputtype='checkbox'value='#= ProductID #'" +

"# if (Enabled) { #" +

"checked='checked'" +

"# } #" +

"/>"

);

Would you be willing to provide an example of how to escape that?  Is it just \\ in front of every #? Thanks.

[Atanas Korchev]

Hello Chris,

 I provided an example in my previous reply. I modified your project. Yes - you need to put a "\\" in front of every # used in a template of a detail grid. 

Regards,
Atanas Korchev
the Telerik team

[Chris]

I meant how to escape the if statement in the code i pasted.  No problem, i'll give it a try with the \\.  Thanks for your help.

[Mark]

Atanas, what if I am using the JS/client side controls and not the MVC wrappers?  Thanks

[Atanas Korchev]

Hello Mark,

Then you should use the column.template option.

Regards,
Atanas Korchev
Telerik

 

 

[Abid]

hi Atanas,

i am using Telerik grid. can you please modify this sample of parient/child grids?

can you add a dropdown in child grid and add ADD NEW button feature in it. 

[Konstantin Dikov]

Hi Abid,

Could you please open a regular support ticket with your question, because the question in this forum thread is not related with hierarchical Grid editing. Thank you for your understanding. 


Regards,
Konstantin Dikov
Progress Telerik