[Abhishek AdekarParticipant]

Thank you for rply.

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

[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’);
}

[Abhishek AdekarParticipant]

Posting code :

var data = JSON.parse(investorsJsonData);
var source =
{
datafields: [
{name: ‘investorName’, type: ‘string’},
{name: ‘entityType’, type: ‘string’},
{name: ‘kycStatus’, type: ‘string’},
],
datatype: ‘json’,
localdata: data
};
var adapter = new $.jqx.dataAdapter(source);

// create nested grid.
var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.uid.toString();
var grid = $($(parentElement).children()[0]);
nestedGrids.push(grid);
var nestedSource =
{
datafields: [
{name: ‘relatedPartyName’, type: ‘string’ },
{name: ‘relatedPartyType’, type: ‘string’ },
{name: ‘rpKycStatus’, type: ‘string’ }
],
datatype: ‘json’,
root: ‘relatedParty’,
selectionmode: ‘checkbox’,
editable: false,
localdata: data[index].relatedParties
};
var nestedAdapter = new $.jqx.dataAdapter(nestedSource);
if (grid != null) {
grid.jqxGrid({
source: nestedAdapter,
width: ‘90%’,
height: 350,
selectionmode: ‘checkbox’,
columns: [
{ text: “Related Party Name”, datafield: “relatedPartyName”, editable:false, width: ‘38%’ },
{ text: “Related Party Type”, datafield: “relatedPartyType”, editable:false, width: ‘30%’ },
{ text: “KYC Status”, datafield: “rpKycStatus” , editable:false, width: ‘30%’}

]
});
}
}
// creage jqxgrid
$(“#investorMappingJqxgrid”).jqxGrid(
{
width: ‘100%’,
height: 300,
source: source,
rowdetails: true,
rowsheight: 35,
selectionmode: ‘checkbox’,
editable: false,
filterable: true,
showfilterrow: true,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
ready: function () {
//$(“#jqxgrid”).jqxGrid(‘showrowdetails’, 0);
},
columns: [
{ text: ‘Investor Name’, datafield: ‘investorName’, editable:false , width: ‘38%’ },
{ text: ‘Entity Type’, datafield: ‘entityType’, editable:false , width: ‘30%’ },
{ text: ‘KYC Status’, datafield: ‘kycStatus’, editable:false , width: ‘30%’ }
]
});

[Abhishek AdekarParticipant]

Thank you for replying Stanislav,

I want to change a functionality for “UP KEY” & “DOWN KEY“,

for e.g : suppose the value is “3.50”, so on click of UP KEY it should round up the amount to “4” & click of DOWN KEY it should round down the amount to “3”.

can you help me with this?

Thank you.

[Abhishek AdekarParticipant]

EDIT**

not >> “jqxFormattedInput”

its >> **jqxNumberInput

[Author]

Posts