Webix addRowCSS Implementation

Question

I'm very new to using HTML. I'm required to use it for a project and I have no education on it at all. Here's a break down of what I need to do. I need to have a graph of text boxes (I have added some features to some of them provided by webix) and I would like to have buttons that allow me to add or delete rows. I'm using a webix datatable as well. Here is my code for the button. At the moment, I just want to add a row to the top of the chart. Right now I just have the add rows button. Once I figure this out, I can easily do the remove.


    input type='button' class="sample_button" value='add row' onclick= grida.addRowCss(1, getElementById('grida').style.color = "black");

Here is my datatable code.


    webix.ready(function(){
                    grida = webix.ui({
                        container:"testA",
                        view:"datatable",
                        columns:[
                        { id:"stage",editor:"text",         header:"Stage", width:150},
                        { id:"component",editor:"text",     header:"Component",width:200},
                        { id:"epic",editor:"text",          header:"Epic" , width:200},
                        { id:"engineering", editor:"text",  header:"Engineering", width:200, suggest:numSuggest},
                        { id:"design",  editor:"text",      header:"Design", width:200, suggest:numSuggest},
                        { id:"research",editor:"text",      header:"Research", width:200, suggest:numSuggest},
                        { id:"notes",   editor:"popup",     header:"Notes", width:200}
                        ],

                        editable:true,
                        autoheight:true,
                        autowidth:true,

                        data: [
                        {id: 1, stage:"Test 1", component:"Strategy", epic:"Design", engineering:2, design:0, research:0, notes: "This is a test"},
                        ]


                    });
                });

Everything is functional except for the button, which appears, but does nothing. This is a link for the addRow webix function. http://docs.webix.com/api__ui.datatable_addrowcss.html

Any and all help is appreciated, especially because I'm completely new to this. Thanks

Edit1:

Thank you for the answer. So at the moment I make my button like this (before the script)


input type="button" value="Add row" onclick= 'add_row()'

And the table remains the same as before, however I've included the add_row function after the conclusion of the table. I'll include the last bit of the table for context


data: [
                    {id: 1, stage:"Test 1", component:"Strategy", epic:"Design", engineering:2, design:0, research:0, notes: "This is a test"}
                    ]
                });

                function add_row(){
                    grida.add({
                        stage:"Test 2", 
                        component:"Strategy", 
                        epic:"Design", 
                        engineering:2, 
                        design:0, 
                        research:0, 
                        notes: "This is a test"
                    },2)
                }

I've also tried

 

    $$("grida").add(...)

to no avail. The button is on screen, but doesn't work. I imagine I'm doing something out of order, but I'm not sure what.

Aquatic Aquatic · Accepted Answer · 2015-03-19T05:39:18

You need to use add not addRowCss as in your code snippet http://docs.webix.com/api__link__ui.datatable_add.html

add adds the new row
addRowCss adds css class to the row

grida.add({ stage:"Test 2", component:"Second Component"})

Webix addRowCSS Implementation

1 Answers