Detail Form Bound to Grid Selected Row

[Kelly Harrison]

Hi,

I have a requirement to show a grid on one part of the page and a form allowing the user to edit the selected row on another portion of the page.  Something like this:

The grid itself is bound to an DataManager using an ODataV4Adaptor:

        <ejs-grid id="headerList" #headerList

                  [dataSource]="caseNotesData"

                  [query]="query"

          >...columns...</ejs-grid>

  ngOnInit() {

     this.caseNotesData = new DataManager({ url: this.apiService.odataUrl + '/CaseNotes', adaptor: new ODataV4Adaptor() });

     this.query = new Query().expand('Coordinator');

  }

Is there a property on the grid I can bind the form elements to or do I need to set an object's value on the grid's OnSelected event?  

Also, I'd like to leverage the grid's ability to save using the OData adaptor so getting those form values back into the grid and having the grid manage persistence would be helpful.  Can this be done?

Thanks!

[Manivel Sellamuthu]

Hi Kelly, 

Thanks for contacting us. 

Query#1: Is there a property on the grid I can bind the form elements to or do I need to set an object's value on the grid's OnSelected event?  

 

In Grid, there is no property to bind the rowData to external form elements. If you want to bind the Grid row data to the external forms, as you said you can use rowSelected event of the Grid. Also we suggest you to take a look at  

1. Grid Dialog edit mode, in which the currently selected row will be shown on a form inside the dialog

Demo: https://ej2.syncfusion.com/angular/demos/#/material/grid/dialog-editing 

2. Grid Dialog template which allows to use custom form elements  to add and update grid records

Reactive Forms: https://ej2.syncfusion.com/angular/demos/#/material/grid/dialog-reactive-form

Template-driven Forms: https://ej2.syncfusion.com/angular/demos/#/material/grid/template-driven-form 

Query#2: I'd like to leverage the grid's ability to save using the OData adaptor so getting those form values back into the grid and having the grid manage persistence would be helpful.  Can this be done 

 

Yes. You can use updateRow method to achieve your requirement. After you get the edited form values you can invoke the updateRow method with edited data to save the value in server and Grid. 

API: https://ej2.syncfusion.com/angular/documentation/api/grid/#updaterow  

Please get back to us, if you need further assistance. 

Regards, 

Manivel