dx-file uploader is not working inside dx-data-grid(Angular ,T.S.)dev extreme version 21.2.5 file uploader is not, angular version 13.2

Question

enter image description here

IN my data grid inside in angular type script file uploader is not working inside data grid.. I am using dev extreme for data-grid...but when i put my file-uploader container ouside the data grid it is working but when i put inside data grid it is not working..

i want my file uploader to work inside dx-data-grid

my file tab component html

<div id="data-grid-demo">
  <dx-data-grid
    id="gridContainer"
    [dataSource]="dataSource"
    keyExpr="ID"
    [showBorders]="true"
  >
    <dxo-paging [enabled]="false"></dxo-paging>
    <dxo-editing
      mode="form"
      [allowUpdating]="true"
      [allowAdding]="true"
      [allowDeleting]="true"
    >
    </dxo-editing>
    <dxi-column dataField="Prefix" caption="Title" [width]="70"></dxi-column>
    <dxi-column dataField="FirstName"></dxi-column>
    <dxi-column dataField="LastName"></dxi-column>
    <dxi-column dataField="Position" [width]="170"></dxi-column>
    <dxi-column dataField="StateID" caption="State" [width]="125">
      <dxo-lookup [dataSource]="states" displayExpr="Name" valueExpr="ID">
      </dxo-lookup>
    </dxi-column>
    <dxi-column dataField="BirthDate" dataType="date"> </dxi-column>
    <dxi-column dataField="Notes" [visible]="false">
      <dxo-form-item
        [colSpan]="2"
        editorType="dxTextArea"
        [editorOptions]="{ height: 100 }"
      >
      </dxo-form-item>
    </dxi-column>
    <dxi-column>
      <dxo-form-item>
        <input type="file" (change)="onFileSelected($event)" accept="image/*" />
      </dxo-form-item>
    </dxi-column>
    
  </dx-data-grid>
</div>

tab component.ts type srcipt file

import { Component, OnInit } from '@angular/core';
import {  ActivatedRoute,Router } from '@angular/router';
import { CommonService } from 'src/app/shared/services/common.service';
import { HttpClient } from '@angular/common/http';
import notify from 'devextreme/ui/notify';



interface Employee {
  ID: number;
  FirstName: string;
  LastName: string;
  Prefix: string;
  Position: string;
  Picture: string;
  BirthDate: string;
  HireDate: string;
  Notes: string;
  Address: string;
  StateID: number;
}

interface State {
  ID: number;
  Name: string;
}

@Component({
  selector: 'app-tabe',
  templateUrl: './tabe.component.html',
  styleUrls: ['./tabe.component.scss']
})
export class TabeComponent implements OnInit {
  dataSource: any=[];
  uploadedFiles: string[] = [];

  employees: Employee[] = [{
    // Employee objects here
    ID: 1,
    FirstName: 'John',
    LastName: 'Heart',
    Prefix: 'Mr.',
    Position: 'CEO',
    Picture: 'images/employees/01.png',
    BirthDate: '1964/03/16',
    HireDate: '1995/01/15',
    Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.',
    Address: '351 S Hill St.',
    StateID: 5,
  }];

  states: State[] = [{
    // State objects here
    ID: 1,
    Name: 'Alabama',
  }, {
    ID: 2,
    Name: 'Alaska',
  }, {
    ID: 3,
    Name: 'Arizona',
  }, {
    ID: 4,
    Name: 'Arkansas',
  }, {
    ID: 5,
    Name: 'California',
  }, {
    ID: 6,
    Name: 'Colorado',
  }, {
    ID: 7,
    Name: 'Connecticut',
  }];

  isEditing = false;
  formData: Employee = {
    ID: 0,
    FirstName: '',
    LastName: '',
    Prefix: '',
    Position: '',
    Picture: '',
    BirthDate: '',
    HireDate: '',
    Notes: '',
    Address: '',
    StateID: 0,
  };

  constructor() { }

  ngOnInit(): void {
    // Your initialization logic here
  }
  

  onFileSelected(event: any): void {
    // Handle file selection event here
    this.uploadedFiles = event.value; // Store the uploaded files in your component property
  }

  // Event handler for form submission (if needed)
  getEmployees() {
    return this.employees;
  }

  getStates() {
    return this.states;
  }

 
  
}