How to conditionally format a grid cell?

24 posts, 1 answers
  1. Brandix
    Brandix avatar
    3 posts
    Member since:
    Jul 2012

    Posted 07 Aug 2012 Link to this post

    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
  2. Paul
    Paul avatar
    2 posts
    Member since:
    Mar 2011

    Posted 07 Aug 2012 Link to this post

    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.
  3. Chris
    Chris avatar
    27 posts
    Member since:
    May 2010

    Posted 09 Aug 2012 Link to this post

    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
  4. tony
    tony avatar
    49 posts
    Member since:
    Nov 2006

    Posted 09 Aug 2012 Link to this post

    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!!!
  5. Chris
    Chris avatar
    27 posts
    Member since:
    May 2010

    Posted 14 Aug 2012 Link to this post

    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"); 
            
        
    }
  6. Brandix
    Brandix avatar
    3 posts
    Member since:
    Jul 2012

    Posted 20 Aug 2012 Link to this post

    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>)

  7. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 20 Aug 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Brandix
    Brandix avatar
    3 posts
    Member since:
    Jul 2012

    Posted 22 Aug 2012 Link to this post

    Thank you all for your help!!!
  9. steve
    steve avatar
    4 posts
    Member since:
    May 2011

    Posted 31 Oct 2012 Link to this post

    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.
  10. Brandon
    Admin
    Brandon avatar
    21 posts

    Posted 02 Nov 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Chris
    Chris avatar
    27 posts
    Member since:
    May 2010

    Posted 06 Feb 2013 Link to this post

    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.
  12. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 07 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Chris
    Chris avatar
    27 posts
    Member since:
    May 2010

    Posted 07 Feb 2013 Link to this post

    Both grids are ajax.  I still couldn't get it to work, so i went with the DataBound event.  Thanks for the reply.
  14. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 07 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Chris
    Chris avatar
    27 posts
    Member since:
    May 2010

    Posted 07 Feb 2013 Link to this post

    Attached.  Thanks.
  16. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 07 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  17. Chris
    Chris avatar
    27 posts
    Member since:
    May 2010

    Posted 07 Feb 2013 Link to this post

    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.

  18. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 07 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  19. Chris
    Chris avatar
    27 posts
    Member since:
    May 2010

    Posted 07 Feb 2013 Link to this post

    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.
  20. Ken Lewis
    Ken Lewis avatar
    28 posts
    Member since:
    Sep 2009

    Posted 10 Oct 2014 in reply to Brandix Link to this post

    Brandix,

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

    Ken

    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>)

  21. Mark
    Mark avatar
    21 posts
    Member since:
    Aug 2015

    Posted 07 Oct 2015 in reply to Atanas Korchev Link to this post

    Atanas, what if I am using the JS/client side controls and not the MVC wrappers?  Thanks
  22. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 12 Oct 2015 Link to this post

    Hello Mark,

    Then you should use the column.template option.

    Regards,
    Atanas Korchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  23. Abid
    Abid avatar
    3 posts
    Member since:
    May 2017

    Posted 26 Oct 2017 in reply to Atanas Korchev Link to this post

    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. 

  24. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 31 Oct 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top