jQWidgets Forums
jQuery UI Widgets › Forums › Angular › Jqx Inner Grid not working
This topic contains 1 reply, has 2 voices, and was last updated by Hristo 6 years, 3 months ago.
-
Author
-
Hi –
I am trying to implement jqx inner grid in my angular project. I was able to get the inner grid implemented in my project however i am facing a strange issue. I need to call a web service to display the inner grid data whenever I click on the inner grid icon. Input for the web service will be taken from the parent grid. The issue is, the inner grid is getting rendered before the web service response is back. So inner grid will be empty and when i click on the next row’s inner grid it will display the data we received from the previous web service call and so on. In the example we have in the jqx website, the web service call is happening before the ‘initRowDetails’ call and so it will work fine. But for me I can not call the web service in advance as I have to get one of the values from the parent row to call the web service for inner grid(this.srvc.getDuplicate(workItemId)). Please find below the code i have.Typescript –
ngOnInit() {
this.displayabc();this.homeService.subject.subscribe(() => {
this.displayabc();
})
}displayabc() {
this.srvc.getabc(this.ser..searchType, this.ser.searchValue, this.ser.hqHeader).subscribe((data: Searchabc) => {
this.searchabc = data;
this.content = data.content;
this.errors = data.errors;
});this.nestedGrids = new Array();
this.initRowDetails = (index: number, parentElement: any, gridElement: any, record: any): void => {
let workItemId = record.workItemId.toString();
let nestedGridContainer = parentElement.children[0];
let claims = this.content;
this.srvc.getDuplicate(workItemId).subscribe((data: DuplicateClaimsResponse) => {
this.duplicateClaimsResponse = data;
this.duplicateClaimDetails = data.content;
});
let childsource = {
datafields: [
{name: ‘claimId’, type: ‘string’},
{name: ‘rejectCodeDsc’, type: ‘string’},
{name: ‘processDate’, type: ‘string’}
],
id: ‘workItemId’,
localdata: this.duplicateClaimDetails,}
let nestedGridAdapter = new jqx.dataAdapter(childsource);
if (nestedGridContainer != null) {let settings = {
theme: ‘material’,
width: 1600,
height: 200,
source: nestedGridAdapter,
columns: [
{text: ‘Claim ID’, datafield: ‘claimId’},
{text: ‘Reject Code Description’, datafield: ‘rejectCodeDsc’},
{text: ‘Process Date’, datafield: ‘processDate’}
]
};
jqwidgets.createInstance(#${nestedGridContainer.id}
, ‘jqxGrid’, settings);
}
}this.rowdetailstemplate = {
rowdetails: ‘<div id=”nestedGrid” style=”margin: 10px;”></div>’, rowdetailsheight: 220, rowdetailshidden: true
};}
html –
<grid id=”gridId” [data]=”content” itemAlias=”workItem” editable=”checkbox”
[rowdetails]=”true”
[initrowdetails]=”initRowDetails” [rowdetailstemplate]=”rowdetailstemplate” #workItemGrid></grid>Hello cibzash,
It seems as “this” case where you receive the unexpected “this”.
I would like to suggest you look at this demo:
https://stackblitz.com/github/jqwidgets/angular_demos/tree/master/grid/nestedgrids/The services work asynchronously and the initialization of the grids could happen before the data get.
I would like to suggest you an option to implement theready
callback in the nested grids and when it is ‘ready’ to set already loaded data withupdatebounddata
method. (as in this approach)Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.