jQWidgets Forums

Forum Replies Created

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

Author

Posts
December 10, 2015 at 12:13 pm in reply to: Fail to bind data to jqxgrid in IE11 Fail to bind data to jqxgrid in IE11 #79182

sangad
Participant

Hi Peter,
Can you provide me the code of export
I didnt find it in source code.
Please provide the code and save-file.php and steps to integrate in asp.net application.

We have the License copy of jqwidget

December 10, 2015 at 9:07 am in reply to: Fail to bind data to jqxgrid in IE11 Fail to bind data to jqxgrid in IE11 #79175

sangad
Participant

Hi Peter,
My application in ASP.Net how can i integrate save-file.php
in asp.net application

December 10, 2015 at 6:39 am in reply to: Fail to bind data to jqxgrid in IE11 Fail to bind data to jqxgrid in IE11 #79154

sangad
Participant

Hi Peter Stoev,
Please go through my code and let me know where i am going wrong

December 10, 2015 at 6:38 am in reply to: Fail to bind data to jqxgrid in IE11 Fail to bind data to jqxgrid in IE11 #79153

sangad
Participant

Hi Peter Stoev,
i dont think so .width .animate,.html,.innerhtml
affecting performnace of my page.because it use less time on page

December 10, 2015 at 6:33 am in reply to: Performance issue Performance issue #79152

sangad
Participant

Here are the issues that i am facing.
1. Not able to load record more than 10000 in IE
2. Export not work for large data.
3. Chart synchronisation with grid take much time while filter grouping

please suggest me the solution.
we have license copy of jqwidget but not able to handle such scenario smoothly.

Below is the complete code for 10000 record.
Not able to create fiddle because of http url
—————————————————————————————-

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head id=”Head1″>
<link href=”../Common/Styles.css” type=”text/css” rel=”stylesheet” />
<link rel=”stylesheet” href=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxloader.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsreorder.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.export.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.export.js”></script>
</head>
<body>
<table id=”tblAssetList” cellpadding=”2″ cellspacing=”0″ border=”0″ summary=”” width=”100%”>
<tr>
<td valign=”top” align=”left”>
<div id=’AssetPieChart’ style=”width: 850px; height: 500px;”>
</div>
</td>
</tr>
<tr>
<td valign=”top” align=”left”>
<div>
<div id=”jqxlistbox” style=”float: left;”>
</div>
<div style=”width: 10px; float: left;”>

>>
</div>
<div style=”margin-left: 10px; float: right;” id=”grdAllAsset”>
</div>
</div>
</td>
</tr>
<tr>
<td valign=”top” align=”right”>
<div style=’float: right;’>
<input type=”button” value=”Export to Excel” id=’excelExport’ />
<input type=”button” value=”Export to XML” id=’xmlExport’ />
</div>
</td>
</tr>
</table>
</body>
<script type=”text/javascript”>
var sourcedata;

$(document).ready(function () {
BindAssetGrid();
$(“#jqxlistbox”).animate({
width: 0,
height: 0
});
// $(“#jqxlistbox”).css(“display”, “none”);
});

//Bind the grid with Asset count
function BindAssetGrid() {
try {
var data = new Array();

var firstNames =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];

var lastNames =
[
“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
];

var productNames =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Cramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];

var priceValues =
[
“2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”
];

for (var i = 0; i < 30000; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);

row[“id”] = i;
row[“firstname”] = firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[“productname”] = productNames[productindex];
row[“price”] = price;
row[“quantity”] = quantity;
row[“total”] = price * quantity;

data[i] = row;
}

var source =
{
localdata: data,
datafields:
[
{ name: ‘id’, type: ‘number’},
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ },
{ name: ‘total’, type: ‘number’ }
],
datatype: “array”
};

var dataAdapter = new $.jqx.dataAdapter(source);
var exampleTheme;

