Uploader column return null when editing in grid

[Charles]

Hi,

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';

 

@Component({

  selector: 'app-product',

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

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

})

export class ProductComponent implements OnInit {

 

    @ViewChild('defaultupload',{static:false})

    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;

            this.uploadObj.upload();

                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';

                (<Dialog>args.dialog).dataBind();

            }

            // 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-columns>

            <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}}" />

                </div>

              </ng-template>

            </e-column>           

        </e-columns>

        <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>                 

                </div>               

               

                <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>                 

                </div>

                <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>

                    </div>                          

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

                    (selected)='onFileSelect($event)'></ejs-uploader>                                       

            </div>

            </div>

        </ng-template>

    </ejs-grid>

</div>

Regards

Charles

[Rajapandiyan Settu]

Hi Charles,

Thanks for contacting Syncfusion support.

We have prepared a sample based on your requirement. In which we edited the Image column using the Uploader control. You can get it from the below link,

Sample: https://stackblitz.com/edit/angular-ksurdi?file=app.component.html,app.component.ts

In the actionBegin event (requestType as save), we passed the uploaded file value to the edited data.

[app.component.ts]

  actionBegin(args: SaveEventArgs): void {

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

      this.submitClicked = true;

      if (this.orderForm.valid) {

        args.data = this.orderForm.value;

        if (this.strm) {

          args.data.Image = this.strm;

        }

      } else {

        args.cancel = true;

      }

    }

  }

 

Please find the KB for your reference,

https://www.syncfusion.com/kb/12693/how-to-edit-the-column-in-grid-using-the-uploader-control

Regards, 

Rajapandiyan S

[Charles]

Hi  Rajapandiyan,

 

Thank you for the sample you have provided. I will appreciate it if you can get me the complete sample for the above solution. I want to get fimiliar with it's backend codes for uploading image. 

Regards

Charles

[Rajapandiyan Settu]

Hi Charles,

Kindly share the below details to provide a better solution.

1. Are you want to retain the previously saved image (from row data) in the Uploader when Editing the row?

2. What are the issues you have faced in the Grid?
3. Are you facing any issues while saving the uploaded image to Grid’s dataSource?
4. Share the video demo of your requirement.

Regards, 

Rajapandiyan S