How to Open Edit Dialog Dynamically in Angular Grid component

[Andry Christian]

Hello, can I  open the modal for modify a row of a table from a click of a Button outside a grid, by sending the ID of the row to be modified.

Thanks

[Ajith Govarthan]

Hi Andry, 

 

Thanks for the contacting Syncfusion support. 

 

Query: Hello, can I open the modal for modify a row of a table from a click of a Button outside a grid, by sending the ID of the row to be modified. 

 

Based on your query we suspect that you want to open the edit dialog using the external button outside of the grid component. So, we have prepared sample and in that sample we have opened the dialog by calling the startEdit method of the grid component. 

 

For your convenience we have attached the sample so please refer the sample for your reference. 

 

Code Example: 

App.component.html 

 

<div class="control-section"> 

  <button (click)="onClick($event)">OpenDialog</button> 

  <ejs-grid 

    #grid 

    [dataSource]="data" 

    allowPaging="true" 

    [pageSettings]="pageSettings" 

    [editSettings]="editSettings" 

    [toolbar]="toolbar" 

  > 

    <e-columns> 

      <e-column 

        field="OrderID" 

        headerText="Order ID" 

        width="120" 

        textAlign="Right" 

        isPrimaryKey="true" 

        [validationRules]="orderidrules" 

      ></e-column> 

      <e-column 

        field="CustomerName" 

        headerText="Customer Name" 

        width="120" 

        [validationRules]="customeridrules" 

      ></e-column> 

      <e-column 

        field="Freight" 

        headerText="Freight" 

        width="120" 

        format="C2" 

        textAlign="Right" 

        editType="numericedit" 

        [validationRules]="freightrules" 

      ></e-column> 

      <e-column 

        field="OrderDate" 

        headerText="Order Date" 

        width="130" 

        editType="datepickeredit" 

        format="yMd" 

        textAlign="Right" 

      ></e-column> 

      <e-column 

        field="ShipCountry" 

        headerText="Ship Country" 

        width="150" 

        editType="dropdownedit" 

        [edit]="editparams" 

      ></e-column> 

    </e-columns> 

  </ejs-grid> 

</div> 

 

App.component.ts 

 

  onClick(args) { 

    this.grid.selectRow(1); // select the row to be edit 

    this.grid.startEdit();    

  } 

 

 

UG-Link: 

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

 

Please get back to us if you need further assistance. 

 

Regards, 

Ajith G.