<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="../form/codebase/skins/dhtmlxform_dhx_skyblue.css">
	<script src="../form/codebase/dhtmlxcommon.js"></script>
	<script src="../form/codebase/dhtmlxform.js"></script>
	<script>
		var myForm, formData;
		function doOnLoad() {
			formData = [
				{type: "checkbox", label: "Check me", position: "label-right", list:[
					{type: "myItem", name: "test",  my_text: "This is custom item", list:[
						{type: "radio", name: "r0", label: "Select me!", position: "label-right", checked: true},
						{type: "radio", name: "r0", label: "No, better select me!", position: "label-right"}
					]}
				]},
				{type: "newcolumn"},
				{type: "checkbox", label: "Check me", position: "label-right", list:[
					{type: "myItem", name: "test2",  my_text: "This is custom item", list:[
						{type: "radio", name: "r1", label: "Select me!", position: "label-right", checked: true},
						{type: "radio", name: "r1", label: "No, better select me!", position: "label-right"}
					]}
				]}
 
			];
			myForm = new dhtmlXForm("myForm", formData);
			myForm.setItemValue("test", "item value");
 
			myForm.attachEvent("onTextChanged",function(name,text,is_bolded){
				alert("Text has been changed.");
			});
			myForm.setItemText("test", "new item text");
			myForm.setBoldTextForMyItem("test", "new item text 2");
 
		}
		dhtmlXForm.prototype.items.myItem = {
			// constructor
			render: function(item, data) {
				item._type = "myItem";
				/* your custom code started here */
				item.appendChild(document.createElement("DIV"));
				item.lastChild.innerHTML = data.my_text;
				this._custom_inner_func(item);
				// you can insert not only text, but also any input, any code
				/* your custom code ended here */
				return this;
			},
			// destructor
			destruct: function(item) {
				/* your custom code is started here */
				this._custom_inner_func2(item);
				item.innerHTML = "";
				/* your custom code is ended here */
			},
			// enables item
			enable: function(item) {
				/* your custom code is started here */
				item.lastChild.style.color = "black";
				item._is_enabled = true;
				/* your custom code is ended here */
			},
			// disables item
			disable: function(item) {
				/* your custom code is started here */
				item.lastChild.style.color = "gray";
				item._is_enabled = false;
				/* your custom code is ended here */
			},
			// to the basic code below  you can add your custom code
			setValue: function(item, val) {
				item._value = val;
			},
 
			getValue: function(item) {
				return item._value;
			}
			// your custom functionality
			_custom_inner_func: function(item) {
				item.lastChild.onclick = function(){
					if (this.parentNode._is_enabled) alert("Hello!")
				}
			},
			_custom_inner_func2: function(item) {
				item.lastChild.onclick = null;
			},
			// this method will be public
			setText: function(item, text) {
				// it already exists in form and we redefine it. 
				item.lastChild.innerHTML = text;
 
				// demo of triggering events
				// this will call a user handler and pass the item name and new text
				item.callEvent("onTextChanged",[item._idd,text]);
			},
			setBoldText: function(item, text) {
				// this method is also public but it doesn't exist in form.
				item.lastChild.innerHTML = "<b>"+text+"</b>";
 
				// demo of triggering events
				// this will call a user handler and pass the item name, new text and true as bolded flag
				item.callEvent("onTextChanged",[item._idd,text,true]);
			}		
		};
 
		dhtmlXForm.prototype.setBoldTextForMyItem = function(name, text) {
			// this calls "setBoldText" with text param
			this.doWithItem(name, "setBoldText", text);
		};
		// in our sample default set/get value is used, but you can use your custom methods as well
 
		dhtmlXForm.prototype.setFormData_myItem = function(name, value) {
			return this.doWithItem(name, "setValue", value)
		};
 
		dhtmlXForm.prototype.getFormData_myItem = function(name) {
			return this.doWithItem(name, "getValue")
		};
 
 
	</script>
 
</head>
<body onload="doOnLoad();">
	<div id="myForm" style="height:150px;"></div>
</body>
</html>
Example of custom item
