Active content

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.

Button in template

//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

Button in list

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