[fresherParticipant]

Hi ,

I have been using auroresizeColumns in binding complete event and getting an unCaught exception

uncaught TypeError: Cannot read property ‘length’ of undefined in jqxall.js

using version 4.0+

$(“jqxGrid”).on(‘bindingcomplete’, function (event) {
alert(“Binding is completed”);
$(“jqxGrid”).jqxGrid(‘autoresizecolumns’);
});

[fresherParticipant]

Hi ,

I have applied autoresize but grid width is not taking 100%, initially it took 1005 of div but after applying autoresize property the width is getting shrinked,

you can see here http://jsfiddle.net/jqwidgets/ZyaQF/ , just add with ‘100%’ and check after clicking “Auto-Resize Columns”..

So any even after applying auto-resize , how can I maintain 100% width??

[fresherParticipant]

Hi ,

I Would like to know whether Drag and Drop File upload is available in latest version of jqwidgets?

[fresherParticipant]

That is not what I’m looking for…

This is the one I want staticColumn sWith data

but In that example I can see only header column but I want in all rows that add and reset link button .

[fresherParticipant]

Hi Dimitar Same Isssue For me ,

I would Like to add Two columns Add and Delete , I have around 45Thousand Records , So Is there any alternative other than looping through it and adding the column to json

Can I add Statically???

$(“#jqxgrid”).jqxGrid(
columns: [
{ text: ‘Add’, cellsrenderer: linkrenderer },
{ text: ‘Delete’, cellsrenderer: linkrenderer },
// Other Columns
]

});

I have written like this In linkReneder Function I can get Value from data that is binded using Row number but in

I can only see column header but not rows with columns (Add,Delete )

[fresherParticipant]

Hi

ya fine..!

I have tried in http://jsfiddle.net/jqwidgets/HpawJ/ adding existing window window3 I couldnt add it .

Mean while I tried to load my user control(asp.net usercontrol with a jqxChart) in a dashboard which we use , I have been getting following issue in jqxChart.js

“JavaScript runtime error: Unable to get property ‘replace’ of undefined or null reference”

Can you help in figuring out what could be the possible issue?

[fresherParticipant]

Hi sheng 63

I have 2 windows follwing code..

<div id=’jqxWidget’>
<div id=”docking”>
<div>
<div id=”window1″ style=”height: 220px;”>
<div>
Stacked Chart
</div>
<div>
<ucChart:StackedChart ID=”chartControl” runat=”server” />
</div>
</div>
<div id=”window2″ style=”height: 220px”>
<div>
Bubble Chart
</div>
<div>
<ucBubbleChart:BubbleChart ID=”BubbleChart1″ runat=”server” />
</div>
</div>
</div>
</div>

I would like to add a maximize button , I have added following code in my page doc ready function

$(“<div id=’btnWindowFull’ style=’float: left; width:16px; height:16px; margin-right:5px;’ class=\”jqx-icon-full\”></div>”).insertBefore(“#window1.jqx-window-close-button”);
$(“<div id=’btnWindowMax’ style=’float: left; width:16px; height:16px; margin-right:5px;’ class=\”jqx-icon-expand\”></div>”).insertBefore(“#window1.jqx-window-close-button”);

$(“#theBtn”).on(‘click’, function () {
$(“#window1.jqx-window-close-button-background”).css(“width”, “58px”);
setTimeout(function () { $(“#theWin.jqx-window-close-button-background”).css(“width”, “58px”); }, 1000);
$(“#window1.jqx-window-close-button”).css({ float: “left”, width: “16px”, height: “16px” });
});

I coud’nt understand where to add “theBtn ” control , could you please elaborate the process of adding a custom button in jqxwindow header step wise !

Thanks..!

[fresherParticipant]

Hi,

Thanks ! Can you please elaborate the exact addwindow functionality ? what it does ?

The 1st parameter Id : do we need to give the id of an existing window?

In http://jsfiddle.net/jqwidgets/HpawJ/. this we already have a div with window3

If I give $(‘#jqxDocking’).jqxDocking(‘addWindow’, ‘window4’, ‘default’, 1, 1); Do we get another window??? If not then what excatly add window does?

Thanks in advance

[fresherParticipant]

Hi

I’m using addwindow Method to add another window dynamically on a click event

$(‘#docking’).jqxDocking(‘addWindow’, ‘window4’, ‘default’, 1, 1); where window4 is the id of an existing window

I’m getting follwing error redirecting to jqxcore.js file

JavaScript runtime error: Object doesn’t support property or method ‘split’

(If I give new ID I’m getting error as JavaScript runtime error: Invalid Selector – #window5! Please, check whether the used ID or CSS Class name is correct.)

[fresherParticipant]

Hi,

Thanks Can we have a custom button like “Maximze” beside collapse and close buttons?

[fresherParticipant]

Hi

Do we have any method Only to export the position X and Y of a window ?

Like “setWindowPosition” , do we have any get method?

[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?

[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.

[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??

[fresherParticipant]

Hi Dimitar,

That was awesome , it helped me…

I have loaded the chart in a asp.net user control and when I try to load in a widget in JQXDocking window, the whole chart getting distorted and coming out of the window. I knew its due to the conflict of css or reference js files but I couldn’t figure out the exact issue . Kindly help me

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>

Should I include references in both USer control and Main page?I have added DOCTYPE etc but its not working

When I load usercontrol in a empty page , it was working fine but when I load in a jqxdockjing window I’m facing issues.

Thanks

[Author]

Posts