Kendo Grid - Editable vs Non Editable Columns

[dnickels]

I'd like to know if there is a way to easily visibly distinguish editable columns from non-editable columns. 

The scenario that I have is that there is a Kendo grid on a page with five columns.  Only one of the columns is editable.  The other four columns display read-only data that is either preloaded into the data source on page initialization or calculated based on the value that the user enters into the editable column.  The grid is using batch editing.

At present, it isn't obvious which fields on the grid are editable vs not editable.  Only by clicking each cell can the user determine which cells can be edited.  I would like to provide a visual means to indicate which columns are editable vs not editable.  One option that I had tried is specifying a background color for non-editable fields via the "style" config option for each column.  However, this option isn't viable because it overrides the row highlighting color.  Any suggestions on how to visibly distinguish editable vs non-editable columns?

[Alexander Valchev]

Hello Dnickels,

My recommendation is to style the editable (or non editable) columns in a specific way. To do that you can use columns.attributes to add a CSS class or inline styling to the corresponding table cells.

I am not sure what do you mean by "I had tried is specifying a background color for non-editable fields via the "style" config option for each column". There is no style config option of the option. Could you please provide a small jsBin sample which demonstrates your current approach and the issue you encountered with. You can use this one as a base: http://jsbin.com/yayujoxe/2/edit

Regards,
Alexander Valchev
Telerik

[dnickels]

Sorry, I mis-spoke in my original question.  Instead of saying "...specifying a background color for non-editable fields via the "style" config option for each column", I should have said "...specifying a background color for non-editable fields via the "attributes" config option for each column."

You can see a representative example of my grid at http://jsbin.com/yayujoxe/6/edit.  Note that only the "item" column is editable.  There is nothing that indicates this fact to the end-user though, so the user in effect must click each column to see whether a row is editable or not.  Note that when clicking a row, the row is highlighted - which is a good thing; we like and want this feature in the grid.

You can see a representative example of what I've tried in order to solve the problem of indicating which column is editable at http://jsbin.com/yayujoxe/5/edit.  Note that, because I've specified a CSS background-color for the columns, when the user clicks a row to select it, only the editable column shows the row highlighting - which is not the behavior that we're looking for.  We still want the row highlighting (in some fashion).

[Alexander Valchev]

Hi Dnickels,

Thank you for providing a sample.

I see what your concerns are, but they can be easily avoiding using the columns.attributes approach. Instead of setting the inline style through the style attribute I suggest you to set a class name. This will give you the opportunity to change the styles in a more dynamic way.

<style>
  .non-editable {
    background-color: rgb(239,239,239);
  }

  .k-alt .non-editable {
    background-color: #ccc;
  }

  tr.k-state-selected .non-editable {
    background-color: initial;
  }
</style>

For your convenience I updated the jsBin sample:

• http://jsbin.com/yayujoxe/8/edit

Regards,
Alexander Valchev
Telerik

[dnickels]

That's a good solution and should work for our needs.