jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Nested Grid
Tagged: grid, nestedgrid
This topic contains 13 replies, has 4 voices, and was last updated by Martin 5 years, 2 months ago.
-
AuthorNested Grid Posts
-
Hi,
My nested grid data are lost after adding a row into the parent. Let me know as soon as possible. It’s urgent. Angular 7.
Regards,
Hi,
Please, share Stackblitz demo about your scenario.
The code below is with nested grids and dynamically added new rows. The example works with the current version.
import { Component, ViewChild } from '@angular/core'; import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid.ts' @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { @ViewChild('myGrid') myGrid: jqxGridComponent; source: any = { datafields: [ { name: 'FirstName' }, { name: 'LastName' }, { name: 'Title' }, { name: 'Address' }, { name: 'City' } ], root: 'Employees', record: 'Employee', id: 'EmployeeID', datatype: 'xml', url: '../assets/employees.txt' }; employeesAdapter: any = new jqx.dataAdapter(this.source); getWidth() : any { if (document.body.offsetWidth < 850) { return '90%'; } return 850; } ordersSource: any = { datafields: [ { name: 'EmployeeID', type: 'string' }, { name: 'ShipName', type: 'string' }, { name: 'ShipAddress', type: 'string' }, { name: 'ShipCity', type: 'string' }, { name: 'ShipCountry', type: 'string' }, { name: 'ShippedDate', type: 'date' } ], root: 'Orders', record: 'Order', datatype: 'xml', url: '../assets/orderdetails.txt' }; ordersDataAdapter = new jqx.dataAdapter(this.ordersSource, { autoBind: true }); nestedGrids: any[] = new Array(); // create nested grid. initRowDetails = (index: number, parentElement: any, gridElement: any, record: any): void => { let id = record.uid.toString(); let nestedGridContainer = parentElement.children[0]; this.nestedGrids[index] = nestedGridContainer; let filtergroup = new jqx.filter(); let filter_or_operator = 1; let filtervalue = id; let filtercondition = 'equal'; let filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition); // fill the orders depending on the id. let orders = this.ordersDataAdapter.records; let ordersbyid = []; for (let i = 0; i < orders.length; i++) { let result = filter.evaluate(orders[i]['EmployeeID']); if (result) ordersbyid.push(orders[i]); } let ordersSource = { datafields: [ { name: 'EmployeeID', type: 'string' }, { name: 'ShipName', type: 'string' }, { name: 'ShipAddress', type: 'string' }, { name: 'ShipCity', type: 'string' }, { name: 'ShipCountry', type: 'string' }, { name: 'ShippedDate', type: 'date' } ], id: 'OrderID', localdata: ordersbyid } let nestedGridAdapter = new jqx.dataAdapter(ordersSource); if (nestedGridContainer != null) { let settings = { theme: 'material', width: 780, height: 200, source: nestedGridAdapter, columns: [ { text: 'Ship Name', datafield: 'ShipName', width: 200 }, { text: 'Ship Address', datafield: 'ShipAddress', width: 200 }, { text: 'Ship City', datafield: 'ShipCity', width: 150 }, { text: 'Ship Country', datafield: 'ShipCountry', width: 150 }, { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 } ] }; jqwidgets.createInstance(<code>#${nestedGridContainer.id}</code>, 'jqxGrid', settings); } } photoRenderer = (row: number, column: any, value: string): string => { let name = this.myGrid.getrowdata(row).FirstName; let imgurl = 'https://www.jqwidgets.com/angular/images/' + name.toLowerCase() + '.png'; let img = '<div style="background: white;"><img style="margin: 2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>'; return img; } renderer = (row: number, column: any, value: string): string => { return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>'; } rowdetailstemplate: any = { rowdetails: '<div id="nestedGrid" style="margin: 10px;"></div>', rowdetailsheight: 220, rowdetailshidden: true }; ready = (): void => { this.myGrid.addrow(null, {}); this.myGrid.addrow(null, {}); }; columns: any[] = [ { text: 'Photo', width: 50, cellsrenderer: this.photoRenderer }, { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: this.renderer }, { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: this.renderer }, { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: this.renderer }, { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: this.renderer }, { text: 'City', datafield: 'City', width: 170, cellsrenderer: this.renderer } ]; }
Best Regards,
PeterjQWidgets Team
https://www.jqwidgets.comHi Peter,
Please see this link. It’s in jquery. I implemented it with Angular 7.
http://jsfiddle.net/txhi/9v8eb5k2/
Steps to reproduce:
1. Add one row in the parent.
2. Now add a row in child with some data.
3. Now add a new row in the parent.
4. And expand first parent row. Your all the child data lost.Let me know as soon as possible. I’m stuck in a critical situation. If you need some more detail to share your skype id or any other?
Regards,
Hi Peter,
Kindly acknowledge if you got my problem. Or let me know a possible solution for the same.
Regards,
Have you tried setting the source again instead of adding one by one.
Regards
PeterHi Peter,
Not getting you what did you want to say. Can you please elaborate more?
Regards,
Dev19Hi Peter,
Here is my angular 7 stackblitz. For the problem. Let me know for more details.
https://stackblitz.com/edit/angular-zaarcy
Regards,
dev19Hello Dev19,
Could you check if the stackblitz link is valid and if the example is shared publicly?
It is saying that the page could not be found.Best Regards,
MartinjQWidgets Team
https://www.jqwidgets.com/Hi Martin,
So sorry. Please check now and let me know.
Regards,
Dev19Hi,
Can anyone look into it? Let me know as soon as possible.
Regards,
Dev19Hello Dev19,
This happens because after adding a new row to the main grid the
initRowDetails
function is invoked again and you are creating a new source.
I have fixed it by checking if the child grid is already created and you its source records.You can check the example Here.
Best Regards,
MartinjQWidgets Team
https://www.jqwidgets.com/Hi,
Thanks, Martin. I got some alternet solution.
Regards,
Dev19It is important that when adding a row to the nestedGrid you save that row either at the time of creating it or with a button in an arrangement and the name of that arrangement should go in this line let orders = this.ordersDataAdapter.records; and instead of calling this variable this.ordersDataAdapter.records you could put something like this: let orders = this.myArray; it worked for me
because when creating a new row the nestedGrid is instantiated again and since it has nothing added to the origin then it leaves you empty.Hello alexisdcarvajaln,
Thank you for your contribution!
Best Regards,
MartinjQWidgets Team
https://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.