ActiveContent in custom list

Webix JS
#1

how can I get config.$masterId when clicking common.editButton, if I have templateStart and templateEnd options in type section?
here is the code:

type   : {
    templateStart: <div class="some_class"><div></div>,
    templateEnd:"</div>"
},
template: function(obj, common){
   return "<div>" + obj.name + "</div>" + "<div style='float:right;'>"+ common.editButton(obj, common) +"</div>"
},
activeContent:{
	editButton:{
		id    : "editButtonId",
		view  : "button",
		type  : "iconButton", 
		icon  : "pencil",
		width : 30,
		click: function (id, e){
			console.log(this.config.$masterId);
		}
	},
}

So, in console.log I get ‘null’, but when I comment the type section it works correctly.

#2

It’s not mentioned in the docs (we’ll fix it), but items are detected by the webix_l_id attribute. Therefore, templateStart should always include the following notation:

templateStart:"<div webix_l_id='#id#'>",

Please check the snippet:

http://webix.com/snippet/2bc7fd90

#3

This works great. Thank you for your help

#4

Hello, webix team. Is there an actual way to create custom elements of the list? Let’s suppose that some elements need to add a button (according to some conditions).

#5

Hey @lBeJIuk, you can create custom elements via HTML and return them in the template (where you can also check for some certain conditions).

As an example, here is a ui.button inside of the list template: https://snippet.webix.com/oir322wj. In the case of a list this won’t really work however, as the component is designed to take up the full width of the parent, meaning there won’t be enough space for anything else in the template (it would work just fine with a datatable though - https://snippet.webix.com/t8rj5jsu).

That’s why here you’ll have to use a standart HTML button: https://snippet.webix.com/ilma3wy4. Please note that this is a very rough example of what you can do in this situation.