Blogs

In this post, we will show you how to use the jqxDocking widget with Knockout. If you are not already familiar with Knockout, you can take a look at it here: Knockout. In the sample web page, we will illustrate how to dynamically add and remove Docking Windows. 1. The first step is to include the JavaScript and CSS dependencies.

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../scripts/knockout-2.0.0.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>

2. Add the following HTML markup to the Document’s Body.

<input type="text" data-bind="value: personName" />
<input type="text" data-bind="value: personCredits" />
<input id="Add" type="button" data-bind="click: addPerson" value="Add" />
<div id='jqxWidget'>
	<div id="docking" data-bind="template: { foreach: people, afterRender: buildWindow }">
		<div class="knockout-section">
			<div class="knockout-window">
				<div>
					Name: <span data-bind="text: name"></span>
				</div>
				<div>
					Credits count: <span data-bind="text: credits"></span>
				</div>
			</div>
		</div>
	</div>
</div>

3. Define a PeopleModel object which will handle the adding of new People and new Docking windows. Each docking window is associated to a Person. When the ‘Add’ button is clicked, the people observableArray will be updated and a new Window will be added to the jqxDocking.

PeopleModel = function () {
	//Define an observable variable for the person's name
	this.personName = ko.observable();
	//Define an observable variable for the person's credits
	this.personCredits = ko.observable();
	//Define an observable array.
	this.people = ko.observableArray([{ name: 'Franklin', credits: 250 }, { name: 'Mario', credits: 5800}]);
	var self = this,
		sectionsCount = 0,
		windowsCount = 0,
		maxSections;
		
	//This method will handle the new docking sections.
	function handleSection(el) {
		var id = 'knockout-section-' + sectionsCount;
		sectionsCount += 1;
		el.id = id;
	}
	//This method will handle the new windows.
	function handleWindow(el) {
		var id = 'knockout-window-' + windowsCount,
			section = windowsCount % sectionsCount;
		windowsCount += 1;
		$(el).attr('id', id);
		$('#docking').jqxDocking('addWindow', id);
		$(el).detach();
		$(el).appendTo($('#knockout-section-' + section));
	}
	//We define the docking's sections count to be equal to the startup count of the objects in the
	//people array. This is not mandatory, but it's important to create all different sections before the docking initialization
	maxSections = this.people().length;
	
	//This method handles the adding of a new person. In our app, we call this method when the user clicks the Add button.
	this.addPerson = function () {
		if (this.personName() && this.personCredits()) {
			this.people.push({
				name: this.personName(),
				credits: this.personCredits()
			});
		}
	}
	//This custom render function takes care of adding new windows to the jqxDocking
	this.buildWindow = function (element) {
		var el = element[1];
		if (sectionsCount < maxSections) {
			handleSection(el);
			handleWindow($(el).children('.knockout-window'));
		} else {
			handleWindow($(el).children('.knockout-window'));
			$(el).remove();
		}
	}
};

4. Activate Knockout and Initialize the jqxDocking.

ko.applyBindings(new PeopleModel());
$('#docking').jqxDocking({ orientation: 'horizontal', width: 380, mode: 'docked' });