jQWidgets Forums

Forum Replies Created

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

Author

Posts

April 17, 2013 at 11:59 am in reply to: Docking from knockoutjs binding doesn't add windows beyond maxSections count 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

April 16, 2013 at 1:54 pm in reply to: Docking from knockoutjs binding doesn't add windows beyond maxSections count 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 15, 2013 at 5:51 pm in reply to: allowDrag and allowDrop with knockoutjs binding allowDrag and allowDrop with knockoutjs binding #19292

brianwendt

Member

Mariya,

How do I update the source upon drag end? I’m finding that when I perform the drag and drop the jqxTree displays the data properly but the dragged node’s position is not updated within the binded data. When I try to interact with dragItem or dropItem in the ‘dragEnd’ event, I cannot seem to update any of the knockoutjs bindings without locking up the UI.

Suggestions?

Thanks,

Brian Wendt

April 15, 2013 at 3:30 pm in reply to: allowDrag and allowDrop with knockoutjs binding allowDrag and allowDrop with knockoutjs binding #19275

brianwendt

Member

Ah, I had forgotten the jqxdragdrop. Thanks!

Author

Posts

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