Export to excel issue for horizontal scroll grid

[Abhishek AdekarParticipant]

Hi,

1. below is my jqxgrid screenshot. if i export this it will work fine.

screenshot no.1

2. below is same jqxgrid screenshot with horizontal scroll moved to complete right side, and if i export this to excel the non visible columns of grid are highlighting in white color (see screenshot no.3 below).

screenshot no.2

screenshot no.3

[adminKeymaster]

Hi Abhishek Adekar,

Could you provide the following:

1. Web Browser type and version.
2. jQWidgets version
3. Reproduce steps

Regards,
Peter

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

[Abhishek AdekarParticipant]

1. Web Browser type and version

Google Chrome
Version 84.0.4147.105 (Official Build) (64-bit)

2. jQWidgets version

jQWidgets v4.1.0

3.

Sample data used: [{“closeDate”:”01-Jan-2020″,”noticeDueDate”:”Aug 1, 2020 12:00:00 AM”,”distributionAmount”:1250,”investorName”:”Test Investor1″,”className”:”Test Standalone Class2″,”recallableReturnOfCapital”:3224234,”effectiveMonth”:”Jan-2020″},{“closeDate”:”01-Jan-2020″,”noticeDueDate”:”Aug 1, 2020 12:00:00 AM”,”distributionAmount”:416.66,”investorName”:”Test Investor1″,”className”:”Test Standalone Class1″,”effectiveMonth”:”Jan-2020″},{“closeDate”:”01-Jan-2020″,”noticeDueDate”:”Aug 1, 2020 12:00:00 AM”,”distributionAmount”:833.33,”investorName”:”Test Entity1″,”className”:”Test Standalone Class1″,”effectiveMonth”:”Jan-2020″}]

Jqxgrid code :

var data = JSON.parse($(“#distributionViewJson”).val());
var source =
{
datatype: “json”,
localdata: data,
datafields: [
{ name: ‘investorName’ , type: ‘string’},
{ name: ‘closeDate’ , type: ‘string’},
{ name: ‘className’ , type: ‘String’},
{ name: ‘effectiveMonth’ , type: ‘string’},
{ name: ‘distributionAmount’ , type: ‘number’},
{ name: ‘returnOfCapital’ , type: ‘number’},
{ name: ‘recallableReturnOfCapital’ , type: ‘number’},
{ name: ‘preferredReturn’ , type: ‘number’},
{ name: ‘recallablePreferredReturn’ , type: ‘number’},
{ name: ‘profitAboveHurdle’ , type: ‘number’},
{ name: ‘profitAboveHurdleRecallable’ , type: ‘number’}

],
};

// load virtual data.
var rendergridrows = function (params) {
var data = generatedata(params.startindex, params.endindex);
return data;
}

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

// Create jqxGrid
$(“#distributionViewJqxGrid”).jqxGrid(
{
width: ‘100%’,
source: dataAdapter,
sortable: true,
pageable: true,
height: ‘300px’,
groupable: true,
columnsresize: false,
showfilterrow: true,
filterable: true,
columns: [

{ text: ‘Investor Name’ , datafield: ‘investorName’, filtertype: ‘input’, width: ‘20%’, align: ‘center’},
{ text: ‘Close Date’ , datafield: ‘closeDate’, filtertype: ‘input’, width: ‘10%’, align: ‘center’},
{ text: ‘Class Name’ , datafield: ‘className’, filtertype: ‘input’, width: ‘20%’, align: ‘center’},
{ text: ‘Effective Month’ , datafield: ‘effectiveMonth’ , filtertype: ‘input’, width: ‘10%’, align: ‘center’},
{ text: ‘Distribution Amount’ , datafield: ‘distributionAmount’, filtertype: ‘input’, width: ‘20%’, align: ‘center’, cellsformat : cellsFormat, cellsalign: ‘right’,},
{ text: ‘Return Of Capital’ , datafield: ‘returnOfCapital’, filtertype: ‘input’, width: ‘10%’, align: ‘center’, cellsformat : cellsFormat, cellsalign: ‘right’,},
{ text: ‘Recallable Return Of Capital’ , datafield: ‘recallableReturnOfCapital’, filtertype: ‘input’, width: ‘20%’, align: ‘center’, cellsformat : cellsFormat, cellsalign: ‘right’,},
{ text: ‘Preferred Return’ , datafield: ‘preferredReturn’, filtertype: ‘input’, width: ‘10%’, align: ‘center’, cellsformat : cellsFormat, cellsalign: ‘right’,},
{ text: ‘Recallable Preferred Return’ , datafield: ‘recallablePreferredReturn’, filtertype: ‘input’, width: ‘20%’, align: ‘center’, cellsformat : cellsFormat, cellsalign: ‘right’,},
{ text: ‘Profit Above Hurdle’ , datafield: ‘profitAboveHurdle’, filtertype: ‘input’, width: ‘10%’, align: ‘center’, cellsformat : cellsFormat, cellsalign: ‘right’,},
{ text: ‘Recallable Profit Above Hurdle’ , datafield: ‘profitAboveHurdleRecallable’, filtertype: ‘input’, width: ‘20%’, align: ‘center’, cellsformat : cellsFormat, cellsalign: ‘right’,}
],
pageSize:data.length,
pageSizeOptions:[“5″,”10″,”20”,data.length]
});

Export button div :

<button type=”button” id=”excelExportId” onclick=”exportToExcel(‘distributionViewJqxGrid’, ‘Distribution Details’)” class=”btn btn-sm grey-gallery”>
<i class=”fa fa-file-excel-o”></i>  Export
</button>

JS function :

function exportViewToExcel(){
$(“#distributionViewJqxGrid”).jqxGrid(‘exportdata’, ‘xls’, ‘Distribution Details’);
}

[adminKeymaster]

Hi Abhishek Adekar,

This issue is already resolved in a later version of jQWidgets. For example, the current version works correctly. If possible, please upgrade to the current release.

Regards,
Peter

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

[Abhishek AdekarParticipant]

Thank you for rply.

does updating to newer version will make any issue for existing code of jqx?

[Author]

Posts