Conditional read only / formatting of grid cells

[Tom]

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.

[Dimiter Madjarov]

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

[Tom]

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?

[Dimiter Madjarov]

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

[Tom]

Thanks Dimiter,

Does this work with virtual scrolling too?

[Dimiter Madjarov]

Hi Tom,

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

Regards,
Dimiter Madjarov
Telerik

[Tom]

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.

[Dimiter Madjarov]

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

[Tom]

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?

[Dimiter Madjarov]

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