Docking: By default i need 4 windows to be created using knockout - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 1 reply, has 1 voice, and was last updated by mullai.b 11 years, 9 months ago.

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

Author

Docking: By default i need 4 windows to be created using knockout Posts

August 12, 2013 at 10:16 am Docking: By default i need 4 windows to be created using knockout #26683

mullai.b

Participant

Hi All,

the below code creates 2 window by default. click on add buttons it creates docks below.

Can you let me know how can i create 4 windows by defalut

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();
}
}
};

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

August 19, 2013 at 7:58 am Docking: By default i need 4 windows to be created using knockout #27111

mullai.b

Participant

Hi,

I need 4 windows using docking. 1st row should contain => 2 windows and 2nd row should contain => 2 windows. But the below code aligns 3 windows in 1st row.

Can you help me in making 3rd and 4th window to be placed in 2nd row.

Here is the code.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta name='keywords' content='jqxDocking, jQuery Docking, jQWidgets, Default Functionality' />
    <meta name='description' content='jqxDocking' />
    <title id='Description'>jqxDocking represents a widget which enables you to manage and
        layout multiple windows on a web page.</title>
    <link rel='stylesheet' href='../../jqwidgets/styles/jqx.base.css' type='text/css' />
    <script type='text/javascript' src='../../scripts/jquery-1.9.1.min.js'></script>
    <script type='text/javascript' src='../../scripts/gettheme.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxcore.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxwindow.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxdatetimeinput.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxcalendar.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxtooltip.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxtabs.js'></script>
    <script type='text/javascript' src='../../jqwidgets/globalization/globalize.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxdocking.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxlistbox.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxscrollbar.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxbuttons.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxpanel.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxsplitter.js'></script>
    <script type="text/javascript" src="../../scripts/json2.js"></script> 
    <script type="text/javascript" src="../../scripts/knockout-2.2.1.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <style>
        html, body
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</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)
                    this.people = ko.observableArray([{ name: 'Window 1', credits: 'FranklinFranklin' },
                                                     { name: 'Window 2', credits: 5800 },
                                                     { name: 'Window 3', credits: 250}]);
                    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
                    maxSections = this.people().length;
                    //This custom render takes care of adding new windows
                    this.buildWindow = function (element) {
                        var el = getDOMElement(element);
                        if (sectionsCount < maxSections) {
                            handleSection(el);
                          //  $(el).append('<br>');
                            handleWindow($(el).children('.knockout-window'));
                        }
                        else {
                            handleWindow($(el).children('.knockout-window'));
                            $(el).remove();
                        }
                    }
                };
                ko.applyBindings(new PeopleModel());
                $('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: '100%', height: '100%', mode: 'docked' });
                $('#Add').jqxButton({ theme: theme });
            });
        </script>
        <div id='jqxWidget'>
            <div id="docking" data-bind="template: { foreach: people, afterRender: buildWindow }">
                <div class="knockout-section">
                    <div class="knockout-window" style="height: 45%;">
                        <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>

Author

Posts

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

You must be logged in to reply to this topic.