We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Uploader column return null when editing in grid


To upload and save image to the server works fine but when l select a row for editing the uploader column shows blank. I need the uploader column to retain its content when l select a row to edit. Kindly assist

import { Component, OnInit, ViewChild } from '@angular/core';

import { Browser } from '@syncfusion/ej2-base';

import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';

import { DialogEditEventArgs, SaveEventArgs } from '@syncfusion/ej2-angular-grids';

import { FormGroup, AbstractControl, FormControl } from '@angular/forms';

import { Dialog } from '@syncfusion/ej2-angular-popups';

import { EmitType } from '@syncfusion/ej2-base';

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



  selector: 'app-product',

  templateUrl: './product.component.html',

  styleUrls: ['./product.component.css']


export class ProductComponent implements OnInit {



    public uploadObj: UploaderComponent;

    public multiple: boolean = false;


    public data: DataManager;

    public editSettings: Object;

    public toolbar: string[];

    public orderForm: FormGroup;

    public pageSettings: Object; 

    public submitClicked: boolean = false;


    public uploadInput: string = '';

    public browseClick() {

      document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click(); return false;


    public onFileSelect: EmitType<Object> = (args: any) => {

        this.uploadInput = args.filesData[0].name;


    public path: Object = {

        saveUrl: 'api/Productphotos/Save'


    uploadedFile: any;


    public dataManager: DataManager = new DataManager({

      url: 'Product/UrlDatasource',

      updateUrl: 'Product/Update',

      insertUrl: 'Product/Insert',

      removeUrl: 'Product/Delete',

      adaptor: new UrlAdaptor()



    public ngOnInit(): void {

        this.data = this.dataManager;

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

        this.toolbar = ['Add', 'Edit', 'Delete'];

        this.pageSettings = { pageCount: 5};




    createFormGroup(data: IOrderModel): FormGroup {

        return new FormGroup({

            Id: new FormControl(data.Id),

            Category: new FormControl(data.Category),

            Description: new FormControl(data.Description)        





    actionBegin(args: SaveEventArgs): void {

        if (args.requestType === 'beginEdit' || args.requestType === 'add') {

            this.submitClicked = false;

            this.orderForm = this.createFormGroup(args.rowData);


        if (args.requestType === 'save') {

            this.submitClicked = true;


                args.data['Description'] = this.uploadedFile.name;

            if (this.orderForm.valid) {

                args.data = this.orderForm.value;

            } else {

                args.cancel = true;





    actionComplete(args: DialogEditEventArgs): void {

        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {

            if (Browser.isDevice) {

                args.dialog.height = window.innerHeight - 90 + 'px';



            // Set initail Focus

            if (args.requestType === 'beginEdit') {

                (args.form.elements.namedItem('CustomerName') as HTMLInputElement).focus();               

            } else if (args.requestType === 'add') {

                (args.form.elements.namedItem('OrderID') as HTMLInputElement).focus();





    get Id(): AbstractControl  { return this.orderForm.get('Id'); }

    get Category(): AbstractControl { return this.orderForm.get('Category'); }

    get Description(): AbstractControl { return this.orderForm.get('Description'); }




  export interface IOrderModel {

    Id?: number;

    Category?: string;

    Description?: string;




<div class="control-section">

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

    (actionBegin)='actionBegin($event)' (actionComplete)='actionComplete($event)'>


            <e-column field='Id' headerText='ID' width='90' textAlign='Left' [isPrimaryKey]='true'></e-column>

            <e-column field='Category' headerText='Category' width='120'></e-column>

            <e-column field='Description' headerText='Description' width='170'>

              <ng-template #template let-data>

                <div class="image">

                    <img class='photo' src="/Photos/{{ data.Description }}" alt="{{data.Description}}" />





        <ng-template #editSettingsTemplate let-data>

            <div [formGroup]="orderForm" id="orderForm">

                <div class="form-group" style="padding-top: 11px;">

                    <div class="e-float-input">

                        <input type="text" id="Id" name="Id"  formControlName="Id">

                        <span class="e-float-line"></span>

                        <label class="e-float-text e-label-top" for="Id">Id</label>




                <div class="form-group" style="padding-top: 11px;">

                    <div class="e-float-input">

                        <input type="text" id="Category" name="Category"  formControlName="Category">

                        <span class="e-float-line"></span>

                        <label class="e-float-text e-label-top" for="Category">Id</label>



                <div class="form-group" style="padding-top: 11px;">

                    <div class="e-float-input upload-area">

                        <input type="text" id="Description" name="Description" [(ngModel)]="uploadInput" readonly formControlName="Description" >

                        <button id="browse" class="e-control e-btn e-info" (click)='browseClick()'>Browse...</button>                       

                        <span class="e-float-line"></span>

                        <label class="e-float-text e-label-top" for="Description">Choose a file</label>


                    <ejs-uploader #defaultupload id='fileupload' allowedExtensions = "image/*" [autoUpload]=false [multiple]='multiple'  [asyncSettings]='path'









Live Chat Icon For mobile
Up arrow icon