User Control Inside JQxDocking

[fresherParticipant]

Hi,

1.I’m unable to load a user control inside a window , getting distorted (overlapping with other windows)
2.How to adjust the size of my usercontrol inside a window?
3.I have tried a sample of Default Functionality sample in JqxDocking , I cannot add collapse buttons
I added $(‘#docking’).jqxDocking(‘showAllCloseButtons’); even though I cannot see them

4.Can we add windows Dynamically from front end ?

ASAP

Thanks in advance…!

[Peter StoevKeymaster]

Hi fresher,

I suggest you to look at the Docking’s demos. There are widgets inside the docking windows. The size of the widgets is also set. “showAllCloseButtons” is true by default. This is a property and your code will return true. Sample with collapse buttons: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdocking/jquery-docking-settings.htm?arctic

Best Regards,
Peter Stoev

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

[fresherParticipant]

Can you please share a link that demo user controls inside a window ,I cannot find in Docking demos.

Here is my code

<div id=”window0″ style=”height: 150px”>
<div>
ChartControl
</div>
<div>
<%–HEllo–%>
<ucChart:StackedChart ID=”chartControll” runat=”server” />
</div>
</div>

[Peter StoevKeymaster]

Hi fresher,

All demos are with controls/widgets – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdocking/index.htm

Best Regards,
Peter Stoev

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

[fresherParticipant]

Here is my code , could you please assist me where it went wrong….!!

1.My Main Page

<%@ Page Title=”” Language=”C#” MasterPageFile=”~/Site.Master” AutoEventWireup=”true”
CodeBehind=”JqDocking2.aspx.cs” Inherits=”JQChartss.JqDocking2″ %>

<%@ Register Src=”~/ucStackelineChart.ascx” TagName=”StackedChart” TagPrefix=”ucChart” %>
<asp:Content ID=”Content1″ ContentPlaceHolderID=”HeadContent” runat=”server”>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”server”>
<meta name=”keywords” content=”jqxDocking, jQuery Docking, jQWidgets, Events” />
<meta name=”description” content=”jqxDocking has events which are connected with some actions on the windows inside. Common events which probably you’ll need
to handle are the dragEnd and dragStart event. You can see these events down in the demo.” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<title id=’Description’>Docking Keyboard Navigation.</title>
<link rel=”stylesheet” href=”jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”Scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”Scripts/demos.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/jqxdocking.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/jqxdata.js”></script>
<script type=”text/javascript” src=”JqWidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”JqWidgets/jqxchart.core.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘#docking’).jqxDocking({ keyboardNavigation: true, orientation: ‘horizontal’, width: 650, mode: ‘default’ ,windowsMode: { window0: ‘floating’} });
$(“#docking”).jqxDocking(‘showAllCollapseButtons’);
$(‘#docking’).jqxDocking(‘enable’);
$(“#docking”).jqxDocking(‘focus’);
});
</script>
<div id=”docking”>
<div>
<div id=”window0″ style=”height: 150px”>
<div>
ChartControl
</div>
<div>
<ucChart:StackedChart ID=”chartControll” runat=”server” />
</div>
</div>
<div id=”window1″ style=”height: 150px”>
<div>
Database management system
</div>
<div>
A database management system (DBMS) is a software package with computer programs
that control the creation, maintenance, and the use of a database. It allows organizations
to conveniently develop databases…
</div>
</div>
</div>
<div>
<div id=”window2″ style=”height: 150px”>
<div>
RISC
</div>
<div>
Some aspects attributed to the first RISC-labeled designs around 1975 include the
observations that the memory-restricted compilers of the time were often unable
to take advantage…
</div>
</div>
</div>
</div>
<br />
<br />
</asp:Content>

2.User Control

<%@ Control Language=”C#” AutoEventWireup=”true” CodeBehind=”ucStackelineChart.ascx.cs” Inherits=”JQChartss.ucStackelineChart” %>

<link href=”jqx.base.css” type=”text/css” rel=”stylesheet” />
<script type=”text/javascript” src=”jquery-1.10.2.js”></script>
<script type=”text/javascript” src=”jqxcore.js”></script>
<%–<script type=”text/javascript” src=”jqxchart.js”></script>–%>
<script type=”text/javascript” src=”jqxdata.js”></script>
<script type=”text/javascript” src=”jqxdraw.js”></script>
<script type=”text/javascript” src=”jqxchart.core.js”></script>
<%–<script type=”text/javascript” src=”jqxall.js”></script>–%>
<script type=”text/javascript”>
$(document).ready(function () {

// Checks whether an array contains object: false if contains & true if it does’nt contains
function contains(a, obj) {
for (var i = 0; i < a.length; i++) {
if (a[i] === obj) {
return false;
}
}
return true;
}

function indexOfElement(a, obj) {
for (var i = 0; i < a.length; i++) {
if (a[i] === obj) {
return i;
}
}
return “”;
}

var sampleData = [
{
“SiteId”: “1”,
“Year”: “2012”,
“Amount”: “15.80004”,
“Percentage”: 0.00007517660185636339
},
{
“SiteId”: “2”,
“Year”: “2012”,
“Amount”: “35.14068”,
“Percentage”: 0.495865231449349
},
{
“SiteId”: “2”,
“Year”: “2013”,
“Amount”: “45.14610”,
“Percentage”: 6.021379085165576
},
{
“SiteId”: “2”,
“Year”: “2014”,
“Amount”: “65.91208”,
“Percentage”: 5.100533542388375
},
{
“SiteId”: “3”,
“Year”: “2014”,
“Amount”: “87.80100”,
“Percentage”: 2.5590754718656226
},
{
“SiteId”: “3”,
“Year”: “2012”,
“Amount”: “75.80100”,
“Percentage”: 1.569754718656226
},
{
“SiteId”: “4”,
“Year”: “2012”,
“Amount”: “65.80100”,
“Percentage”: 1.9790754718656226
},
{
“SiteId”: “4”,
“Year”: “2014”,
“Amount”: “83.80100”,
“Percentage”: 1.5290754718656226
}
]

var source =
{
datatype: “json”,
datafields: [
{ name: ‘SiteId’ },
{ name: ‘Year’ },
{ name: ‘Amount’, type: “number” },
{ name: ‘Percentage’, type: “number” }
],
localdata: sampleData
// url: ‘SpenDataFromAPI.txt’
};

//Initializing the arrays
var myRecords = [];
var YearArray = [];
var siteArray = [];
var seriesArray = [];

// Modifying Raw Data in to required Format
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true,
beforeLoadComplete: function (records) {
for (var j = 0; j < records.length; j++) {
// item = {};
//item[“Year”] = records[j].Year;
// if ($.inArray(records[j].SiteId, siteArray)!=”-1″)
if (contains(siteArray, records[j].SiteId))
siteArray.push(records[j].SiteId);
if (contains(YearArray, records[j].Year))
YearArray.push(records[j].Year);
}

//Preparing Formatted Data
for (var i = 0; i < YearArray.length; i++) {
item = {};
item[“Year”] = YearArray[i];
for (var j = 0; j < siteArray.length; j++) {
item[“Site” + siteArray[j]] = 0;

}
myRecords.push(item);
}

//Preparing Dynamic Series
for (var j = 0; j < siteArray.length; j++) {
itemSeries = {};
itemSeries[“dataField”] = “Site” + siteArray[j];
itemSeries[“displayText”] = “Site” + siteArray[j];
seriesArray.push(itemSeries);
}

for (var i = 0; i < records.length; i++) {
var currentRecord = records[i];

var index = indexOfElement(YearArray, currentRecord.Year);
if (index) {
myRecords[index][“Site” + currentRecord.SiteId] = parseFloat(currentRecord.Amount);
}
}
return myRecords;
},
loadError: function (xhr, status, error) {
alert(‘Error loading “‘ + source.url + ‘” : ‘ + error);
}
});

var settings = {
title: “Site Amount”,
description: “by year”,
showLegend: true,
enableAnimations: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
xAxis:
{
dataField: ‘Year’,
showGridLines: true
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘column’,
columnsGapPercent: 50,
valueAxis:
{
unitInterval: 100,
displayValueAxis: true,
description: ‘Site Amount’
},
series: seriesArray
}
]
};

// setup the chart
$(‘#chartContainer’).jqxChart(settings);

});
</script>
<div id=’chartContainer’ style=”width: 850px; height: 500px;”>
</div>

