javascript/samples/javascript.controls/CaseSelectionCheckboxInItemTemplate.html at master · wangscript007/javascript

145 lines (130 loc) · 4.16 KB
﻿<!DOCTYPE html> 
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Selection checkbox in item template</title>
	<script type="text/javascript" src="../../primitives.js"></script>
	<link href="../../css/primitives.css" media="screen" rel="stylesheet" type="text/css" />
	<script type='text/javascript'>
		var control;
		var treeItems = {};
		document.addEventListener('DOMContentLoaded', function () {
			var options = new primitives.OrgConfig();
			var items = [
				new primitives.OrgItemConfig({
					id: 0,
					parent: null,
					title: "James Smith",
					description: "VP, Public Sector",
					image: "../images/photos/a.png"
				new primitives.OrgItemConfig({
					id: 1,
					parent: 0,
					title: "Ted Lucas",
					description: "VP, Human Resources",
					image: "../images/photos/b.png"
				new primitives.OrgItemConfig({
					id: 2,
					parent: 0,
					title: "Fritz Stuger",
					description: "Business Solutions, US",
					image: "../images/photos/c.png"
			/* Create hash table where key = id & value = ItemConfig */
			for (var index = 0, len = items.length; index < len; index += 1) {
				treeItems[items[index].id] = items[index];
			options.items = items;
			options.selectedItems = [0, 1];
			options.cursorItem = null;
			options.orientationType = primitives.OrientationType.Left;
			options.verticalAlignment= primitives.VerticalAlignmentType.Middle;
			options.horizontalAlignment= primitives.HorizontalAlignmentType.Left;
			options.childrenPlacementType= primitives.ChildrenPlacementType.Horizontal;
			options.leavesPlacementType= primitives.ChildrenPlacementType.Horizontal;
			options.hasSelectorCheckbox= primitives.Enabled.False;
			options.hasSelectorCheckbox= primitives.Enabled.False;
			options.navigationMode = primitives.NavigationMode.Inactive;
			options.pageFitMode = primitives.PageFitMode.AutoSize;
			options.autoSizeMinimum = new primitives.Size(100, 100);
			options.autoSizeMaximum = new primitives.Size(2000, 2000);
			options.templates= [getContactTemplate()];
			options.onItemRender= onTemplateRender;
			options.defaultTemplateName= "contactTemplate";
			options.onSelectionChanged = function (e, data) {
				UpdateMessage(control.getOption("selectedItems"));
			control = primitives.OrgDiagram(document.getElementById("basicdiagram"), options);
		function getContactTemplate() {
			var result = new primitives.TemplateConfig();
			result.name = "contactTemplate";
			result.itemSize = new primitives.Size(160, 30);
			result.minimizedItemSize = new primitives.Size(3, 3);
			result.itemTemplate = ["div",
					"style": {
						width: result.itemSize.width + "px",
						height: result.itemSize.height + "px",
						left: "4px",
						top: "4px",
						width: "152px",
						height: "20px"
					"class": ["bp-item bp-nopadding", "bp-corner-all", "bt-item-frame"]
				["label",
					["nobr",
						["input",
								"type": "checkbox",
								"name": "checkbox",
								"class": "bp-selectioncheckbox"
						'\xa0',
						["span",
								"name": "selectiontext",
								"class": "bp-selectiontext"
			return result;
		function onTemplateRender(event, data) {
			var element = data.element;
			var checkBox = element.firstChild.firstChild.firstChild;
			checkBox.checked = data.isSelected;
			checkBox.setAttribute("data-id", data.id);
			var label = element.firstChild.firstChild.childNodes[2];
			label.textContent = data.context["title"];
			label.setAttribute("data-id", data.id);
		function UpdateMessage(selectedItems) {
			var message = "";
			for (var index = 0; index < selectedItems.length; index++) {
				var itemId = selectedItems[index];
				var itemConfig = treeItems[itemId];
				if (message != "") {
					message += ", ";
				message += "<b>'" + itemConfig.title + "'</b>";
			var messagePanel = document.getElementById("message");
			messagePanel.innerHTML = "User selected following items: " + message;
		<div id="basicdiagram" style="border-style: dotted; border-width: 1px;"></div>
		<p id="message"></p>
FilesExpand file tree

CaseSelectionCheckboxInItemTemplate.html

Latest commit

History

CaseSelectionCheckboxInItemTemplate.html

File metadata and controls
