How to dynamically set editor for cell depend on data type

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.

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.

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

: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.

try to create a snippet describing the behaviour you need