CODEWITHSUNDEEP
webix
Unchained
Unchained

Reputation: 7

Datatable editing with webix

I try to set ON the datatable editing but I don't know why it doesn't work. check

var datatable = webix.ui({
    id: "mytable",
    container: "myDATA",
view:"datatable",
autoheight:true,
select: 'row',
multiselect: true,
autoConfig:true,
editable: true,
editaction: 'dblclick',
columns:[
    { id:"rank",    header: translate["en"].rank,              width:50},
    { id:"title",   header: translate["en"].title,  width:200},
    { id:"year",    header: translate["en"].year,      width:80},
    { id:"votes",   header: translate["en"].votes,         width:100}
],
on: {
  onBeforeLoad: function() {
    this.showOverlay('Loading...');
  },
  onAfterLoad: function() {
    if(!this.count()) {
      this.showOverlay('No data found...');
    } else {
      this.hideOverlay();
    }           
  },
  onItemClick: function(id,element,node) {
    var row = this.getItem(id);
    console.log(row);
  }
}

});

my jsfiddle : http://jsfiddle.net/gdjaero9/40/ any solutions ?

Thank you for your answers.

Upvotes: 0

Views: 975

Answers (2)

Gagan Bansal
Gagan Bansal

Reputation: 323

Though you have already defined editable: true, but all the cells are still acting as DIVs. Becuase you haven't assigned the input components to your cells. To convert the div to text box on selecting the cell, you will have to provider the editor to that column.

There are various editors: text (converts the div to text box), select (converts the div to combo box), drowdown (converts the div to dropdown box) etc.

To add the editor in the column, add property: editor:'editor_type'

Upvotes: 0

fabien-michel
fabien-michel

Reputation: 2192

You also need to set the editor for each column :

columns:[
        { id:"rank",    header: translate["en"].rank, width:50},
        { id:"title",   header: translate["en"].title, editor:'text', width:200},
        { id:"year",    header: translate["en"].year, editor:'text', width:80},
        { id:"votes",   header: translate["en"].votes, editor:'text', width:100}
    ],

Updated fiddle : http://jsfiddle.net/gdjaero9/44/

Upvotes: 0

Related Questions