I have loaded my user control in normal page and its displaying chart but when I load in a docking window, I have been getting charts in a distorted format…!

[Peter StoevKeymaster]

Hi fresher,

If you mean ASP .NET user control -we don’t have demo about this. If your charts are distorted, check whether all references to required JavaScript and CSS files are correct and whether you put DOCTYPE on your page/control.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[fresherParticipant]

Even after adding doctype getting isssue, my chart is going out and overlapping and I cannot see any windows only text which I gave in windows is visible

Here are my references

Main Page

<script type=”text/javascript” src=”Scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”Scripts/demos.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/jqxdocking.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/jqxdata.js”></script>
<script type=”text/javascript” src=”JqWidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”JqWidgets/jqxchart.core.js”></script>

User Control Page

<link href=”jqx.base.css” type=”text/css” rel=”stylesheet” />
<script type=”text/javascript” src=”jquery-1.10.2.js”></script>
<script type=”text/javascript” src=”jqxcore.js”></script>
<%–<script type=”text/javascript” src=”jqxchart.js”></script>–%>
<script type=”text/javascript” src=”jqxdata.js”></script>
<script type=”text/javascript” src=”jqxdraw.js”></script>
<script type=”text/javascript” src=”jqxchart.core.js”></script>

I have a question here, as I have given same references both in user control and main page will there be any conflict of js files?

can you provide a source code to load a asp.net user control???

ASAP

Thanks in advance..!

[Peter StoevKeymaster]

