All components dhtmlxForm Events Container events

Container events

Log (clear)
</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Container events</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>

	<style>
		/* some custom style to make grid pretty in disabled state */
		.dhxform_obj_material div.disabled div.gridbox_material {
			border: 1px solid #efefef !important;
		}
		.dhxform_obj_material div.disabled div.gridbox_material .ftr,
		.dhxform_obj_material div.disabled div.gridbox_material .xhdr {
			background-image: none !important;
			background-color: #fafafa !important;
			border-color: #f0f0f0;
		}
		.dhxform_obj_material div.disabled div.gridbox_material table.hdr tr {
			background-image: none !important;
		}
		.dhxform_obj_material div.disabled div.gridbox_material table.hdr td {
			border-right: 1px solid #f0f0f0 !important;
			border-bottom: 1px solid #f0f0f0 !important;
			color: #b2b2b2 !important;
		}
		.dhxform_obj_material div.disabled div.gridbox_material .odd_material {
			background-color: #fafafa !important;
		}
		.dhxform_obj_material div.disabled div.gridbox_material table.obj.row20px tr td {
			color: #b2b2b2 !important;
			border-bottom-color: #f0f0f0;
			border-right-color: #f0f0f0;
		}
		.dhxform_obj_material div.disabled div.gridbox_material table.obj tr.rowselected,
		.dhxform_obj_material div.disabled div.gridbox_material table.obj.row20px tr.rowselected td,
		.dhxform_obj_material div.disabled div.gridbox_material table.obj tr.rowselected td.cellselected {
			background-image: none !important;
			background-color: white !important;
			border-bottom-color: #f0f0f0;
			border-right-color: #f0f0f0;
		}
		.dhxform_obj_material div.disabled div.gridbox_material table.obj tr.odd_material.rowselected,
		.dhxform_obj_material div.disabled div.gridbox_material table.obj.row20px tr.odd_material.rowselected td,
		.dhxform_obj_material div.disabled div.gridbox_material table.obj tr.odd_material.rowselected td.cellselected {
			background-image: none !important;
			background-color: #fafafa !important;
			border-bottom-color: #f0f0f0;
			border-right-color: #f0f0f0;
		}
		.dhxform_obj_material div.disabled div.gridbox_material table.obj tr td span {
			color: #b2b2b2 !important;
		}
		/* grid styling ended */

		/* log */
		div#simpleLog {
			width: 500px;
			height: 200px;
			font-family: Roboto, Arial, Helvetica;
			font-size: 14px;
			color: #404040;
			overflow: auto;
		}
	</style>
	<script>
		var myForm, formData, grid, logObj;
		function doOnLoad() {
			formData = [
				{type: "settings", labelWidth: 130, inputWidth: 170},
				{type: "checkbox", label: "Enable / Disable", checked: true, position: "label-right", list: [
					{type: "input", label: "Full Name", value: "Kaapori Lumikaastra"},
					{type: "input", label: "Email", value: "kaapori.lumi@gmail.com"},
					{type: "container", name: "myGrid", label: "Select Product", inputWidth: 330, inputHeight: 200}
				]}
			];
			myForm = new dhtmlXForm("myForm", formData);

			grid = new dhtmlXGridObject(myForm.getContainer("myGrid"));
			grid.setImagePath("../../../codebase/imgs/");
			grid.load("../common/grid.xml");

			// events

			// do now allow edit if grid disabled
			grid.attachEvent("onEditCell", function(state){
				// _isItemEnabled return true/false of enable/disable state, which is controlled by script
				// when isItemEnabled (w/o "_") - state controlled by user
				// wi need script-state here to check parent checkbox
				if (!myForm._isItemEnabled("myGrid")) return false;
				return true;
			});

			grid.attachEvent("onBeforeSelect", function(){
				if (!myForm._isItemEnabled("myGrid")) return false;
				return true;
			});

			// form events
			myForm.attachEvent("onEnable", function(name){
				if (name == "myGrid") changeState("enabled");
			});
			myForm.attachEvent("onDisable", function(name){
				if (name == "myGrid") changeState("disabled");
			});

		}

		// change grid state
		function changeState(state) {
			logEvent("grid's state changed to: "+state+"</br>");
		}

		// logs
		function logEvent(t) {
			if (!logObj) logObj = document.getElementById("simpleLog");
			logObj.innerHTML += t;
			logObj.scrollTop = logObj.scrollHeight;
		}
		function clearLog() {
			if (!logObj) logObj = document.getElementById("simpleLog");
			logObj.innerHTML = "";
		}

	</script>
</head>
<body onload="doOnLoad();">
	<table>
		<tr><td><div id="myForm"></div></td></tr>
		<tr><td style='padding-top: 20px;'><b>Log (<a href="javascript:void(0);" onclick="clearLog();">clear</a>)</b></td></tr>
		<tr><td><div id="simpleLog"></div></td></tr>
	</table>
</body>
</html>

Documentation

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