jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by brianwendt 12 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Docking from knockoutjs binding doesn't add windows beyond maxSections count Posts

April 16, 2013 at 12:53 pm Docking from knockoutjs binding doesn't add windows beyond maxSections count #19362

Member

I’ve set up a jqxDocking using knockoutjs binding, working from your sample code. The problem I am encountering is that when I specify a constant value for the maxSections, setting it to three so there are three columns, the 4th docking window that should be added in section 0, row 1 is not added.

From my observation your sample code contains a function ‘handleWindow(el)’ which makes a call to jqxDocking(‘addWindow’…). The final parameter passed into the ‘addWindow’ method is the panel position (or row as I understand it). Currently the code would have the row set to a value of 4 when there are 4 initial windows provided through the knockoutjs binding. Problem is the last window, or any windows beyond the initial three to provide the first window of each section, are never added to the jqxDocking.

Suggestions on a fix?

//This method will handle the new added windows
        function handleWindow(el) {
            alert('handleWindow windowsCount = ' + windowsCount);
            var id = 'knockout-window-' + windowsCount,
                section = windowsCount % sectionsCount;
            windowsCount += 1;
            $(el).attr('id', id);
            $('#docking').jqxDocking('addWindow', id, 'docked', section, windowsCount);
        }

April 16, 2013 at 1:54 pm Docking from knockoutjs binding doesn't add windows beyond maxSections count #19370

brianwendt

Member

Here is an example that demonstrates what I’m running into, based entirely off of your example code for Docking with knockoutjs:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>jqxDocking with Knockoutjs problem</title>
    <!-- ==================================================================================== -->
    <!-- =========== NOTICE: I HAVE MODIFIED THE SRC PATHS TO FIT MY ENVIRONMENT ============ -->
    <!-- ==================================================================================== -->
    <link rel="stylesheet" href="../tools/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../tools/scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../tools/scripts/json2.js"></script> 
    <script type="text/javascript" src="../tools/scripts/knockout-2.2.1.js"></script>
    <script type="text/javascript" src="../tools/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../tools/jqwidgets/jqxdocking.js"></script>
    <script type="text/javascript" src="../tools/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../tools/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../tools/scripts/gettheme.js"></script>
</head>
<body class='default'>
    <div id="content">
        <script type="text/javascript">
            $(document).ready(function () {                
                var theme = getDemoTheme();
                PeopleModel = function () {
                    //We define observable variable for the name
                    this.personName = ko.observable();
                    //We define observable variable for the credits
                    this.personCredits = ko.observable();
                    //We define observable array for the pairs (name, credits)
                    // ===========================================================================
                    // ========MY INITIAL ARRAY OF PEOPLE IS LARGER THAN maxSections VALUE========
                    // ===========================================================================
                    this.people = ko.observableArray([{ name: 'Bowser', credits: 250 }, { name: 'Mario', credits: 5800}, { name: 'Luigi', credits: 7000}]);
                    var self = this,
                        sectionsCount = 0,
                        windowsCount = 0,
                        maxSections;
                    //This method will handle the new added sections
                    function handleSection(el) {
                        var id = 'knockout-section-' + sectionsCount;
                        sectionsCount += 1;
                        el.id = id;
                        $(el).appendTo($('#docking'));
                        $(el).css('width', '47%');
                    }
                    
                    //This method will handle the new added windows
                    function handleWindow(el) {
                        var id = 'knockout-window-' + windowsCount,
                    section = windowsCount % sectionsCount;
                        windowsCount += 1;
                        $(el).attr('id', id);
                        $('#docking').jqxDocking('addWindow', id, 'docked', section, windowsCount);
                    }
                    function getDOMElement(args) {
                        for (var i = 0; i < args.length; i += 1) {
                            if (args[i].tagName && args[i].tagName.toUpperCase() === 'DIV') {
                                return args[i];
                            }
                        }
                        return null;
                    }
                    //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
                    // ===========================================================================
                    // ===========THIS IS HARD CODED; I ALWAYS WANT ONLY TWO COLUMNS==============
                    // ===========================================================================
                    maxSections = 2;
                    //This method handles adding a new person (when the user click on the Add button)
                    this.addPerson = function () {
                        if (this.people().length < 10) {
                            if (this.personName() && this.personCredits()) {
                                this.people.push({
                                    name: this.personName(),
                                    credits: this.personCredits()
                                });
                            }
                        }
                    }
                    //This custom render takes care of adding new windows
                    this.buildWindow = function (element) {
                        var el = getDOMElement(element);
                        if (sectionsCount < maxSections) {
                            handleSection(el);
                            handleWindow($(el).children('.knockout-window'));
                        } else {
                            handleWindow($(el).children('.knockout-window'));
                            $(el).remove();
                        }
                    }
                };
                ko.applyBindings(new PeopleModel());
                $('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: 380, mode: 'docked' });
                $('#Add').jqxButton({ theme: theme });
            });
        </script>
        <div id='jqxWidget'>
            <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="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>
    </div>
</body>
</html>

Chrome Inspection Screen Shot which shows that two sections are created but the third window is not present in either section.

April 17, 2013 at 9:50 am Docking from knockoutjs binding doesn't add windows beyond maxSections count #19427

Dimitar

Participant

Hello brianwendt,

The windows shown in a single row depends on the people observable array. If there are initially 4 elements of the array, there will be 4 columns, etc. The dependency can be seen here:

<div id="docking" data-bind="template: { foreach: people, afterRender: buildWindow }">

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

April 17, 2013 at 11:59 am Docking from knockoutjs binding doesn't add windows beyond maxSections count #19437

brianwendt

Member

So how do I set it up to have only three columns but still display all four of my initial windows? It seems that the buildWindow function was written to handle the creation of the sections where needed and once they had been created to just process the remaining windows.

Brian

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.