CODEWITHSUNDEEP
javascripthtmldatatableselectionwebix
Bashkim Jaka
Bashkim Jaka

Reputation: 59

How to restrict selection on the datatable row?

I want to disable a datatable row. In such case I see two required steps:

I've successfully done the first step with corresponding Webix methods:

function disableRow(table, row){
  table.addRowCss(row, "disabled-row")
};

webix.ui({
  view:"datatable",
  id:"mytest",
  ...
}); 

disableRow($$("mytest"), 2)

http://webix.com/snippet/e47b4257

But how can I restrict the selection of this row? Thank you

Upvotes: 2

Views: 830

Answers (4)

Gagan Bansal
Gagan Bansal

Reputation: 323

To disable any feature provided by webix, you can override its events and handle the same: like to stop the selection on any particular column, row or cell you can override onBeforeSelect and return false for that specific row/column/cell.

There are events for everything i.e onBeforeSelect,onAfterSelect,onBeforeEditStop, onAfterEditStop etc.

Upvotes: 0

BubbleHulk
BubbleHulk

Reputation: 78

I found the answer you are looking for here

There's no disabled property for rows, but you can use onBeforeSelect and onBeforeEditStart events to prevent related actions on the particular row:

There is a link to this snippet on the above linked page which does what you are looking for.

webix.ui({
    view:"datatable", autoConfig:true, editable:true, data:grid_data,
        on:{
            onBeforeEditStart:function(id){
                if (id.row == 2 ) return false
            },
            onBeforeSelect:function(id){
                if (id.row == 2 ) return false
            } 
        }
});

Upvotes: 1

amadan
amadan

Reputation: 1514

It seems like there might not be a built in way to disable a row. I did come across this snippet that might help

I've tried programatically selecting the row afterwards and it won't let you. 

webix.ui({
  view:"datatable", id:"abc",autoConfig:true, editable:true, data:grid_data,
  on:{
    onBeforeEditStart:function(id){
      if (id.row == 2 ) return false
    },
    onBeforeSelect:function(id){
     if (id.row == 2 ) return false
    }
  }
});

$$("abc").select(2);
alert($$("abc").getSelectedId())
$$("abc").select(3);
alert($$("abc").getSelectedId())

Upvotes: 1

Mike
Mike

Reputation: 1735

Use !important to override the table styles:

<style>
 .disabled-row {
   background-color: #ddd !important;
   color: #aaa !important;
 }
</style>

http://webix.com/snippet/1a3569c6

Upvotes: 0

Related Questions