How to export full data set in jqxGrid with pagination

[Casel ChenMember]

How to export full data set in jqxGrid with pagination?
I used jqxGrid to implement server-side pagination, it works fine. But when I use “export” function of it I just found it only support export current page content. How to enable jqxGrid to export full data set besides current page? Thanks!

[MariyaParticipant]

Hi Casel Chen,

The only way to export a full data set besides current page in virtual mode is by using the ‘export’ data method. There you can have a fourth optional parameter which determines the array of rows to be exported.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[Casel ChenMember]

I didn’t set virtualmode parameter, what’s the purpose of “virtualmode” option? Does it support server side pagination?
Also, I search the API doc and say “The fourth parameter is optional and determines the array of rows to be exported. By default all rows are exported. Set null, if you want all rows to be exported. ” Does it mean the effect is equal when I didn’t set this parameter and when I set it as null? Thanks!

[MariyaParticipant]

Hi Casel Chen,

Server side pagination can be implemented with virtualmode=true as shown:
http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverpaging.htm?web
If you skip to set the forth parameter in the ‘export’ data method, it would export all of the rows which are loaded into the jqxGrid.
Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[Casel ChenMember]

Could you tell me what is the difference when or when not use “virtualmode=true”? I want to know the purpose of this parameter.

[MariyaParticipant]

Hi Casel Chen,

In virtual mode, the data in the Grid is loaded on demand.That’s what we use for Server Paging or Server Scrolling.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[Casel ChenMember]

So, may I say if you want to do server paging or server scrolling you have to set “virtualmode=true”, right? But it works fine (do paging in server side on demand) even if I didn’t use this parameter, why?

[MariyaParticipant]

Hi Casel Chen,

Server Paging in our Grid can be implemented only if “virtualmode=true”. Otherwise, the Grid will display all of the data loaded through the jqxDataAdapter plug-in during the widget’s initialization.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[PabloParticipant]

Hi
Im having the same problem.I am using jqgrid with pagination.Virtualmode was set to true, and the fourth expordata parameter was set to null.However I can´t export all data.Just export the first page.Do i have to check another parameter?
Thanks!

[ivailoParticipant]

Hi Pablo,

With expordata you can export only data, loaded in your grid.
Using virtual mode you are loading only one page, so you can export only this page.

As an additional information this topic will be helpful for you about exporting of custom rows from your grid.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[PabloParticipant]

Thanks for your kindly answer Ivailo. I don’t need make a custom export, I just need export all the data loaded in the grid. I’m using pagination, because I have a lot a data to retrieve.Tried all the recommendations that you made about exportdata and his fourth parameter but only export the first page.
Here’s my code.If you can tell me what is my mistake, I would really appreciate it

Thanks a lot

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.classic.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.fresh.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.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/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”scripts/demos.js”></script>
<script type=”text/javascript” src=”scripts/generatedata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.columnsreorder.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.export.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcombobox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtoolbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.export.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// var data = generatedata(300);
var theme = ‘classic’;
var source =
{
datatype: “json”,
datafields: [
{ name: ‘OrderNum’, type: ‘string’ },
{ name: ‘DistName’, type: ‘string’ },
{ name: ‘TradeName’, type: ‘string’ },
{ name: ‘PartNumber’, type: ‘string’ },
{ name: ‘Serial’, type: ‘string’ },
{ name: ‘NombreServ’, type: ‘string’ },
{ name: ‘CourierName’, type: ‘string’ },
{ name: ‘AWB’, type: ‘string’ },
{ name: ‘nombre’, type: ‘string’ },
{ name: ‘DJAI’, type: ‘string’ },
{ name: ‘Notas’, type: ‘string’ },
{ name: ‘Fecha’, type: ‘string’ }

],

cache: false,
url: ‘data.php’,
pager: function (pagenum, pagesize, oldpagenum) {
// callback called when a page or page size is changed.
},
filter: function()
{
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
},
sort: function()
{
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
},
root: ‘Rows’,
beforeprocessing: function (data) {
if (data != null)
{
source.totalrecords = data[0].TotalRows;
}
},

};
var dataadapter = new $.jqx.dataAdapter(source,{
loadError: function(xhr, status, error)
{
alert(error);
}
}
);

