how to add blank row after each row in datatable

Webix JS
#1

I am using datatable and showing all required data in rows.
However, I want to put extra blank row after each data-row.
Something like this: Screenshot by Lightshot

#2

Hello,
You may use the simple snippet : https://snippet.webix.com/di48l9ge
Need to add blank row after each row in this datatable.
Please suggest

#3

Hello,
Please check Code Snippet

#4

Thanks, Nastja.
As you have { id:“empty1”} & { id:“empty2”} in data, that is why you are able to show it as a blank row.
However, I do not have the same in my data, so please help me with the other way(may be, add() method with eachRow()).

#5

Yeap, it’s possible by using add method
Example: https://snippet.webix.com/1ut5x19a

#6

Thanks, Nastja.
As per suggested snippet, “dt.add({ id:“empty1”}, 3);” is adding empty row at position 3. However, as I have dynamic number of rows and I want to add this black row after each of this row, how can I do this?
Because if I have more than 50 rows in my datatable, I cannot add function add() 50 times.

#7

Hi,
Okey, please check this https://snippet.webix.com/p4vin492

#8

Thanks, Nastja.
As per the snippet, ‘for(var index in items)’ is taking index value mentioned in ‘data’.
However, I want to give index values dynamically. So I am using the code :

on:{
        "data->onStoreUpdated":function(){
                                        this.data.each(function(obj, x){
                                            obj.index = x+1;
                                        })
        }
}

So please guide me according to dynamic index.

#9

Hello,
onStoreUpdated event will track editing/adding/removing data items from the datatable, so it will be called for any changes in the data.
You can add indexes manually. In this case you need scheme and use $init key

 scheme:{
    $init: function(){
      ...
  }

After the component has been completely initialized you can use ready or waitData to check whether all data was loaded.