Datatable : max row height with scrollbar / editable cells / new lines

Webix JS
#1

Hello :slight_smile:

First I wanted to say thank you and thank you very much for webix, it is a tool I have been using 2 years and it always fits my needs and it is awesome, it is really, really, an amazing and great job you have been doing.

So…
I have a datatable :

{
    autowidth:true,
    view:"datatable", 
    fixedRowHeight:false,  
    rowHeight:25,
    editable:true,
    maxRowHeight:100,
    columns:[
        { id:"dossier",   header:"Dossier",    width:300 },
        { id:"type",   header:"Type",         width:100},
        { 
            id:"fait",   
            header:"Fait",         
            width:300, 
            editor:'text',
        },
        { id:"aFaire",   header:"A faire",         width:300,  editor:"text"},
        { id:"opPrincipal",   header:"Principal",         width:80},
        { id:"opSecondaire",   header:"Back-up",         width:80}
    ],
    data: [
        {
            dossier:"2021-433-ACF-France-RCA",
            type:'Cas 1',
            fait:'02/11/2021 OP2 : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
            aFaire:'Comparatif de cotation',
            opPrincipal:'OP3',
            opSecondaire:'OP4'
        },
        { 
            dossier:"2021-562-PUI-Ouganda-Afghanistan", 
            
            type:'Cas 2',
            fait:'02/11/2021 OP5 : Devis lancés',
            aFaire:'Valider transitaire',
            opPrincipal:'OP3',
            opSecondaire:'OP4'
            
        }
    ],
    on:{
        onAfterLoad:function() {
            webix.delay(function() {
                this.adjustRowHeight("fait", true); 
                this.render();
            }, this);
        },
    }
},

and in some columns I can edit the content of the cells. For this cells :

I would like to a have maxHeight, I know that this is possible, but when I set a maxHeight it only displays the first lines and hide the rest of the text. I would like to add a scrollbar in the cell, and also if possible, let’s say if the cells have a max height for 4 lines, I would like to display by default the 4 last lines, and not the 4 first ones.

Also, how I can add a new line to the cell (I.E press enter and create a new line) and keep it display as a new line in the cell ?

At last, when I edit a cell with a text of potentially multiple lines, I would like the editor to display the text as it is formated in the datatable (multiples lines) and not in just one line.

Seems that all these features could be done in a custom editor but I really don’t know how to achieve that :frowning:

I don’t necessarily ask for “baked” answer, but please can you send me some topics where I could find my answers ?

Thanks team !!! I love you !

1 Like
#2

Hi! Thanks for your kind words, that’s very nice of you :slight_smile:
We work hard every day to make Webix better, so we really appreciate your feedback!

What about your questions, first of all you’re right, some of the features can be done with custom editor:

webix.editors.mytext = {
    focus:function(){
        this.getInputNode(this.node).focus();
        this.getInputNode(this.node).select();
    },
    getValue:function(){
        return this.getInputNode(this.node).value;
    },
    setValue:function(value){
        this.getInputNode(this.node).value = value;
    },
    getInputNode:function(){
        return this.node.firstChild;
    },
    render:function(){
        return webix.html.create("div", {
            "class":"webix_dt_editor"
        }, "<textarea class='textarea webix_view' ></textarea>");
    }
}

Also, by default after pressing the button “Enter”editing completes. To use “Enter” for creating new lines you can disable default enter key handler by using

webix.UIManager.removeHotKey("enter");

But note that it will disable enter completely and if you’ll need to enable it for particular views, you can use webix.UIManager.addHotKey(“enter”, handler, view);
As a variant, you can also block onKey events directly on the textarea editor so it won’t affect global hotkeys.
To add scrollbar in the cell use the following CSS:

.textarea .webix_cell  {
  overflow-y: scroll;
  }

Here’s an example with all of the features above: Code Snippet