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

6

@franck34, sorry, but I didn’t manage to make you method works. :man_shrugging: I think I’m not so familiar with Webix inner mechanism.

@intregal, thanks. I reproduced your approach. At first glance It works, but with some minor disadvantages. Although, I’ve made representation of checkboxes after first rendering, but they ‘jumping’ when I try to change their value. I’m looking for proper method to make them better.
And second moment with editors like select or others that have habitual appearance for user, that appearance appears only when editing. Can you give me some advise how to show them for user in their natural view at first render? Thanks.

This is my snippet:
https://snippet.webix.com/5rojawwu

7

@yar I can recommend this approach
https://snippet.webix.com/cm9xgor7
check lines 19, 33

8

Thanks, it looks much better than before.

I tried various methods to make editable controls visible after constantly but failed. :man_shrugging:
Finally I decided to test another approach with custom html templates for each type of data. I think that it’s not that Webix team thinks we will do with it components.

Nevertheless, please, look at this:
https://snippet.webix.com/vc9xru4m