Customize EditType (want to button add in editType column cell)

[shahid hussain]

HTML Code1.

TS Code

1. when I click on toolbar add button It will populate new row to add record I want to add button in newly added row along with textbox can anyone help me please
   
2. And I don't want to add textbox field below action button I want to remove this when I add new row

[Vinitha Balasubramanian]

Hi Shahid,

Thank you for reaching out to Syncfusion support.

Query 1: When I click on toolbar add button It will populate new row to add record I want to add button in newly added row along with textbox.

Based on your requirement, you want to add custom component on adding a new record to the Grid. You can achieve this by using editTemplate feature of the Gird.

editTemplate: https://ej2.syncfusion.com/angular/documentation/grid/editing/edit-types/#using-template

[app.component.html]

    <e-column

        field="Freight"

        headerText="Freight"

        width="120"

        format="C2"

        textAlign="Right"

        editType="numericedit"

        [validationRules]="freightrules"

        ><ng-template #editTemplate let-data>

          <input

            type="number"

            name="Freight"

            placeholder="{{ data.Freight }}"

          />

          <button><i></i></button> </ng-template

      ></e-column>

      <e-column

We have prepared a simple sample for your reference. you can get it from the below link,

sample : https://stackblitz.com/edit/angular-cbiefe-kisxue?file=src%2Findex.html,src%2Fapp.component.html

Query2 : And I don't want to add textbox field below action button I want to remove this when I add new row

Before proceeding your query, please share the below requested details. These specifics will enable us to offer a precise solution. 

• Please share the exact requirement in detail.
• Please ensure that whether you want to remove the button when you add a new record.
• If possible, a reproducible sample of the issue you are experiencing so that we can validate your requirements further.

Regards,

Vinitha Balasubramanian

[shahid hussain]

Thank you so much for your response

My 2nd Question was I do not  want to allow edit / add a particular column  show in the attachment it should be empty 

[Vinitha Balasubramanian]

We understand that you want to remove editing and adding for a particular column. You can do this by setting the 'allowEditing' property to 'false' for that particular column. This way, you'll be able to edit the other columns while keeping that specific column read-only. We've included a sample code and documentation for your reference.

[app.component.html]

<e-column

        field="CustomerID"

        headerText="Customer ID"

        width="120"

        [allowEditing]="false"                  // set allowEditing to false to remove editing for a particular column

      ></e-column>

Sample : https://stackblitz.com/edit/angular-cbiefe-lty7sl?file=src%2Fapp.component.html

Documentation : https://helpej2.syncfusion.com/angular/documentation/grid/editing/edit#disable-editing-for-particular-column

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

[shahid hussain]

Hi I want to update/add data by clicking external button or I want to save Batch data save by using external button

2. I want to show Popup/ dialog when click on the button but its not work for me in edit mode
 when I try to edit and click on this button it open the dialog and close it automatically then redirect into another page

[Vinitha Balasubramanian]

Query 1: To save Batch data save by using external button

We have prepared a sample to update the changed data using external button click. Please refer the code and sample for your reference.

[app.component.html]

<button (click)="save()">Save</button>

 

[app.component.ts]

save(args) {

    this.grid.editModule.batchSave();                    // to save the edited values using batchSave method

  }

Sample : https://stackblitz.com/edit/angular-cbiefe-kisxue?file=src%2Fapp.component.ts

Query 2: To show Popup/ dialog when click on the button

In batch edit mode, when you double-click on a grid cell, the target cell changes to an edit state. You can save multiple changes (added, changed and deleted data) in a single request to the data source by clicking on the toolbar's Update button or by externally invoking the batchSave method. Additionally, when you perform an edit action, the grid will automatically focus out of the edited cell and update the changes at the UI level whenever you move out of the edited cell.

In your case, you are using an editTemplate with an input field and a button to perform the edit action. When you click on the button, it shows a modal dialog. However, when the modal dialog gets focus, the grid automatically loses focus and tries to update the changes. This causes the modal dialog to close, as the button is rendered inside the cell, which is the default behavior of the batch edit mode. This is the root cause of the problem.

To resolve this issue, please provide us with a more detailed description of your exact requirements.

For your requirement, instead of using batch edit mode, we suggest using inline edit mode as it is a better option. We can proceed with this implementation once we have your confirmation.

Note : in normal edit mode, when you start editing, the currently selected record changes to an edit state, allowing you to change the cell values and save the edited data to the data source. However, it does not support bulk editing.