|
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML 5 - KonockOut JS (TriStateTreeControl)</title>
<!------------------------------------------Add refernce of knockout--------------------------------------------->
<script src="Lib/jquery-1.6.3.min.js"></script>
<script src="Lib/jquery-ui.min.js"></script>
<script src="Lib/jquery.address.min.js"></script>
<script src="Lib/jquery.tmpl.min.js"></script>
<script src="Lib/knockout-1.2.1.min.js"></script>
<!-------------------------------------------------------------------------------------------------------------------->
<link href="CSS/TriStateCheckBox.css" rel="stylesheet" />
<!--------------------------------------Add refernce of Control scripts------------------------------------------>
<script src="Scripts/ClsTriStateCheckBox.js"></script>
<script src="Scripts/ClsTriStateTreeNode.js"></script>
<script src="Scripts/cNodeSampleData.js"></script>
<!-------------------------------------------------------------------------------------------------------------------->
<!----------------------------------------------Template for TriStaeCheckBox---------------------------------------------------------------------->
<script type="text/html" id="TriStaeCheckBox-Template">
<div class="CheckBoxOuterDiv" data-bind="click:ChangeStatus,attr: {title:Title}">
<img data-bind="css: { UncheckedCheckBox: State() == EnumState.UNCHECKED(),CheckedCheckBox: State() == EnumState.CHECKED(),IndeterminateCheckBox: State() == EnumState.INDETERMINATE()}">
<span class="CheckBoxDisplayText" data-bind="text: DisplayText" />
</div>
</script>
<script type="text/html" id="TriStaeCheckBoxTree-Template">
<table>
<tr>
<td style="width: 16px; padding: 0px;">
<img data-bind="click:ExpandChild,css: { ExpandCheckBoxTree: !ShowChild(),CollapseCheckBoxTree: ShowChild},visible:HasChild">
</td>
<td style="margin: 0px; padding: 0px; text-align: left">
<div data-bind="template: { name: 'TriStaeCheckBox-Template', data: CurrentNode }" />
</td>
</tr>
<tr data-bind="visible:ShowChild" >
<td colspan="2" style="margin: 0px; padding: 0px; text-align: left">
<div data-bind="if: HasChild">
<ul style="list-style: none; padding-left: 20px" data-bind="template: { name: 'TriStaeCheckBoxTree-Template', foreach: ChildNodes }" />
</div>
</td>
</tr>
</table>
</script>
<!--<input type="checkbox" disabled="disabled" data-bind="attr: { checked: $data.Checked},prop: { indeterminate: $data.Indeterminate }" />-->
<!-- <ul data-bind="foreach: $data.ChildNodes">
<li>
<div data-bind="template: { name: 'TriStaeCheckBoxTree-Template', data: $data.CurrentNode }" />
</li>
</ul>-->
<!-------------------------------------------------------------------------------------------------------------------->
<!----------------------------------------ON READY STATE CHANGE---------------------------------------->
<script type="text/javascript">
document.onreadystatechange = function () {
//globle var sampleNode
//defined in scriptSrc=>Scripts/cNodeSampleData.js
function AppViewModel() {
var Self = this
Self.TriStaeCheckBoxCtrl2 = ko.observable(new ClsTriStateCheckBox(Self,{ defaultState: true, displayText: "0987654321" }, 7));
Self.TriStaeCheckBoxCtrl1 = ko.observable(new ClsTriStateCheckBox(Self,{ defaultState: false, displayText: "1234567890" }, 7));
//to create tri state tree from ClsTriStateTreeNode(parent, cNode, displayTextLength, lavelToExpanded, currentLavel)
Self.TestNode = ko.observable(new ClsTriStateTreeNode(Self, sampleNode, 15, 2,null));
};
ko.applyBindings(new AppViewModel());
}
</script>
<!-------------------------------------------------------------------------------------------------------------------->
</head>
<body>
<h1>Tri State Tree Control</h1>
<hr />
<ul>
<li>
<h2>Tri State CheckBox</h2>
<table>
<tr>
<td>
<div style="display: inline; cursor: pointer; background-color: lightgray">
<span data-bind="click:TriStaeCheckBoxCtrl2().UpdateIndeterminate">Make UpdateIndeterminate</span>
<div data-bind="template: { name: 'TriStaeCheckBox-Template', data: TriStaeCheckBoxCtrl2 }" />
</div>
</td>
<td>
<div style="display: inline; cursor: pointer; background-color: lightcyan">
<span data-bind="click:TriStaeCheckBoxCtrl1().UpdateIndeterminate">Make UpdateIndeterminate</span>
<div data-bind="template: { name: 'TriStaeCheckBox-Template', data: TriStaeCheckBoxCtrl1 }" />
</div>
</td>
</tr>
</table>
</li>
<li>
<h2>Tri State CheckBox Tree</h2>
<div style="height:500px;width:500px;overflow:scroll"data-bind="template: { name: 'TriStaeCheckBoxTree-Template', data: TestNode }" />
</li>
</ul>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Myself from the dream city of Mumbai,India.
Academically, I have completed Degree and Diploma in Computer Science engineering
I started working as a freelance programmer, on fronts like embedded systems, web, windows , using Microsoft as well as Sun technologies.
Presently working in a reputed IT company.