EJ2 Grid customize the edit/add dialog to include a file uploader for a specific column.

[Alberto Bonfiglio]

Hello,

I was wondering if in the latest EJ2 angular grid is possible to customize the edit/add dialog to include a file uploader for a specific column.
Specifically I have a field that can store the names of several images (array) and when the user edits one of the products it should give the option to upload images and save filenames. 
I know i can do a separate component and upload as a form but I was hoping there was a way to do it in the default dialog.

Also I know I can show the array with a value accessor, but how would the default editor dialog allow for modifications?

Any example code is greatly appreciated.

<ejs-grid #grid='' [dataSource]="data" [allowPaging]="true" [pageSettings]="pageSettings" [toolbar]="toolbar"

(actionComplete)="actionComplete($event)" [editSettings]="editSettings">

<e-columns>

<e-column field= "id" headerText="Product ID" width="130" isPrimaryKey='true' ></e-column>

<e-column field= "name" headerText="Product Name" width="150"></e-column>

<e-column field= "price" headerText="Price" editType= 'numericedit' width="100"></e-column>

<e-column field= "featured" headerText="Featured" editType= 'booleanedit' width="100"></e-column>

<e-column field= "description" headerText="Description" width="150"></e-column>

<e-column field= "picture" headerText="Images" width="150"></e-column>

<e-column field= "active" headerText="Active" editType= 'booleanedit' width="100"></e-column>

</e-columns>

</ejs-grid>

Cheers,

Alberto

[Renjith Singh Rajendran]

Hi Alberto, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We suggest you to use the Cell Edit Template feature of Grid. Please refer the documentation link below, 

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

 

Please refer the below codes to render the EJ2 upload box control instead of datepicker control as shown in the above documentation.  

import { Uploader } from '@syncfusion/ej2-inputs'; 

... 

 

@Component({ 

    template: `<ejs-grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='273px'> 

                <e-columns> 

                    ... 

                   <e-column field='Picture' headerText='Images' [edit]='dpParams' width=150></e-column> 

                </e-columns> 

                </ejs-grid>` 

}) 

export class AppComponent implements OnInit { 

    ... 

    ngOnInit(): void { 

        this.data = data; 

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

       this.dpParams = { 

            create: () => { 

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

                return this.elem; 

            }, 

            read: () => { 

                //Here return the value to be updated in Grid 

            }, 

            destroy: () => { 

                ... 

            }, 

           write: (args: { rowData: Object, column: Column }) => { 

                this.uploadObj = new Uploader({ 

                    autoUpload: false 

                }); 

                this.uploadObj.appendTo(this.elem); 

            } 

        }; 

    } 

} 

Please refer the uploader documentation link below, 

Documentation : https://ej2.syncfusion.com/documentation/uploader/getting-started.html?lang=typescript 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.