jQWidgets Forums

jQuery UI Widgets Forums Grid Nested Grid

Tagged: ,

This topic contains 13 replies, has 4 voices, and was last updated by  Martin 5 years, 2 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Nested Grid Posts
  • Nested Grid #106714

    angulardev19
    Participant

    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,

    Nested Grid #106736

    Peter Stoev
    Keymaster

    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,
    Peter

    jQWidgets Team
    https://www.jqwidgets.com

    Nested Grid #106739

    angulardev19
    Participant

    Hi 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,

    Nested Grid #106742

    angulardev19
    Participant

    Hi Peter,

    Kindly acknowledge if you got my problem. Or let me know a possible solution for the same.

    Regards,

    Nested Grid #106751

    Peter Stoev
    Keymaster

    Have you tried setting the source again instead of adding one by one.

    Regards
    Peter

    Nested Grid #106753

    angulardev19
    Participant

    Hi Peter,

    Not getting you what did you want to say. Can you please elaborate more?

    Regards,
    Dev19

    Nested Grid #106755

    angulardev19
    Participant

    Hi Peter,

    Here is my angular 7 stackblitz. For the problem. Let me know for more details.

    https://stackblitz.com/edit/angular-zaarcy

    Regards,
    dev19

    Nested Grid #106756

    Martin
    Participant

    Hello 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,
    Martin

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

    Nested Grid #106757

    angulardev19
    Participant

    Hi Martin,

    So sorry. Please check now and let me know.

    Regards,
    Dev19

    Nested Grid #106762

    angulardev19
    Participant

    Hi,

    Can anyone look into it? Let me know as soon as possible.

    Regards,
    Dev19

    Nested Grid #106782

    Martin
    Participant

    Hello 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,
    Martin

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

    Nested Grid #106796

    angulardev19
    Participant

    Hi,

    Thanks, Martin. I got some alternet solution.

    Regards,
    Dev19

    Nested Grid #107184

    alexisdcarvajaln
    Participant

    It 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.

    Nested Grid #107206

    Martin
    Participant

    Hello alexisdcarvajaln,

    Thank you for your contribution!

    Best Regards,
    Martin

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

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.