jQWidgets Forums

Forum Replies Created

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

Author

Posts
November 28, 2012 at 10:09 am in reply to: maximum width 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

November 27, 2012 at 10:28 am in reply to: maximum width 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 16, 2012 at 9:40 am in reply to: maximum width 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 16, 2012 at 9:35 am in reply to: Test Topic Test Topic #11101

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 16, 2012 at 9:32 am in reply to: Gauge Value Changing Event Gauge Value Changing Event #11100

GDHafeleUK
Member

Hi Peter,

Thank you that was the problem when the value updated it was actually a string not an int thank you for your help.

Cheers,
GD

November 16, 2012 at 8:22 am in reply to: Test Topic Test Topic #11086
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();
```
```
            <% For Each item In Model.KPI %>
```
```
kpis.push({
```
```
                        name: '<%=item.KPIName%>',
```
```
                        id: '<%= item.GaugeID %>',
```
```
                        widgetID: '<%= item.WidgetID %>',
```
```
                        KPIID: '<%= item.KPIID %>'
```
```
});
```
```
            <% Next %>
```
```
//        //  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}” class=”knockout-section”>

<div class=”knockout-window”>

<div><span data-bind=”text: name”></span></div>

<span class=”gaugeValue” 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>
November 16, 2012 at 8:17 am in reply to: Gauge Value Changing Event Gauge Value Changing Event #11085

GDHafeleUK
Member

function DisplayGaugeWidget(gaugeID, KPIName, percentage, green, amber, red, max, redFirst)
{
var labels = { visible: true, position: ‘inside’ },
theme = getTheme();
var myRanges;
if (redFirst == true)
{
myRanges = [{ startValue: 0, endValue: red, style: { fill: ‘#d02841’, stroke: ‘#d02841’ }, startDistance: ‘5%’, endDistance: ‘5%’, endWidth: 13, startWidth: 13 },
{ startValue: red, endValue: amber, style: { fill: ‘#FF9A35’, stroke: ‘#FF9A35’ }, startDistance: ‘5%’, endDistance: ‘5%’, endWidth: 13, startWidth: 13 },
{ startValue: amber, endValue: max, style: { fill: ‘#02FF17’, stroke: ‘#02FF17’ }, startDistance: ‘5%’, endDistance: ‘5%’, endWidth: 13, startWidth: 13 }
]
}
else
{
myRanges = [{ startValue: 0, endValue: green, style: { fill: ‘#02FF17’, stroke: ‘#02FF17’ }, startDistance: ‘5%’, endDistance: ‘5%’, endWidth: 13, startWidth: 13 },
{ startValue: green, endValue: amber, style: { fill: ‘#FF9A35’, stroke: ‘#FF9A35’ }, startDistance: ‘5%’, endDistance: ‘5%’, endWidth: 13, startWidth: 13 },
{ startValue: amber, endValue: max, style: { fill: ‘#d02841’, stroke: ‘#d02841’ }, startDistance: ‘5%’, endDistance: ‘5%’, endWidth: 13, startWidth: 13 }
]
}
//Create jqxGauge
$(‘#’ + gaugeID).jqxGauge({
ranges: myRanges,
cap: { radius: 0.04 },
style: { stroke: ‘#ffffff’, ‘stroke-width’: ’11px’, fill: ‘#ffffff’ },
animationDuration: 1200,
value: 0,
colorScheme: ‘scheme02’,
labels: labels,
ticksMinor: { interval: 10, size: ‘10%’ },
ticksMajor: { interval: 20, size: ‘15%’ },
min: 0,
max: max,
width: 150,
height: 180
});

$(‘#’ + gaugeID).bind(‘valueChanging’, function (e)
{
var d = e.args.value;
try
{
$(‘#gaugeValue’ + gaugeID).text(e.args.value);
}
catch (err)
{
alert(err);
}
});
$(‘#’ + gaugeID).jqxGauge(‘value’, percentage);

//Initialize the Settings panel.

$(‘#’ + gaugeID).jqxGauge({ border: { showGradient: true, size: ‘5px’, style: { stroke: ‘#898989’ }, visible: false} });
$(‘#’ + gaugeID).jqxGauge({ labels: { position: ‘inside’, interval: 20} });
$(‘#’ + gaugeID).jqxGauge({ pointer: { pointerType: ‘rectangle’, style: { fill: ‘#ff0000’, stroke: ‘#ff0000’ }, length: ‘90%’, width: ‘1%’, visible: true} });

Thanks,
GD
// set gauge’s value.
$(‘#’ + gaugeID).jqxGauge({ ticksDistance: ’15px’ });
$(‘#’ + gaugeID).jqxGauge(‘setValue’, percentage);

$(‘#’ + gaugeID).css(‘width’, ‘180px’);
}

November 13, 2012 at 3:05 pm in reply to: maximum width 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 8, 2012 at 8:29 am in reply to: Gauge Value Gauge Value #10667

GDHafeleUK
Member

Thanks for the quick response. Is this something that might be done in the future?

Thanks,
GD

August 23, 2012 at 10:43 am in reply to: Fire closewindow event Fire closewindow event #7043

GDHafeleUK
Member

Hi,
I worked out what I needed to do and that was to remove the hidden div with something like
$('#divid').detach();

This updated the html to remove the deleted window. I then did the following
var data = $('#docking').jqxDocking('exportLayout'); $.ajax({ type: 'post', url: "Home/SaveData", dataType: 'json', data: { layout: data}, cache: false, success: function () { } });
And that passed back the updated JSON to my controller code.

August 22, 2012 at 11:14 am in reply to: Fire closewindow event Fire closewindow event #7013

GDHafeleUK
Member

So ‘close’ just sets the panel’s visibility to none?
I’m trying to save the layout to a database and on close event in the callback function I’m trying to export the layout with exportLayout, but the layout in effect hasn’t changed!

$(document).ready(function () {
@: $(‘#@item.Sequence’).bind(‘close’, function (event) {
@: DeleteWidget(‘@item.WidgetID’);
@: });

The deletewidget uses ajax to call a function on the server to delete the actual widget from my database, all works fine.
The problem is in the else condition as the exportLayout is still the same, after deleting the widget, I need the page to update without the deleted widget, any ideas?

function DeleteWidget(widgetID) { $.ajax({ type: 'post', url: "Home/DeleteWidget", dataType: 'json', data: { widgetID: widgetID}, cache: false, success: function (data) { if(data.KPI == null) { $('#jqxWidget').empty(); $('#noKPI').prepend('You do not have any KPIs set up. Please choose some KPIs from the list below.'); } else { var data = $('#docking').jqxDocking('exportLayout');
} } }); }

August 21, 2012 at 11:17 am in reply to: Fire closewindow event Fire closewindow event #6947

GDHafeleUK
Member

Thanks,

I will have to do this in a loop as my windows are dynamic, so I won’t know how many are on screen.
I will give it a go.
Thanks,
GD

August 21, 2012 at 8:48 am in reply to: Docking in columns Docking in columns #6927

GDHafeleUK
Member

Hi

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

Cheers,
Glen
Author

Posts

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