How edit complex object in grid with mode Dialog

[Nguyen Tien Ha Administrator]

Hi team,

In our project, we use react grid component to display list of complex invoice object.

For example : Invoices list

[ {

"invoiceNo": "001",

"invoiceDate": "10/11/2021",

"customerName": "Customer 1",

" productItems ": [

{"productName": "iPhone 10","quantity": 2,"price": 1000,"amount": 2000},

{"productName": "Samsung Galaxy 10", "quantity": 3,"price": 800,"amount": 2400}

]

},

{

"invoiceNo": "002",

"invoiceDate": "11/11/2021",

"customerName": "Customer 2",

"productItems": [

{"productName": "iPhone 10", "quantity": 2,"price": 1000,"amount": 2000},

{"productName": "Samsung Galaxy 10", "quantity": 3,"price": 800, "amount": 2400}

]

}

]

Question: How we can view and edit complex invoice in Edit Dialog mode , . Also in edit form, we can change customer name and change quantity or price of product items, then we can save all change?

[Sujith Kumar Rajkumar]

Hi Nguyen, 

 

Greetings from Syncfusion support. 

 

Based on the provided information we could understand that your requirement is to render a separate Grid component in Grid dialog template editing for complex data fields and save the updated changes from there in the main Grid’s complex fields. This can be achieved by following the below steps, 

 

Initially render the edit Grid in the main Grid’s dialog template and set the complex data field as its dataSource, 

 

export class DialogFormTemplate extends React.Component { 

 

    constructor(props) { 

        super(props); 

        this.state = extend({}, {}, props, true); 

        this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 

        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true }; 

        this.validationRules = { required: true }; 

    } 

 

    render() { 

        let data = this.state; 

        return (<div> 

                    ... 

            <div className="form-row"> 

                <div className="form-group col-md-12"> 

                    <div className="e-float-input e-control-wrapper"> 

                        <GridComponent id='editGrid' ref={g => this.editGrid = g} dataSource={data.productItems} toolbar={this.toolbarOptions} editSettings={this.editSettings}> 

                        </GridComponent> 

                    </div> 

                </div> 

            </div> 

        </div>); 

    } 

} 

 

Then in the main Grid’s actionBegin event, retrieve the edit Grid’s dataSource from the edit form and update it as the complex field data in the ‘data’ event arguments as demonstrated below, 

 

// Grid’s actionBegin event handler 

actionBegin(args) { 

    if (args.requestType === 'save') { 

        // Edit Grid instance 

        var editGrid = args.form.querySelector('.e-grid').ej2_instances[0]; 

        // Edit Grid’s data source is set as the updated complex data field value 

        args.data.productItems = editGrid.dataSource; 

    } 

} 

 

We have prepared a sample based on this with the shared data for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/react-4pe2nh?file=index.js 

 

API: https://ej2.syncfusion.com/react/documentation/api/grid/#actionbegin 

        https://ej2.syncfusion.com/react/documentation/api/grid/#datasource 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Nguyen Tien Ha Administrator]

Hi  Kumar ,

That's exactly what we were looking for.

Thank you very much for the quick answer!

[Sujith Kumar Rajkumar]

Hi Team, 

 

You’re welcome. We are glad to hear that your query has been resolved. 

 

Regards, 

Sujith R