Hi fresher,

As I wrote, we do not have an example with ASP .NET User Control.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[fresherParticipant]

So Can I infer that JQWidgets do not support ASP.Net user controls in dashboards as widgets??

If you can confirm that things will be easy or else please assist me as I have attached the code

I need to demo my stakeholders , as they have a plan of buying official license.

[Peter StoevKeymaster]

Hi fresher,

I just wrote you that we do not have the exact example which you are looking for. We have 1000+ demos but we still do not have example for every application scenario. Chart distortion can happen only when all the required references are not loaded, the Chart is used incorrectly or you are missing important parts of the web page such as DOCTYPE or you have some CSS which conficts with the Chart’s CSS. We have samples on the Documentation page which illustrate that the Chart works correctly with ASP.NET and we also have online ASP .NET MVC5 demos with jqxChart working there, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[fresherParticipant]

Hi ,

Ya I can understand that , the references in user control and Main page are conflicting and I’m getting the issue.

Now How can I resolve that ,
without references in User Control Chart Cannot be loaded and references in Main page cannot be removed as they are for docking.

How can I prevent the conflict between the references of different jqxwidgets javascript references??

[DimitarParticipant]

Hello fresher,

We have prepared an example for you, which demonstrates a jqxDocking in the main page (Default.aspx) and a jqxChart inside one of the docking’s windows, which is loaded from a User Control (UserControl.ascx).

Default.aspx:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<%@ Register TagPrefix="uc" TagName="SampleUserControl" Src="~/UserControl.ascx" %>
<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
    <link type="text/css" rel="stylesheet" href="Content/jqx.base.css" />
    <script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="Scripts/jqxcore.js"></script>
    <script type="text/javascript" src="Scripts/jqxwindow.js"></script>
    <script type="text/javascript" src="Scripts/jqxdocking.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#docking").jqxDocking({ width: 500 });
        });
    </script>
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1><%: Title %>.</h1>
                <h2>Modify this template to jump-start your ASP.NET application.</h2>
            </hgroup>
            <p>
                To learn more about ASP.NET, visit <a href="http://asp.net" title="ASP.NET Website">http://asp.net</a>.
                The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET.
                If you have any questions about ASP.NET visit
                <a href="http://forums.asp.net/18.aspx" title="ASP.NET Forum">our forums</a>.
            </p>
        </div>
    </section>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <div id="docking">
        <div>
            <div id="window1" style="height: 400px;">
                <div>Header 1</div>
                <div>
                    <uc:SampleUserControl ID="chartControl" runat="server" />
                </div>
            </div>
            <div id="window2">
                <div>Header 2</div>
                <div>Content 2</div>
            </div>
        </div>
    </div>

</asp:Content>

UserControl.ascx:

<%@  Control Language="C#" ClassName="SampleUserControl" %>
<script type="text/javascript" src="Scripts/jqxdata.js"></script>
<script type="text/javascript" src="Scripts/jqxdraw.js"></script>
<script type="text/javascript" src="Scripts/jqxchart.core.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // prepare chart data as an array
        var sampleData = [
                { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
                { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
                { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
                { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
                { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
                { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
                { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
        ];
        // prepare jqxChart settings
        var settings = {
            title: "Fitness & exercise weekly scorecard",
            description: "Time spent in vigorous exercise",
            enableAnimations: true,
            showLegend: true,
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
            source: sampleData,
            xAxis:
                {
                    dataField: 'Day',
                    showGridLines: true
                },
            colorScheme: 'scheme01',
            seriesGroups:
                [
                    {
                        type: 'column',
                        columnsGapPercent: 50,
                        seriesGapPercent: 0,
                        valueAxis:
                        {
                            unitInterval: 10,
                            minValue: 0,
                            maxValue: 100,
                            displayValueAxis: true,
                            description: 'Time in minutes',
                            axisSize: 'auto',
                            tickMarksColor: '#888888'
                        },
                        series: [
                                { dataField: 'Keith', displayText: 'Keith' },
                                { dataField: 'Erica', displayText: 'Erica' },
                                { dataField: 'George', displayText: 'George' }
                        ]
                    }
                ]
        };

        // setup the chart
        $('#jqxChart').jqxChart(settings);
    });
</script>

<div id="jqxChart" style="width: 420px; height: 320px;">
</div>

Best Regards,
Dimitar

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

[fresherParticipant]

Hi Dimitar,

Thanks for your support ..!

Can we add widgets dynamically from front end?

We are currently using kalitte Dynamic Dashboards, which support adding widgets directly from front end .

Thanks.

[DimitarParticipant]

Hi fresher,

Widgets can only be added programmatically, using their respective APIs.

Best Regards,
Dimitar

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

[fresherParticipant]

Hi Dimitar

Everything is working fine , but how can I maintain the state of widgets (windows).

I have rearranged the windows in docking and when I fire a server side event on a button click , again the windows come back to original state.

Do we have any properties to maintain the state?

[Author]

Posts