jQWidgets Forums

Tagged: docking, jqxDocking, maximum, panel, row, width

This topic contains 7 replies, has 2 voices, and was last updated by GDHafeleUK 12 years, 6 months ago.

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

Author

maximum width Posts

August 24, 2012 at 11:27 am maximum width #7094

GDHafeleUK

Member

Hi,

If you specify a width for jdxDocking say 1030px, is it possible to have a width on div inside

?
like so

What I notice is if you have 4 panels across the page it will set up the first 3 with the width of 150 and then set the last one to the remaining space. What I really is a fixed width for each panel is this possible? Also I want a row of 4 then if a user adds a 5th panel that panel is added on the line below. I cannot do this as the panels are not fixed width.

Any help would be appreciated.
Thanks,
GD

August 27, 2012 at 5:53 am maximum width #7159

Dimitar

Participant

Hello GD,

Here is an example based on the one in the jqxDocking demo – Knockout. There are four panels on a row and when you add another one, it is on a new row. Note this line:

                        $(el).css('width', '25%');

It sets the width of the elements to be 25% of the overall width. If you have five elements per row, use 20% and so on.

The whole example:

<!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'>Integration of jqxDocking with Knockout. Type something in the
        text fields and press the Add button.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-2.1.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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
</head>
<body class='default'>
    <div id="content">
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = 'classic';
                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: 'Franklin', credits: 250 }, { name: 'Mario', credits: 5800 }, { name: 'Marko', credits: 1700 }, { name: 'Jacob', credits: 1200}]);
                    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', '25%');
                    }
                    //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 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: 1030, 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>

Best Regards,
Dimitar

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

November 13, 2012 at 3:05 pm maximum width #10971

GDHafeleUK

Member

When I try the above code it does not work as expected. If I put a width of 1030 and use this

$(el).css(‘width’, ‘25%’);

When I add five items it does not wrap on to the next line but again tries to squeeze it onto the first line, so it shrinks the other panels.

Any ideas?

Thanks,
GD

November 14, 2012 at 2:00 pm maximum width #11004

Dimitar

Participant

Hello GD,

Did you try the whole example or just implemented the snippet? At our side, the example works properly. If you have any issues with it, please share more feedback, such as browser type and version, jQuery version and jQWidgets version you use.

Best Regards,
Dimitar

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

November 16, 2012 at 9:40 am maximum width #11104

GDHafeleUK

Member

Hi Dimitar,

I tried the example and your example page but I modified my code to what you suggested.
I am using jquery-1.8.2.min.js and JQWidgets 2.5. I have tried in Google Chrome, IE8 and 9 and also in FF 13


kpisModel = function ()
{
var myID;
this.KPIName = ko.observable();
this.KPIID = ko.observable();
kpis = ko.observableArray();
kpis.push({
name: '',
id: '',
widgetID: '',
KPIID: ''
});
// // this.kpis = ko.observable([{ name: 'Goods In 48 Hour KPI', id: '1'},{name: 'Quants in 902' ,id: '6'}]);
//
var self = this,
sectionsCount = 0,
windowsCount = 0,
maxSections;
//This method will handle the new added sections
function handleSection(el) {
var id = 'knockout-section-'+ el.id;
sectionsCount += 1;
el.id = id;
$(el).appendTo($('#docking'));
$(el).css('width', '25%');
}
//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 = kpis().length;
//This method handles adding a new person (when the user click on the Add button)
this.addKPI = function () {
if (this.kpis().length < 10) {
if (this.KPIName() && this.KPIID()) {
this.kpis.push({
name: this.KPIName(),
id: this.KPIID()
});
}
}
}
//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 kpisModel());
$('#docking').jqxDocking({ theme: 'darkblue', orientation: 'horizontal', width: '100%', mode: 'docked'});
});

HTML

<div id='jqxWidget'>
<div id="docking" data-bind="template: { foreach: kpis, afterRender: buildWindow }">
<div data-bind="attr: {'id' : KPIID}">
<div>
<div><span data-bind="text: name"></span></div>
<span data-bind="attr: {'id' : 'gaugeValue' + id}"  style="text-align: center; font-size: 17px; width: 70px;"></span>
<div data-bind="attr: {'id' : id}" style="height:200px;overflow:hidden">
</div>
</div>
</div>
</div>
</div>

November 27, 2012 at 10:28 am maximum width #11536

GDHafeleUK

Member

Any ideas? We are currently evaluating this control with a view to purchasing it when we go live, but at the moment there are too many issues with how this works effectively for us to do that.
Any help would be very much appreciated.
Thanks,
GD

November 28, 2012 at 8:55 am maximum width #11582

Dimitar

Participant

Hello GD,

Here is our example in jsFiddle (with code). Do you experience any issues with it?

And here is another example without Knockout. It has four windows at 25% width.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jQuery jqxDocking Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <style type="text/css">
        .window-wrapper
        {
            width: 25%;
        }
    </style>
    <script type="text/javascript" src="../scripts/jquery-1.8.3.min.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>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxDocking
            $("#docking").jqxDocking({ width: '1030px', theme: 'classic', mode: 'docked', orientation: 'horizontal' });
        });
    </script>
</head>
<body class='default'>
    <div id="docking">
        <div class="window-wrapper">
            <div id="window1">
                <div>
                    Header 1</div>
                <div>
                    Content 1</div>
            </div>
        </div>
        <div class="window-wrapper">
            <div id="window2">
                <div>
                    Header 2</div>
                <div>
                    Content 2</div>
            </div>
        </div>
        <div class="window-wrapper">
            <div id="window3">
                <div>
                    Header 3</div>
                <div>
                    Content 3</div>
            </div>
        </div>
        <div class="window-wrapper">
            <div id="window4">
                <div>
                    Header 4</div>
                <div>
                    Content 4</div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 28, 2012 at 10:09 am maximum width #11585

GDHafeleUK

Member

Hi Dimitar,

I see now. What I’d missed in both examples is that you have an array with set values at the very start, I didn’t want that, I needed to start with a blank array and let users add new ones as they go. I set the maxsections to say 4 but this doesn’t really do a great deal, it seems to be driven more by how many are in the array at the beginning.

Thanks anyway,
Glen

Author

Posts

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

You must be logged in to reply to this topic.