custom edit mode in grid

Question

I'm trying to add multiple element to a column in grid editmode without use ng template.

for example, First in view mode column only show value label. when double click a row to change to edit mode this column appent a input element and a button. (please refer below image).

Please support me! Thank you so much

Sujith Kumar Rajkumar · Answer

Hi Doan,

Greetings from Syncfusion support.

Based on the query we could understand that your requirement is to render an input and icon element in column edit without using ng-template. You can achieve this by using the cell edit template feature of the Grid columns which utilizes the following functions – “create, write, read, destroy”. Using this, you can render the required controls/elements, append it to the initially created edit cell element(returned from the ‘create’ method here) and on performing save action returning the proper input element’s value to be updated for the column cell from the read method.

This is demonstrated in the below code snippets,

app.component.html

<e-column field='ShipCountry' headerText='Ship Country' [edit]='editparams'></e-column>

app.component.ts

this.editparams = {

create: () => {

// A parent div element is created and returned for appending the required edit control

this.elem = document.createElement("div");

return this.elem;

},

write: (args) => {

// An input element is created for editing cell value

this.editElement = document.createElement('input');

// Current cell value is appended as the element value

this.editElement.value = args.rowData[args.column.field];

// The edit input is appended as child to the initially created ‘div’ element

this.elem.append(this.editElement);

// A span element is created for displaying an icon

var spanEle = document.createElement('span');

spanEle.classList.add("e-input-group-icon", "e-search-icon", "e-icons");

// The span element is also appended as child to the initially created ‘div’ element

this.elem.appendChild(spanEle);

},

read: () => {

// The edit input element value is returned back for updating in the Grid

return this.editElement.value;

},

destroy: () => {

}

Using above approach you can achieve your requirement of rendering multiple elements in the Grid edit cell. But, please ensure to return the updated cell value from the proper edit input from the ‘read’ function of the cell edit functionality.

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

Sample: https://stackblitz.com/edit/angular-dtah5k-vzq81r?file=app.component.ts

More details on this can be checked in the below documentation link,

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#cell-edit-template

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

Regards,

Sujith R

Doan · Answer

thank you so much.

Doan · Answer

I have one more question.How to add event to search icon. I try with click() event but not success.In this case I want to call function doOpen() with param

Doan · Answer

I resolve it. Thank you!!!!!

Sujith Kumar Rajkumar · Answer

Hi Doan, 
 
We are glad to hear that your query has been resolved. And for reference we have also shared the solution and modified sample below, 
 




public ngOnInit(): void { 
    this.editparams = { 
        write: (args) => { 
                    ... 
              var spanEle = document.createElement('span'); 
              spanEle.addEventListener('click', this.doOpen.bind(this, args.rowData)) 
                    ... 
        } 
    } 
} 
 
doOpen(args) { 
  console.log("Row data - " + args); 
} 
 
Sample: https://stackblitz.com/edit/angular-dtah5k-dspjtt?file=app.component.ts 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R