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.

score 0 · Accepted Answer · answered Mar 19 '15 at 05:39

0

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"})

answered Mar 19 '15 at 05:39

Aquatic

5,084
3
24
28

Thank you for the help. From what I can tell, I'm doing everything correctly, but the button still isn't functioning. I edited the original question to update what the code to what it is currently. – ZaredH Mar 20 '15 at 18:41
Check the next snippet http://webix.com/snippet/f34fde3f Problem in your case may be occurs because of `grida` var visibility. You can try to add `id:'grida'` to the datatable's config, and later use `$$("grida").add` – Aquatic Mar 21 '15 at 06:05
The issue was that the button wasn't aware of the add_row function, so I put the javascript in a separate file and that solved the issue. Thank you for the help. – ZaredH Mar 21 '15 at 21:17

Webix addRowCSS Implementation

1 Answers1