How to dynamically set editor for cell depend on data type

Webix JS
#1

Hi, all!

I would like to dynamically set cell editor for treetable depend on type of data I’ve in data collection.
For instance, I have data smth like this:

  data: [
    {
      name: 'Header number 1',
      open: true,
      data: [
        {
          name: 'Identifier',
          representation: 'text',
          value: 'sdfsdf',
        },
        {
          name: 'Item name',
          representation: 'text',
          value: 'weoijojij',
        },
        {
          name: 'Accessible',
          representation: 'checkbox',
          value: 'true,
        },
      ]
    {
      name: 'Header number 2',
      open: true,
      data: [
        {
          name: 'Variants',
          representation: 'select',
          value: 'tioyituotuy',
        },
        {
          name: 'new',
          representation: 'checkbox',
          value: 'false',
        },
        {
          name: 'Grade',
          representation: 'select',
          value: 'oiutoyurty',
        },
      ]
    },

So, if the data in a cell that corresponds to represention: 'select' then I want to set editor ‘select’ to than cell, if the data has representation: 'checkbox', then there is an editor ‘checkbox’ in corresponding cell.

I can manually change editors while configuring component, but manually I can’t set various editors depend on ‘representation’ property value.

Thanks in advance.

#2 
webix.editors.conditionalEditor = webix.extend({
  render:function(){
    const record = $$('myDatatable').getItem(this.row);
    if (!record.representation) {
      return webix.html.create(
        'div',
        { 'class':'webix_dt_editor' },
        '<input type=\'email\'>'
      );
    }
  }
}, webix.editors.text);

Notes :

  • i didn’t find a way to access data without using datatable or list id (we need to fetch the record)
  • this code export pure html in this example, but you can not use existing editors

For sure there is a better way to do that.

#3

changing editor dynamically can be done in onBeforeEditStart event.

  on:{
    onBeforeEditStart: function(cell){
      if(cell.column == "value"){
        var item = this.getItem(cell);
        var column = this.getColumnConfig(cell.column);
        column.editor = item.representation; //or other logic
      }
    }
  }
1 Like
#4

:thinking:, is it possible to do this right after component is rendered? I want to add several combos with predefined variants. Just iterating thorough cells of dedicated column, check cell type and set editor of specific type with its proper data.

#5

try to create a snippet describing the behaviour you need