Using jqxDocking with Knockout

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">
Name: <span data-bind="text: name"></span>
Credits count: <span data-bind="text: credits"></span>
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,
//This method will handle the new docking sections.
function handleSection(el) {
var id = 'knockout-section-' + sectionsCount;
sectionsCount += 1; = 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).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()) {
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) {
} else {
4. Activate Knockout and Initialize the jqxDocking.
ko.applyBindings(new PeopleModel());
$('#docking').jqxDocking({ orientation: 'horizontal', width: 380, mode: 'docked' });

About admin

This entry was posted in JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxDock, jqxWindow and tagged , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply