Conditional read only / formatting of grid cells

10 posts, 0 answers
  1. Tom
    Tom avatar
    12 posts
    Member since:
    May 2013

    Posted 12 Jul 2013 Link to this post

    We've got a grid that needs to have the background-color / read only set based on their value.  I've seen some posts that discuss using the data bound event to set the color of the cell, and others that talk about client templates or editor templates, but I'm not finding one place to set both the cells background color and whether the value can be edited.  Since I'm constructing a VM object that encapsulates the column configuration (dynamically built columns / order / etc.) I'd like to keep as much of it together as I can.
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2277 posts

    Posted 16 Jul 2013 Link to this post

    Hello Tom,


    I would suggest you to use the dataBound event for both of the tasks. In the event handler you could add a custom class to the cells that satisfy the condition. The following Code Library demonstrates how to add a custom class (and styles) to rows based on their data. A similar approach could be used for adding a class to the cells. This class could be used to add the custom background and also to prevent the clicking of the cells (i.e. the editing in batch edit mode).
    E.g.
    $("#Grid").on("click", ".customNotEditable", function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();
    });

    I hope that this approach will work in the current scenario.

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Tom
    Tom avatar
    12 posts
    Member since:
    May 2013

    Posted 23 Jul 2013 Link to this post

    Dimiter,

    If I'm readying your code right, you're looping over all records, correct?  I'm not sure that'll work when the number of records grows (we could have 10,000+ records retrieved).  Or am I missing something?
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2277 posts

    Posted 24 Jul 2013 Link to this post

    Hi Tom,


    In the approach from the Code Library we are iterating over the data returned from the view() method of the dataSource. It returns only the items from the current page with filters, sorting and grouping applied. This should not be confused with the data() method, which returns all of the items in the dataSource.

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Tom
    Tom avatar
    12 posts
    Member since:
    May 2013

    Posted 24 Jul 2013 Link to this post

    Thanks Dimiter,

    Does this work with virtual scrolling too?
  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2277 posts

    Posted 24 Jul 2013 Link to this post

    Hi Tom,

    Yes, when the Grid is using virtual scrolling, the view() method functions the same way.

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Tom
    Tom avatar
    12 posts
    Member since:
    May 2013

    Posted 26 Jul 2013 Link to this post

    As I get into this more, I'm wondering if there's a way we could use the view model's configuration to set the fields color / editability?  The problem we're going to run into is that, for some of the cells, the ability to edit the cell isn't based strictly on the cell's value, but on multiple cells and other properties that are exposed in the view model.

    Your approach may be the best route to take, I'm just looking for something cleaner / more succinct.
  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2277 posts

    Posted 30 Jul 2013 Link to this post

    Hi Tom,


    With an Ajax bounded Grid, binding to the dataBound event and performing the custom checks there on a cell by cell basis is the most straight forward way to achieve this.

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Tom
    Tom avatar
    12 posts
    Member since:
    May 2013

    Posted 01 Aug 2013 Link to this post

    Thanks Dimiter,

    I'm finally getting to where I can get back on this and it appears the code library is setting the custom class for the entire row.  How would you go about setting the custom class for one of the cells?  If I look at the emitted HTML, it doesn't appear there's an ID of any kind of the individual <td>s to do a find with.  So???

    Also, we could potentially have hundreds of columns, so I'm not crazy about iterating over all rows AND columns.  Or does the view property also only returns the visible columns?
  10. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2277 posts

    Posted 02 Aug 2013 Link to this post

    Hello Tom,


    The view method returns the whole model for the items on the current page (with filtering, sorting etc. applied). Setting a custom class to a specific cell, when the columns show/hide option is enabled will require some custom implementation.
    For example the columns property of the Grid contains information about the current state of the columns i.e. hidden or not. It could be used to determine on which index is the column for the specified field at the moment and get the cell by this index via jQuery.
    E.g.
    var grid = $("#Grid").data("kendoGrid");
    var columns = grid.columns;

     

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top