jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Export options bug
Tagged: grid, javascript grid, jquery gridview
This topic contains 10 replies, has 3 voices, and was last updated by vipin@logicerp.com 10 years, 3 months ago.
-
AuthorExport options bug Posts
-
Hi,
I am using the updaterow method of grid to update the grid row using prototypes in javascript like as shown
http://yehudakatz.com/2011/08/12/understanding-prototypes-in-javascript/
And also add new row with object using these prototypes.But when i export this grid to excel,csv error has been occured.
but it works fine like in your examples but i want to use prototypes.It works fine with grid while binding,but occurs error in exporting.
Please do as soon as possible.Thanks & Regards,
Vipin KumarHi Vipin Kumar,
You can add new row only via the addrow method. You should add it as shown in the samples and documentation.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Thanks for your quick reply.I am already using addrow method.But i also want to update row in the grid.
Problem is not here for updaterow or addrow,Problem is here while exporting the grid to excel,csv etc. .In your samples you bind the grid with array,json and works fine ,Please bind your grid with array using prototypes in javascript. And error has been occured.Thanks & Regards,
Vipin KumarHi Vipin Kumar,
If you want to update a row then you have to use the “updaterow” method or “setcellvalue” method. How to bind our Grid is also illustrated in the demos and documentation and the available binding options are illustrated, too.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Please execute following code,After that click on Addrow button and after that export the grid to csv,excel etc.you will see error.
<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.10.2.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxdata.export.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.export.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.js”></script><script type=”text/javascript”>
var data = new Array();
var _columns = new Array();
$(document).ready(function () {
_columns.push(“Name”);
_columns.push(“LastName”);
for (var i = 0; i < 10; i++) {
var _cls = Object.create(null);
for (var j = 0; j < _columns.length; j++) {
defineProperty(_cls, _columns[j], _columns[j] + i);
}
data.push(_cls);
}
var source =
{
localdata: data,
datatype: “array”,
datafields:
[
{ name: ‘Name’, type: ‘string’ },
{ name: ‘LastName’, type: ‘string’ }
]
};var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: 850,
source: dataAdapter,
columnsresize: true,
columns: [
{ text: ‘Name’, datafield: ‘Name’, width: 120 },
{ text: ‘Last Name’, datafield: ‘LastName’, width: 120 }
]
});});
$(“#addRow”).jqxButton();
$(“#excelExport”).jqxButton();
$(“#xmlExport”).jqxButton();
$(“#csvExport”).jqxButton();
$(“#tsvExport”).jqxButton();
$(“#htmlExport”).jqxButton();
$(“#jsonExport”).jqxButton();$(“#addRow”).click(function () {
alert(”);var _cls = Object.create(null);
for (var j = 0; j < _columns.length; j++) {
defineProperty(_cls, _columns[j], _columns[j] + data.length);
}$(“#jqxgrid”).jqxGrid(‘addrow’, data.length, _cls);
});$(“#excelExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘jqxGrid’);
});
$(“#xmlExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xml’, ‘jqxGrid’);
});
$(“#csvExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘csv’, ‘jqxGrid’);
});
$(“#tsvExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘tsv’, ‘jqxGrid’);
});
$(“#htmlExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘html’, ‘jqxGrid’);
});
$(“#jsonExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘json’, ‘jqxGrid’);
});var config = {
writable: true,
enumerable: true,
configurable: true
};var defineProperty = function (obj, name, value) {
config.value = value;
Object.defineProperty(obj, name, config);
}</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgrid”>
</div><div style=’margin-top: 20px;’>
<div style=’float: left;’>
<input type=”button” value=”Add Row” id=’addRow’ />
</div><div style=’float: left;’>
<input type=”button” value=”Export to Excel” id=’excelExport’ />
<br /><br />
<input type=”button” value=”Export to XML” id=’xmlExport’ />
</div>
<div style=’margin-left: 10px; float: left;’>
<input type=”button” value=”Export to CSV” id=’csvExport’ />
<br /><br />
<input type=”button” value=”Export to TSV” id=’tsvExport’ />
</div>
<div style=’margin-left: 10px; float: left;’>
<input type=”button” value=”Export to HTML” id=’htmlExport’ />
<br /><br />
<input type=”button” value=”Export to JSON” id=’jsonExport’ />
</div>
</div>
</div>
</body>Thanks & Regards,
Vipin KumarHi Vipin Kumar,
Let me ask you where did you see in our samples and documentation such initialization? I don’t know what you’re trying to achieve with this code, but it will not work.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
I have created this example for your reference,but in actual ,we have some server side code to return the array and bind the grid after that we will update row,addrow method as per our requirement. so that we are using add row & update row with these prototypes and it’s works great.But in export it will show error.
If grid bind successfully in updaterow and addrow then why it can not be exported.Thanks & Regards,
Vipin KumarHi Vipin Kumar,
The Grid exports its rows i.e the result of “getrows” method call which is an Array. Each item in that array has values like: datafield: value. That it. Pretty simple and we demonstrate in our demos that it works.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Thanks for your reply.If grids exports it rows,then why an error occurred while exports in my code.
Is my code have some wrong data.Thanks & regards,
Vipin KumarHi Vipin,
If you run your code in a debugger you’ll see that the root cause of your problem is that the objects you defined dynamically don’t have a hasOwnProperty function. See the following for more details and more specifically the accepted answer (the 2nd one):
http://stackoverflow.com/questions/12017693/why-use-object-prototype-hasownproperty-callmyobj-prop-instead-of-myobj-hasowBtw some your js code is outside of the $.ready function and hence won’t work as expected. So you need to reorder it a bit. For example, on my laptop it didn’t.
Cheers!
Hi Yoda,
I have got the answer with your post.Thank you so much.
Thanks & Regards,
Vipin Kumar -
AuthorPosts
You must be logged in to reply to this topic.