Custom item

</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Custom item</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<script>
		var myForm, formData;
		function doOnLoad() {
			formData = [
				{type: "checkbox", label: "Checkbox", position: "label-right", list:[
					{type: "myItem", name: "test",  my_text: "Temp text here", list:[
						{type: "radio", name: "r0", label: "Radiobutton #1", position: "label-right", checked: true},
						{type: "radio", name: "r0", label: "Radiobutton #2", position: "label-right"}
					]}
				]}
			];
			myForm = new dhtmlXForm("myForm", formData);
			myForm.setItemValue("test", "item value");

			/*
			myForm.attachEvent("onTextChanged",function(name,text,is_bolded){
				alert("onTextChanged event, name: "+name+", text: "+text+(is_bolded?", bolded":""));
			});
			*/

			myForm.setItemLabel("test", "Temp text 2");
			myForm.setBoldTextForMyItem("test", "This is custom item");

		}
		dhtmlXForm.prototype.items.myItem = {
			// methods will added automaticaly:
			// show, hide, isHidden, isExist, getType

			// 1st param should be item

			// constructor, required
			render: function(item, data) {
				// item - div of parent container
				// data - init json

				item._type = "myItem";
				item._enabled = true;

				/* 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 text only, any input, any code

				/* your custom code ended here */

				return this;
			},

			// destructor, required (if you will use unload)
			destruct: function(item) {

				/* your custom code started here */

				this._custom_inner_func2(item);
				item.innerHTML = "";

				/* your custom code ended here */
			},

			// enable item, mandatory
			enable: function(item) {

				/* your custom code started here */

				item.lastChild.style.color = "black";
				item._enabled = true;

				/* your custom code ended here */
			},

			// disable item, mandatory
			disable: function(item) {

				/* your custom code started here */

				item.lastChild.style.color = "gray";
				item._enabled = false;

				/* your custom code ended here */

			},

			// 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 methos will public
			setText: function(item, text) {
				// it already exists in form
				item.lastChild.innerHTML = text;

				// demo of triggering events
				// this will call user handler and pass item name and new text
				item.callEvent("onTextChanged",[item._idd,text]);
			},

			// this methos will also public
			setBoldText: function(item, text) {
				// but it not exists in form, so link to it needed, see below
				item.lastChild.innerHTML = "<b>"+text+"</b>";

				// demo of triggering events
				// this will call user handler and pass item name and new text and true as bolded flag
				item.callEvent("onTextChanged",[item._idd,text,true]);
			},

			// you you need validation and you need set/get value for you form, you need:
			// setValue and getValue, below basic code, you can add yout custom code also
			setValue: function(item, val) {
				item._value = val;
			},

			getValue: function(item) {
				return item._value;
			}

		};

		// link from form to item
		dhtmlXForm.prototype.setBoldTextForMyItem = function(name, text) {
			// this will call "setBoldText" with text param
			this.doWithItem(name, "setBoldText", text);
		};

		// support for set/get form data
		// in our sample default set/get value used, but you can also use your custom methods

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

Check documentation to learn how to use the components and easily implement them in your applications.