Readonly Cells in datatable

Webix JS
1

Hello

My requirement to set some cells in DataTable to be read only and some as editable. This I want to do on rendering of the grid as well as dynamically later after rendering in javascript.
Is there any property on data/cell level to set it readonly and change editor of the that particular cell only ?

Currently read only is assigned on column level to CSS attribute and I would like to set it on every cell/data level.

2

There is no built in property, but it quite easy to implement such behavior through events

http://webix.com/snippet/b5c2f783

Above code returns false from onBeforeEditStart when edit operation must be blocked. You may use any other convention to mark the readonly cells.

3

Thanks that’s helpful…

One more question :
How to check if any value exist on cell on onBeforeEditStart event ? As I was trying to check with grid.getItem() but it doesn’t give cell value but returns whole row . And getEditor() method also doesn’t return editor (may be because on this event editor is not opened yet ?)

Is there any way to get cell value on this event?

4

Yep, getEditor will not work as editor is not opened yet.

As for cell value, you can get column name as

var column = id.column;
var value = this.getItem(id.row)[column];
5

sample is not working good for keyboard navigation. wrote a post concerning that issue…

http://forum.webix.com/discussion/4496/bug-datatable-tab-order-with-onbeforeeditstart

6

Hi, I’m trying to achieve the same functionality on a check box cell, but it is not working. Could you pls guide?

http://webix.com/snippet/5dc34525

Thanks in advance!

7

In case of checkbox you can use a bit different approach

http://webix.com/snippet/04033485

Here, custom template is used to disable checkboxes, that are marked as readonly.

8

Great Thanks!

9

i am trying to disable editing a cell in a property view but your example for a datatable is not working. i have the onclick event working when you click the correct cell but not sure what to do next. how do i disable edibility here?

var sow_details_left = {
	view:"property",  id:"sow_details_left",
	nameWidth:150,
        on:{
            'onItemClick': function(id){ 
	        if (id ==  "sow_filename") {
		        // need to disable editable cell here
	        }
                 }
            }
      }