Docking in columns

[GDHafeleUKMember]

Hi,
I have widgets that are inside a docking “area” and I’ll be saving these widgets to a database with a column id and a sequence id.
What I want to know is if I render two widgets to the page similar to the docking demo, then move one of the widgets from column 1 to column 2, underneath the existing widget, the two docked widgets sit nicely in the middle of the screen. This is all good.

What I want to do is when the page is first rendered this two column layout is rendered, but with nothing in column one and the two widgets both appear in column two, one below the other. Is this possible, and if so how.
I create the

s dynamically as going forward I will not know how many widgets to display in the docking area.
Below is the code. I am using this with MVC3 and razor

$(document).ready(function () {
var theme = getTheme();
$('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: "1030", mode: 'docked' });
$('#events').jqxPanel({ theme: theme, height: '50px', width: '450px' });

});

@Code
If Model IsNot Nothing Then
For Each item In Model.KPI

@:
@: $(document).ready(function () {
@: $('#docking').jqxDocking('disableWindowResize', '@item.Sequence');

If item.GaugeID.Contains("gauge") Then
@: var labels = { visible: true, position: 'inside' },
@: theme = getTheme();
@: //Create jqxGauge
@: $('#@item.GaugeID').jqxGauge({
@: ranges: [{ startValue: 0, endValue: 80, style: { fill: '#d02841', stroke: '#d02841' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
@: { startValue: 80, endValue: 90, style: { fill: '#FF9A35', stroke: '#FF9A35' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
@: { startValue: 90, endValue: 100, style: { fill: '#02FF17', stroke: '#02FF17' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 }
@: ],
@: cap: { radius: 0.04 },
@: caption: { offset: [0, 15], value: '@item.KPIName', position: 'bottom' },
@: value: 0,
@: style: { stroke: '#ffffff', 'stroke-width': '1px', fill: '#ffffff' },
@: animationDuration: 1500,
@: colorScheme: 'scheme04',
@: labels: labels,
@: ticksMinor: { interval: 5, size: '5%' },
@: ticksMajor: { interval: 10, size: '10%' },
@: max: 100,
@: width:150,
@: height:180,
@: });
@: //Initialize the Settings panel.
@: $('#expander').jqxExpander({ toggleMode: 'none', showArrow: false, width: 200, theme: theme });
@: $('#insideRadio').jqxRadioButton({ width: 150, checked: true, theme: theme });
@: $('#outsideRadio').jqxRadioButton({ width: 150, theme: theme });
@: $('#showLabelsCheckbox').jqxCheckBox({ width: 150, checked: true, theme: theme });
@: $('#showRangesCheckbox').jqxCheckBox({ width: 150, checked: true, theme: theme });
@: $('#showBorderCheckbox').jqxCheckBox({ width: 150, checked: true, theme: theme });
@: //Binding to the widgets's events
@: $('#showLabelsCheckbox').bind('change', function (e) {
@: labels.visible = e.args.checked;
@: $('#gauge').jqxGauge('labels', labels);
@: });
@: $('#showRangesCheckbox').bind('change', function (e) {
@: $('#gauge').jqxGauge('showRanges', e.args.checked);
@: });
@: $('#showBorderCheckbox').bind('change', function (e) {
@: $('#gauge').jqxGauge('border', { visible: e.args.checked });
@: });
@: $('#outsideRadio').bind('change', function (e) {
@: if (e.args.checked) {
@: labels.position = 'outside';
@: $('#gauge').jqxGauge('labels', labels);
@: }
@: });
@: $('#insideRadio').bind('change', function (e) {
@: if (e.args.checked) {
@: labels.position = 'inside';
@: $('#gauge').jqxGauge('labels', labels);
@: }
@: });
@: // set gauge's value.
@: $('#@item.GaugeID').jqxGauge('setValue', @item.Percentage);
@: $('#@item.GaugeID').css('width','180px');
Else
@: // prepare the data
@: var sampleData = [
@: { Hour:'07:00',Expected:5000,Actual:4500},
@: { Hour:'08:00',Expected:4000,Actual:4500},
@: { Hour:'09:00',Expected:6000,Actual:3500},
@: { Hour:'10:00',Expected:7000,Actual:6000},
@: { Hour:'11:00',Expected:8000,Actual:7500},
@: { Hour:'12:00',Expected:9500,Actual:8500},
@: { Hour:'13:00',Expected:5000,Actual:5500},
@: { Hour:'14:00',Expected:4000,Actual:4500},
@: ] ;
@:
@: // prepare jqxChart settings
@: var settings = {
@: title: "@item.KPIName",
@: enableAnimations: true,
@: showLegend: true,
@: legendPosition: { left: 120, top: 140, width: 50, height: 100 },
@: padding:{ left: 5, top: 5, right: 5, bottom: 5 },
@: titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
@: source: sampleData,
@: colorScheme: 'scheme03',
@: categoryAxis:
@: {
@: text: 'Category Axis',
@: dataField: 'Hour'
@: },
@: seriesGroups:
@: [
@: {
@: type: 'column',
@: showLabels: false,
@: columnsGapPercent: 50,
@: seriesGapPercent: 0,
@: valueAxis:
@: {
@: unitInterval: 2000,
@: minValue: 1000,
@: maxValue: 10000,
@: displayValueAxis: true,
@: axisSize: 'auto',
@: tickMarksColor: '#888888'
@: },
@: series:
@: [
@: { dataField: 'Expected', displayText: 'Expected items'},
@: { dataField: 'Actual', displayText: 'Actual items'}
@: ]
@: }
@: ]
@: };
@: // setup the chart
@: $('#@item.GaugeID').jqxChart(settings);
End If
@: });

@:
Next
End If

End code

$(function() {
// subscribe to the change event of the dropdown
$('#Widgets').change(function() {
// find the containing form and submit it
$(this).closest('form').submit();
});
});

$(document).ready(function () {
function capitaliseFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}

function displayEvent(event) {
var eventData = 'Event: ' + capitaliseFirstLetter(event.type) + '';
eventData += '' + $('#' + event.args.window).jqxWindow('title') + '';
$('#events').jqxPanel('prepend', '

' + eventData + '

');
}

$('#docking').bind('dragEnd', function (event) {
displayEvent(event);
});

$('#docking').bind('dragStart', function (event) {
$("#events").jqxPanel('clearcontent');
displayEvent(event);
});
});

@Code
If Model Is Nothing Then
@: @ViewData("NoKPI")
'do a dropdownlist
Using (Html.BeginForm("ChosenWidget", "Home", FormMethod.Get))
@:

@: Widgets: @Html.DropDownList("Widgets", "--Select Widget--")

@:
End Using

Else
@:

@:

@:

@:

For i As Integer = 0 To Model.KPI.Count - 1
@:

@:

@:

@: @Model.KPI(i).KPIName

@:

@:

@:

If i Mod 4 = 0 And i > 0 Or i = Model.KPI.Count - 1 Then

End If
Next

@:

@:

@:

@: Widgets: @Html.DropDownList("Widgets", "--Select Widget--")

@:

End If
End Code

Any help would be very much appreciated.
Thanks,

[DimitarParticipant]

Hello GDHafeleUK,

Here is the solution – you should add your widgets only to the second “column”, represented by a div element. Take a look at this example based on the one in the demo. In this case, the “columns” are the div elements with ids “FirstColumn” and “SecondColumn”.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jqxDocking, jQuery Docking, jQWidgets, Default Functionality" />
    <meta name="description" content="jqxDocking is a widget which helps you to control and manage multiple windows and 
    even the layout of your page. Each window which is part of jqxDocking can be dragged around the Web page, 
    docked into docking zones, collapsed into a minimized state, expanded or pinned." />
    <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="jquery-1.7.2.min.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/jquery.global.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">
        $(document).ready(function () {
            var source = [
                    'JavaScript Certification - Welcome to our network',
                    'Business Challenges via Web take a part',
                    'jQWidgets better web, less time. Take a tour',
                    'Facebook - you have 7 new notifications',
                    'Twitter - John Doe is following you. Look at his profile',
                    'New videos, take a look at YouTube.com'
		        ];
            var theme = 'classic';
            $('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: 680, mode: 'docked' });
            $('#docking').jqxDocking('disableWindowResize', 'window1');
            $('#docking').jqxDocking('disableWindowResize', 'window2');
            $('#docking').jqxDocking('disableWindowResize', 'window3');
            $('#docking').jqxDocking('disableWindowResize', 'window4');
            $('#calendar').jqxCalendar({ theme: theme, width: 180, height: 180 });
            $('#newsTbs').jqxTabs({ theme: theme, width: 310, height: 181, selectedItem: 1 });
            $('#listbox').jqxListBox({ source: source, theme: theme, width: 310, height: 181 });
            $('#zodiak').jqxPanel({ theme: theme, width: 310, height: 180 });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="docking">
            <div id="FirstColumn">
            </div>
            <div id="SecondColumn">
                <div id="window3" style="height: 220px">
                    <div>
                        Zodiac</div>
                    <div style="overflow: hidden;">
                        <div id="zodiak">
                            <div style="padding: 3px; width: 150px; height: 110px; float: left; margin: 10px;">
                                <img src="../../images/leo.jpg" alt="Leo" title="Leo" />
                            </div>
                            <h3 style="text-align: center; color: #787878;">
                                Leo</h3>
                            <span style="font-size: 11px">Individuals born under the zodiac sign of Leo are very
                                good looking and have a healthy physique, with a broad forehead. Leo are very intelligent,
                                extremely courageous, love their freedom and live by their own rules. Indulgence
                                and extravagance is like second nature to them and they love to... </span>
                        </div>
                    </div>
                </div>
                <div id="window4" style="height: 220px;">
                    <div>
                        E-mail</div>
                    <div style="overflow: hidden;">
                        <div id="listbox">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jqWidgets
http://www.jqwidgets.com/

[GDHafeleUKMember]

Hi

Thanks for this. I actually used the exportLayout and importLayout events.

Cheers,
Glen

[Author]

Posts