DevExtreme 网格在 Angular 4 中自定义添加和编辑弹出窗口

Question

我是 Angular 4 的新手，我使用 devExtreme 网格来显示数据和所有使用 REST API 的 CRUD 操作。 我能够将数据绑定到数据网格，但我想自定义添加和编辑模板弹出，因为有文件上传控件以及查找控件与我需要添加的图像。请你帮我解决这个问题..

import { Component, OnInit } from '@angular/core';
import {DataService} from 'app/app.DataService';
@Component({
  selector: 'app-manage-category',
  templateUrl: './manage-category.component.html',
  styleUrls: ['./manage-category.component.css'],
 providers:[DataService]
})
export class ManageCategoryComponent implements OnInit {
dtCategory: Categories[];
//events: Array<string> = [];
showHeaderFilter: boolean;
showFilterRow: boolean;
title:string;
  constructor(private _dataservice:DataService) {
      this.showHeaderFilter = true;
        this.showFilterRow=true;
 
   }

  ngOnInit() {
  this._dataservice.getCategories().subscribe(categories=>{this.dtCategory=categories});

}
 logEvent(eventName) {
   if(eventName==="InitNewRow")
   {
     
   }
  }
}

interface Categories {     
    CategoryID: number; 
    CategoryIcon: string;
    CreatedBy:string;
    CreatedDate:Date;
    CategoryName:string; 
    IsActive:boolean;
}

<div>
<h3>Manage Category</h3>
<div>
<dx-data-grid 
    id="gridCategory"
    [dataSource]="dtCategory"
    [allowColumnReordering]="true"
    (onEditingStart)="logEvent('EditingStart')"
    (onInitNewRow)="logEvent('InitNewRow')"
    (onRowInserting)="logEvent('RowInserting')"
    (onRowInserted)="logEvent('RowInserted')"
    (onRowUpdating)="logEvent('RowUpdating')"
    (onRowUpdated)="logEvent('RowUpdated')"
    (onRowRemoving)="logEvent('RowRemoving')"
    (onRowRemoved)="logEvent('RowRemoved')"> 
 <!--<dxo-search-panel 
        [visible]="true" 
        [width]="540" 
        placeholder="Search..."></dxo-search-panel>  -->
         <dxo-editing 
            mode="popup"
            [allowUpdating]="true"
            [allowDeleting]="true"
         [allowAdding]="true">
            <dxo-popup
          
                [showTitle]="true"
                [width]="600"
                [height]="345"
                [position]="{ my: 'top', at: 'top', of: window }">
            
            </dxo-popup>
       
        </dxo-editing>
       <dxo-filter-row 
        [visible]="showFilterRow" 
        [applyFilter]="auto"></dxo-filter-row>
          <dxo-header-filter 
        [visible]="showHeaderFilter"></dxo-header-filter>
    <dxo-paging [pageSize]="10"></dxo-paging>
    <dxo-pager 
        [showPageSizeSelector]="true"
        [allowedPageSizes]="[5, 10, 20]"
        [showInfo]="true">
    </dxo-pager>
    
    <dxi-column dataField="CategoryID" [width]="100" id="CategoryID" ></dxi-column>
    <dxi-column dataField="CategoryName" id="CategoryName"></dxi-column>
    <dxi-column dataField="CategoryIcon" [caption]="Icon" [width]="100" [allowFiltering]="false"
        [allowSorting]="false" cellTemplate="categoryIcondt" >
    </dxi-column>
    <dxi-column
        dataField="CreatedDate"
        dataType="date">
    </dxi-column>
   
    <div *dxTemplate="let data of 'categoryIcondt'">
        <img [src]="data.value"/>
    </div>
</dx-data-grid>
</div>
</div>

Answer 1

在你的模板中，你可以放任何你想要的；）

 <dxi-column dataField="imageUrl" [width]="100" [allowFiltering]="false" 
 [allowSorting]="false" [visible]="false" editCellTemplate="editCellTemplate">
 </dxi-column>

 <div *dxTemplate="let cellInfo  of 'editCellTemplate'">
  <img [src]="imgUrlTest"/>
 </div>