///////////////// Custom Filter////////////////////////////
var buildFilterPanel = function (filterPanel, datafield) {
var textInput = $(“<input style=’margin:5px;’/>”);
var applyinput = $(“<div class=’filter’ style=’height: 25px; margin-left: 20px; margin-top: 7px;’></div>”);
var filterbutton = $(‘<span tabindex=”0″ style=”padding: 4px 12px; margin-left: 2px;”>Filter</span>’);
applyinput.append(filterbutton);
var filterclearbutton = $(‘<span tabindex=”0″ style=”padding: 4px 12px; margin-left: 5px;”>Clear</span>’);
applyinput.append(filterclearbutton);
filterPanel.append(textInput);
filterPanel.append(applyinput);
filterbutton.jqxButton({ theme: exampleTheme, height: 20 });
filterclearbutton.jqxButton({ theme: exampleTheme, height: 20 });
var dataSource =
{
localdata: dataAdapter.records,
datatype: “json”,
async: false
}
var dataadapter1 = new $.jqx.dataAdapter(dataSource,
{
autoBind: false,
autoSort: true,
autoSortField: datafield,
async: false,
uniqueDataFields: [datafield]
});
var column = $(“#grdAllAsset”).jqxGrid(‘getcolumn’, datafield);
textInput.jqxInput({ theme: exampleTheme, placeHolder: “Enter ” + column.text, popupZIndex: 9999999, displayMember: datafield, source: dataadapter1, height: 23, width: 175 });
textInput.keyup(function (event) {
if (event.keyCode === 13) {
filterbutton.trigger(‘click’);
}
});
filterbutton.click(function () {
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = textInput.val();
var filtercondition = ‘contains’;
var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
// add the filters.
$(“#grdAllAsset”).jqxGrid(‘addfilter’, datafield, filtergroup);
// apply the filters.
$(“#grdAllAsset”).jqxGrid(‘applyfilters’);
$(“#grdAllAsset”).jqxGrid(‘closemenu’);
});
filterbutton.keydown(function (event) {
if (event.keyCode === 13) {
filterbutton.trigger(‘click’);
}
});
filterclearbutton.click(function () {
$(“#grdAllAsset”).jqxGrid(‘removefilter’, datafield);
// apply the filters.
$(“#grdAllAsset”).jqxGrid(‘applyfilters’);
$(“#grdAllAsset”).jqxGrid(‘closemenu’);
});
filterclearbutton.keydown(function (event) {
if (event.keyCode === 13) {
filterclearbutton.trigger(‘click’);
}
textInput.val(“”);
});
};

//////////////// END Custom Filter ////////////////////////////////

$(“#grdAllAsset”).jqxGrid({
source: dataAdapter,
width: ($(‘#tblAssetList’).width() – 40),
sortable: true,
groupable: true,
autoheight: true,
columnsresize: true,
filterable: true,
showstatusbar: true,
renderstatusbar: function (statusbar) {
var rowCount = $(“#grdAllAsset”).jqxGrid(‘getrows’).length;
statusbar.append(‘<div style=”margin: 5px;”>Count: <span id=”rowsCountSpan”>’ + rowCount + ‘</span></div>’);
},
// groupsrenderer: groupsrenderer,
columnsreorder: true,
columns: [{ text: ‘ID’, datafield: ‘id’, filtertype: “custom”, createfilterpanel: function (datafield, filterPanel) {
buildFilterPanel(filterPanel, datafield);
}
},
{ text: ‘First Name’, datafield: ‘firstname’, filtertype: “custom”, createfilterpanel: function (datafield, filterPanel) {
buildFilterPanel(filterPanel, datafield);
}
},
{ text: ‘Last Name’, datafield: ‘lastname’, filtertype: “custom”, createfilterpanel: function (datafield, filterPanel) {
buildFilterPanel(filterPanel, datafield);
}
},
{ text: ‘Product Name’, datafield: ‘productname’, hidden: true, filtertype: “custom”, createfilterpanel: function (datafield, filterPanel) {
buildFilterPanel(filterPanel, datafield);
}
},
{ text: ‘Quantity’, datafield: ‘quantity’, hidden: true, filtertype: “custom”, createfilterpanel: function (datafield, filterPanel) {
buildFilterPanel(filterPanel, datafield);
}
}
],
groups: [‘firstname’]
});
}
catch (e) {

}
AssetPieChart();

var listSource = [{ label: ‘Id’, value: ‘id’, checked: ture }
{ label: ‘First Name’, value: ‘firstname’, checked: true },
{ label: ‘Last Name’, value: ‘lastname’, checked: true },
{ label: ‘Product Name’, value: ‘productname’, checked: false},
{ label: ‘Quantity’, value: ‘quantity’, checked: false },

];

$(“#jqxlistbox”).jqxListBox({ source: listSource, width: 200, checkboxes: true });
$(“#jqxlistbox”).on(‘checkChange’, function (event) {
$(“#grdAllAsset”).jqxGrid(‘beginupdate’);
if (event.args.checked) {
$(“#grdAllAsset”).jqxGrid(‘showcolumn’, event.args.value);
}
else {
$(“#grdAllAsset”).jqxGrid(‘hidecolumn’, event.args.value);
}
$(“#grdAllAsset”).jqxGrid(‘endupdate’);
});

$(“#grdAllAsset”).on(“groupschanged”, function (event) {
if (event.args.groups[0] != undefined) {
AssetPieChart();
}
});

$(“#grdAllAsset”).on(“filter”, function (event) {

AssetPieChart();

$(“#grdAllAsset”).jqxGrid({
renderstatusbar: function (statusbar) {
statusbar.empty();
var rowCount = $(“#grdAllAsset”).jqxGrid(‘getrows’).length;
statusbar.append(‘<div style=”margin: 5px;”>Count: <span id=”rowsCountSpan”>’ + rowCount + ‘</span></div>’);
}
});
});

$(“#excelExport”).jqxButton();
$(“#xmlExport”).jqxButton();

$(“#excelExport”).click(function () {
$(“#grdAllAsset”).jqxGrid(‘exportdata’, ‘xls’, ‘jqxGrid’);
});
$(“#xmlExport”).click(function () {
$(“#grdAllAsset”).jqxGrid(‘exportdata’, ‘xml’, ‘jqxGrid’);
});

}

function AssetPieChart() {
try {
var chartSource = “[“;
var group;
var count = $(“#grdAllAsset”).jqxGrid(‘getrootgroupscount’);
for (var i = 0; i < count; i++) {
group = $(“#grdAllAsset”).jqxGrid(‘getgroup’, i);
chartSource = chartSource + “{\”strCount\”:” + group.subrows.length + “,\”strDisplayField\”:\”” + group.group + “\”},”;
};
chartSource = chartSource.substring(0, chartSource.length – 1);
chartSource = chartSource + “]“;
var source =
{
dataType: ‘json’,
type: “GET”,
datafields: [{ name: ‘strCount’ },
{ name: ‘strDisplayField’ }
],
localdata: chartSource
};
var dataAdapter = new $.jqx.dataAdapter(source);
// prepare jqxChart settings
var settings = {
title: “Asset[s]“,
description: “”,
enableAnimations: true,
showLegend: true,
showBorderLine: false,
legendLayout: { left: 700, top: 10, width: 300, height: 800, flow: ‘vertical’ },
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
colorScheme: ‘scheme02′,
seriesGroups:
[
{
type: ‘pie’,
showLabels: true,
series:
[
{
dataField: ‘strCount’,
displayText: ‘strDisplayField’,
labelRadius: 170,
initialAngle: 15,
radius: 145,
centerOffset: 0
}
]
}
]
};
// setup the chart
$(‘#AssetPieChart’).jqxChart(settings);
}
catch (e) {
}
};

function Toggle() {

if ($(“#hypToggle”)[0].innerText == “>>”) {
$(“#grdAllAsset”).jqxGrid({
width: $(‘#tblAssetList’).width() – 240
});

$(“#jqxlistbox”).animate({
width: 200,
height: 200
});
$(“#hypToggle”).html(“<<<”);
}
else {
$(“#grdAllAsset”).jqxGrid({
width: $(‘#tblAssetList’).width() – 30
});

$(“#jqxlistbox”).animate({
width: 0,
height: 0
});
// $(“#jqxlistbox”).css(“display”, “”);
$(“#hypToggle”).html(“>>”);
}
}
</script>
</html>

December 10, 2015 at 6:21 am in reply to: Fail to bind data to jqxgrid in IE11 Fail to bind data to jqxgrid in IE11 #79141

sangad
Participant

Hi Peter Stoev,
Here are the issues that i am facing.
1. Not able to lad record more than 10000 in IE
2. Export not work for large data.
3. Chart synchronisation with grid take much time while filter grouping

please suggest me the solution.
we have license copy of jqwidget but not able to handle such scenario smoothly.

December 10, 2015 at 6:15 am in reply to: Fail to bind data to jqxgrid in IE11 Fail to bind data to jqxgrid in IE11 #79140

sangad
Participant

Hi Peter Stoev,
Here is my complete code for 10000 record

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head id=”Head1″>
<link href=”../Common/Styles.css” type=”text/css” rel=”stylesheet” />
<link rel=”stylesheet” href=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxloader.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsreorder.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.export.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.export.js”></script>
</head>
<body>
<table id=”tblAssetList” cellpadding=”2″ cellspacing=”0″ border=”0″ summary=”” width=”100%”>
<tr>
<td valign=”top” align=”left”>
<div id=’AssetPieChart’ style=”width: 850px; height: 500px;”>
</div>
</td>
</tr>
<tr>
<td valign=”top” align=”left”>
<div>
<div id=”jqxlistbox” style=”float: left;”>
</div>
<div style=”width: 10px; float: left;”>

>>
</div>
<div style=”margin-left: 10px; float: right;” id=”grdAllAsset”>
</div>
</div>
</td>
</tr>
<tr>
<td valign=”top” align=”right”>
<div style=’float: right;’>
<input type=”button” value=”Export to Excel” id=’excelExport’ />
<input type=”button” value=”Export to XML” id=’xmlExport’ />
</div>
</td>
</tr>
</table>
</body>
<script type=”text/javascript”>
var sourcedata;

$(document).ready(function () {
BindAssetGrid();
$(“#jqxlistbox”).animate({
width: 0,
height: 0
});
// $(“#jqxlistbox”).css(“display”, “none”);
});

//Bind the grid with Asset count
function BindAssetGrid() {
try {
var data = new Array();

var firstNames =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];

var lastNames =
[
“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
];

var productNames =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Cramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];

var priceValues =
[
“2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”
];

for (var i = 0; i < 30000; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);

row[“id”] = i;
row[“firstname”] = firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[“productname”] = productNames[productindex];
row[“price”] = price;
row[“quantity”] = quantity;
row[“total”] = price * quantity;

data[i] = row;
}

var source =
{
localdata: data,
datafields:
[
{ name: ‘id’, type: ‘number’},
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ },
{ name: ‘total’, type: ‘number’ }
],
datatype: “array”
};

var dataAdapter = new $.jqx.dataAdapter(source);
var exampleTheme;

///////////////// Custom Filter////////////////////////////
var buildFilterPanel = function (filterPanel, datafield) {
var textInput = $(“<input style=’margin:5px;’/>”);
var applyinput = $(“<div class=’filter’ style=’height: 25px; margin-left: 20px; margin-top: 7px;’></div>”);
var filterbutton = $(‘<span tabindex=”0″ style=”padding: 4px 12px; margin-left: 2px;”>Filter</span>’);
applyinput.append(filterbutton);
var filterclearbutton = $(‘<span tabindex=”0″ style=”padding: 4px 12px; margin-left: 5px;”>Clear</span>’);
applyinput.append(filterclearbutton);
filterPanel.append(textInput);
filterPanel.append(applyinput);
filterbutton.jqxButton({ theme: exampleTheme, height: 20 });
filterclearbutton.jqxButton({ theme: exampleTheme, height: 20 });
var dataSource =
{
localdata: dataAdapter.records,
datatype: “json”,
async: false
}
var dataadapter1 = new $.jqx.dataAdapter(dataSource,
{
autoBind: false,
autoSort: true,
autoSortField: datafield,
async: false,
uniqueDataFields: [datafield]
});
var column = $(“#grdAllAsset”).jqxGrid(‘getcolumn’, datafield);
textInput.jqxInput({ theme: exampleTheme, placeHolder: “Enter ” + column.text, popupZIndex: 9999999, displayMember: datafield, source: dataadapter1, height: 23, width: 175 });
textInput.keyup(function (event) {
if (event.keyCode === 13) {
filterbutton.trigger(‘click’);
}
});
filterbutton.click(function () {
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = textInput.val();
var filtercondition = ‘contains’;
var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
// add the filters.
$(“#grdAllAsset”).jqxGrid(‘addfilter’, datafield, filtergroup);
// apply the filters.
$(“#grdAllAsset”).jqxGrid(‘applyfilters’);
$(“#grdAllAsset”).jqxGrid(‘closemenu’);
});
filterbutton.keydown(function (event) {
if (event.keyCode === 13) {
filterbutton.trigger(‘click’);
}
});
filterclearbutton.click(function () {
$(“#grdAllAsset”).jqxGrid(‘removefilter’, datafield);
// apply the filters.
$(“#grdAllAsset”).jqxGrid(‘applyfilters’);
$(“#grdAllAsset”).jqxGrid(‘closemenu’);
});
filterclearbutton.keydown(function (event) {
if (event.keyCode === 13) {
filterclearbutton.trigger(‘click’);
}
textInput.val(“”);
});
};

//////////////// END Custom Filter ////////////////////////////////

$(“#grdAllAsset”).jqxGrid({
source: dataAdapter,
width: ($(‘#tblAssetList’).width() – 40),
sortable: true,
groupable: true,
autoheight: true,
columnsresize: true,
filterable: true,
showstatusbar: true,
renderstatusbar: function (statusbar) {
var rowCount = $(“#grdAllAsset”).jqxGrid(‘getrows’).length;
statusbar.append(‘<div style=”margin: 5px;”>Count: <span id=”rowsCountSpan”>’ + rowCount + ‘</span></div>’);
},
// groupsrenderer: groupsrenderer,
columnsreorder: true,
columns: [{ text: ‘ID’, datafield: ‘id’, filtertype: “custom”, createfilterpanel: function (datafield, filterPanel) {
buildFilterPanel(filterPanel, datafield);
}
},
{ text: ‘First Name’, datafield: ‘firstname’, filtertype: “custom”, createfilterpanel: function (datafield, filterPanel) {
buildFilterPanel(filterPanel, datafield);
}
},
{ text: ‘Last Name’, datafield: ‘lastname’, filtertype: “custom”, createfilterpanel: function (datafield, filterPanel) {
buildFilterPanel(filterPanel, datafield);
}
},
{ text: ‘Product Name’, datafield: ‘productname’, hidden: true, filtertype: “custom”, createfilterpanel: function (datafield, filterPanel) {
buildFilterPanel(filterPanel, datafield);
}
},
{ text: ‘Quantity’, datafield: ‘quantity’, hidden: true, filtertype: “custom”, createfilterpanel: function (datafield, filterPanel) {
buildFilterPanel(filterPanel, datafield);
}
}
],
groups: [‘firstname’]
});
}
catch (e) {

}
AssetPieChart();

var listSource = [{ label: ‘Id’, value: ‘id’, checked: ture }
{ label: ‘First Name’, value: ‘firstname’, checked: true },
{ label: ‘Last Name’, value: ‘lastname’, checked: true },
{ label: ‘Product Name’, value: ‘productname’, checked: false},
{ label: ‘Quantity’, value: ‘quantity’, checked: false },

];

$(“#jqxlistbox”).jqxListBox({ source: listSource, width: 200, checkboxes: true });
$(“#jqxlistbox”).on(‘checkChange’, function (event) {
$(“#grdAllAsset”).jqxGrid(‘beginupdate’);
if (event.args.checked) {
$(“#grdAllAsset”).jqxGrid(‘showcolumn’, event.args.value);
}
else {
$(“#grdAllAsset”).jqxGrid(‘hidecolumn’, event.args.value);
}
$(“#grdAllAsset”).jqxGrid(‘endupdate’);
});

$(“#grdAllAsset”).on(“groupschanged”, function (event) {
if (event.args.groups[0] != undefined) {
AssetPieChart();
}
});

$(“#grdAllAsset”).on(“filter”, function (event) {

AssetPieChart();

$(“#grdAllAsset”).jqxGrid({
renderstatusbar: function (statusbar) {
statusbar.empty();
var rowCount = $(“#grdAllAsset”).jqxGrid(‘getrows’).length;
statusbar.append(‘<div style=”margin: 5px;”>Count: <span id=”rowsCountSpan”>’ + rowCount + ‘</span></div>’);
}
});
});

$(“#excelExport”).jqxButton();
$(“#xmlExport”).jqxButton();

$(“#excelExport”).click(function () {
$(“#grdAllAsset”).jqxGrid(‘exportdata’, ‘xls’, ‘jqxGrid’);
});
$(“#xmlExport”).click(function () {
$(“#grdAllAsset”).jqxGrid(‘exportdata’, ‘xml’, ‘jqxGrid’);
});

}

function AssetPieChart() {
try {
var chartSource = “[“;
var group;
var count = $(“#grdAllAsset”).jqxGrid(‘getrootgroupscount’);
for (var i = 0; i < count; i++) {
group = $(“#grdAllAsset”).jqxGrid(‘getgroup’, i);
chartSource = chartSource + “{\”strCount\”:” + group.subrows.length + “,\”strDisplayField\”:\”” + group.group + “\”},”;
};
chartSource = chartSource.substring(0, chartSource.length – 1);
chartSource = chartSource + “]”;
var source =
{
dataType: ‘json’,
type: “GET”,
datafields: [{ name: ‘strCount’ },
{ name: ‘strDisplayField’ }
],
localdata: chartSource
};
var dataAdapter = new $.jqx.dataAdapter(source);
// prepare jqxChart settings
var settings = {
title: “Asset[s]”,
description: “”,
enableAnimations: true,
showLegend: true,
showBorderLine: false,
legendLayout: { left: 700, top: 10, width: 300, height: 800, flow: ‘vertical’ },
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
colorScheme: ‘scheme02’,
seriesGroups:
[
{
type: ‘pie’,
showLabels: true,
series:
[
{
dataField: ‘strCount’,
displayText: ‘strDisplayField’,
labelRadius: 170,
initialAngle: 15,
radius: 145,
centerOffset: 0
}
]
}
]
};
// setup the chart
$(‘#AssetPieChart’).jqxChart(settings);
}
catch (e) {
}
};

function Toggle() {

if ($(“#hypToggle”)[0].innerText == “>>”) {
$(“#grdAllAsset”).jqxGrid({
width: $(‘#tblAssetList’).width() – 240
});

$(“#jqxlistbox”).animate({
width: 200,
height: 200
});
$(“#hypToggle”).html(“<<<“);
}
else {
$(“#grdAllAsset”).jqxGrid({
width: $(‘#tblAssetList’).width() – 30
});

$(“#jqxlistbox”).animate({
width: 0,
height: 0
});
// $(“#jqxlistbox”).css(“display”, “”);
$(“#hypToggle”).html(“>>”);
}
}
</script>
</html>

December 8, 2015 at 2:52 pm in reply to: Pie Chart synchronisation with jqxgrid Pie Chart synchronisation with jqxgrid #79072

sangad
Participant

Thank Peter Stoev.
Can u suggest me solution for mentioned issue

December 8, 2015 at 2:51 pm in reply to: Pie Chart synchronisation with jqxgrid Pie Chart synchronisation with jqxgrid #79071

sangad
Participant

It taking more time to bind chart for 5000 record in grid when i change the grouping

December 3, 2015 at 7:09 am in reply to: Grid not displaying last page Grid not displaying last page #78834

sangad
Participant

try {
// prepare the data
$.ajax({
type: “POST”,
url: url,
data: parameter,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
async: false,
success: function (response) {
data = JSON.parse(response.d);
}
});

var source =
{
dataType: ‘json’,
type: “GET”,

datafields: [{ name: ‘fkint_UnitId’ }, { name: ‘pkint_SrNo’ }, { name: ‘rowIndex’ }, { name: ‘str_DeptName’ }, { name: ‘str_Sections’ }, { name: ‘str_Abbreviation’ }, { name: ‘AssetCount’}],
localdata: data,
pagesize: pagesize,
beforeprocessing: function (data) {
source.totalrecords = data[0].totalRecord;
}
};

var linkrenderer = function (row, column, value) {
try {
var rowdata = $(“#grdAllAsset”).jqxGrid(‘getrowdata’, row);
return ‘<input id=”imgbtn’ + rowdata.pkint_SrNo + ‘” type=”image” src=”../Common/Images/RSelect.gif” title=”View Asset[s] Details” onclick=”return BindAssetSubType(\” + rowdata.fkint_UnitId + ‘\’,\” + rowdata.pkint_SrNo + ‘\’);”/>’;
}
catch (e) {

}
}
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#grdAllAsset”).jqxGrid({
width: 770,
source: dataAdapter,
sortable: true,
groupable: true,
pageable: true,
autoheight: true,
columnsresize: true,
filterable: false,
pagermode: ‘simple’,
virtualmode: true,
columnsreorder: true,
rendergridrows: function () {
return data;
},
columns: [{ text: ‘#’, datafield: ‘rowIndex’, width: 50, sortable: false },
{ text: ‘Enterprise Unit’, datafield: ‘str_DeptName’, width: 230 },
{ text: ‘Enterprise Function’, datafield: ‘str_Sections’, width: 220 },
{ text: ‘Abbreviation’, datafield: ‘str_Abbreviation’, width: 110 },
{ text: ‘Asset[s] Count’, datafield: ‘AssetCount’, width: 110, sortable: false },
{ text: ‘fkint_UnitId’, datafield: ‘fkint_UnitId’, hidden: true },
{ text: ”, datafield: ‘pkint_SrNo’, width: 50, sortable: false, groupable: false, cellsrenderer: linkrenderer}]
});
}
catch (e) {

}

December 2, 2015 at 11:58 am in reply to: "refresh" does not really refresh "refresh" does not really refresh #78790

sangad
Participant

Grid not getting refresh after change the page size which is not the control on jqxgrid.
after pagesize change i have to refresh the jqxgrid.but it is not refreshing the grid

December 2, 2015 at 8:42 am in reply to: Grid not displaying last page Grid not displaying last page #78784

sangad
Participant

I am facing the same issue JQWidget (3.9.1)

when i click on last page it display blank grid according to page size.
But data is not display.
data is present in datasource
Author

Posts

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