Warning! This technique need to be used carefully, because it can result in performance degradation.
By default, you can place only static html in the templates and list elements, but in many cases you will want to use button or other kind of intputs inside of them.
//we are creating custom control, which will support active content dhx.protoUI({ name:"activeTemplate" }, dhx.ui.template, dhx.ActiveContent); //during init, activeContent is used to define active elements dhx.ui({ view:"activeTemplate", activeContent:{ mycounter:{ view:"counter", id:"mycounter", value:5, width:350 } }, template:"some text {common.mycounter()}" });
Inside template you can use {common.[control_name]()} construction to init the defined active content element.
You can access the created counter by its id, same as any other component.
Counter will map its values to dataobject of template, so getValues, setValues methods will affect it.
Related sample: 09_template/05_inputs.html
Similar to templates, active elements can be added to the lists and grids
dhx.protoUI({ name:"activeList" },dhx.ui.list,dhx.ActiveContent);
dhx.ui({ view: "activeList", id: "mylist1", url: "long_list.json", activeContent:{ deleteButton:{ id:"deleteButton1", view:"button", label:"delete", width:200, } }, template: "<div style='float:right'>{common.deleteButton()}</div> #title#" });
$$('deleteButton1').attachEvent("onItemClick", function(id, e){ var id = $$('mylist1').locate(e); dhx.notice("Delete "+id); });
Related sample: 04_list/09_active.html
Related sample: 04_list/10_active_complex.html
Related sample: 04_list/11_active_values.html