Datatable, change select editor to text editor for only 1 row.

Webix JS
#1

Hello everyone,

I defined a datatable with text and select editor. I would like to add a frozen row under the headers with comments that say how to fill the columns. But since some columns using select editor, when I’m trying to add the text to the cells with the select editor, since the text isn’t in the options for the cells with the select editor, it appear as a blank in my table.

So for now I think about two options, changing the select editor to text editor only for this row, or add the comments in the options of the cells with the select editor and hide the options to the users. I would prefer the first option, is anyone know how to deal with this?

Many thanks,
G

#2

Hello everyone,
I managed to change the editor by specifying the editor in the data and adding a OnBeforeEditStart function:

on:{
  onBeforeEditStart:function(id){
    var row = id.row;
    var column = id.column;
    return !this.getItem(row)[column+"_readonly"];
    if(id == 'comment'){
      var config = this.getColumnConfig(id.column);
      var ed = this.getItem(id.row).editor;
      config.editor = ed;
    }
  }
}

However, even if the editor changed (I can edit the cell because I changed to a text editor), the cells still appear as blank after the edit.

#3

https://snippet.webix.com/tuk9a3pf
I created a Snippet to illustrate my problem.

#4

Hello @GimliA,

I would like to add a frozen row under the headers with comments that say how to fill the columns.
As the simplest solution, you can try to use multiline header :
Code Snippet

I created a Snippet to illustrate my problem.
Or, as an another solution, you can change the template depending on what you have chosen. Please check the next example:
Code Snippet

#5

Thanks for your answer :slight_smile:

I might go with the multiline header: Code Snippet,
but how do I apply ccs style only for the header?

Usualy to do so, I was doing:
header:{
text:‘something’,
css:‘green’
}
(see the snippet, second column line)

#6

but how do I apply ccs style only for the header?

You can use the following technique:

<style>
    .header-style{
        background-color:#FFAAAA;
    }
</style>

<script>
webix.ui({
    view:"datatable",
    columns:[
        { id:"title",   header:{ text:"Film title", css:{"background":"#AFA"}}},
        { id:"votes",   header:{ text:"Votes", css:"header-style"} }
    ]
});
Please check the next snippet: https://snippet.webix.com/1yfemyls