CODEWITHSUNDEEP
templateslayoutwebix
Silas M
Silas M

Reputation: 146

Webix layout as template

I'm new to Webix and trying to create a list or dataview where users can add and remove itens. (font files this time)

For such i defined one "add" button and one list where previously added items are displayed.

My plan was to put an label and a exclude button into each item of the list with the components Webix already provides but to my surprize the template property of data components aparentily can't be definied with ui objects itself.

There is some way to do it? Somethink like it:

webix.ui({ id:'stage', rows:[
{ view:"button", type:"icon", icon:"plus", label:"Add Font", autowidth:true, click:AddFont },
{ view:"dataview", id:"fnt_list", data:fonts(), width:300,
    type:{ width:300, height:150, template:function(fnt)
    {
        return webix.ui({cols:[
            {view:"label", align:"left", label:fnt.fileName },
            {view:"button", type:"icon", icon:"trash", label:"Exclude", align:"right", autowidth:true }
        ]});
    }}
}]});

I know it can be made with the layout component alone but i really would like to do it with one of the data components because of the paging feature they have.

Upvotes: 1

Views: 740

Answers (1)

Aquatic
Aquatic

Reputation: 5144

While it possible to create a separate instance of webix UI for each row, it is overkill for your task, just use HTML markup in the template. Something like next

{ view:"dataview", css:"fonts", id:"fnt_list", data:fonts, width:300,
  type:{ 
    width:300, height:150,
    template:"#fileName# <i class='fa fa-trash-o'></i>"
  },

working snippet - https://snippet.webix.com/dvbdt6st

If you still want to have real UI widgets inside of dataview items, check https://docs.webix.com/desktop__data_layout.html and https://docs.webix.com/desktop__active_content.html

Upvotes: 0

Related Questions