我是angular 4的新手,我使用devExtreme网格使用REST API显示数据和所有CRUD操作。 我能够将数据绑定到datagrid,但我想自定义添加和编辑模板弹出,因为有文件上传控制以及查找控件与我需要添加的图像。请你帮我这个.. < / p>
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;
}
&#13;
<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>
&#13;
答案 0 :(得分:0)
在您的模板中,您可以放置您想要的内容;)
<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>