var exportInfo;

var dataadapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: 1330,
source: dataadapter,
selectionmode: ‘multiplecellsextended’,
showemptyrow: true,
filterable: true,
theme: theme,
autoheight: true,
virtualmode: true,
pageable: true,
sortable: true,
pageable: true,
altrows: true,
columnsresize: true,
columnsreorder: true,
sorttogglestates: 1,
pagesize: 15,
pagesizeoptions: [’15’, ’20’, ’50’, ‘100’,’200′,’500′,’1000′],
autoshowfiltericon: true,
rendergridrows: function (obj) {
return obj.data;
},
columns: [
{ text: ‘Orden’, datafield: ‘OrderNum’, width: 80 },
{ text: ‘Distribuidor’, datafield: ‘DistName’, width: 150 },
{ text: ‘Marca’, datafield: ‘TradeName’, width: 80 },
{ text: ‘Part Number’, datafield: ‘PartNumber’, width: 100 },
{ text: ‘Serial’, datafield: ‘Serial’, width: 100 },
{ text: ‘Servicio’, datafield: ‘NombreServ’, width: 80 },
{ text: ‘Courier’, datafield: ‘CourierName’, width: 80 },
{ text: ‘AWB’, datafield: ‘AWB’, width: 100 },
{ text: ‘Estado’, datafield: ‘nombre’, width: 110 },
{ text: ‘SIMI’, datafield: ‘DJAI’, width: 100 },
{ text: ‘Notas’, datafield: ‘Notas’, width: 200 },
{ text: ‘Fecha’, datafield: ‘Fecha’, width: 170 }
]
});
$(‘#events’).jqxPanel({ width: 300, height: 80});
$(“#jqxgrid”).on(“filter”, function (event) {
$(“#events”).jqxPanel(‘clearcontent’);
var filterinfo = $(“#jqxgrid”).jqxGrid(‘getfilterinformation’);
var eventData = “Triggered ‘filter’ event”;
for (i = 0; i < filterinfo.length; i++) {
var eventData = “Filter Column: ” + filterinfo[i].filtercolumntext;
$(‘#events’).jqxPanel(‘prepend’, ‘<div style=”margin-top: 5px;”>’ + eventData + ‘</div>’);
}
});
$(‘#clearfilteringbutton’).jqxButton({ height: 25});
$(‘#filterbackground’).jqxCheckBox({ checked: true, height: 25});
$(‘#filtericons’).jqxCheckBox({ checked: false, height: 25});
// clear the filtering.
$(‘#clearfilteringbutton’).click(function () {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
});
// show/hide filter background
$(‘#filterbackground’).on(‘change’, function (event) {
$(“#jqxgrid”).jqxGrid({ showfiltercolumnbackground: event.args.checked });
});
// show/hide filter icons
$(‘#filtericons’).on(‘change’, function (event) {
$(“#jqxgrid”).jqxGrid({ autoshowfiltericon: !event.args.checked });
});

$(“#excelExport”).click(function () {
exportInfo = $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘jqxGrid’, true, null);
});
$(“#csvExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘csv’, ‘jqwGrid’, true, null);
});

});
</script>

[ivailoParticipant]

Hi Pablo,

Virtual mode prevents from loading a huge amount of data, so in virtual paging it loads only the data that is visible.
There is no built in option to export all the data in your back end.
If your data is with not more than 20000-30000 records, you can use the grid without virtual mode and all the records you need will be exported.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[abalegnoParticipant]

Hi ivalio, Any news about this ?
I need export all data, not the data loaded in the grid only…

[ivailoParticipant]

Hi abalegno,

You can find more information about changes, fixes and new features in our release history page.

If you want to get all grid’s records you can use custom data adapter and configure your server script to return all needed data.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts