DevExtreme React - Create a Custom Command Column
In the following code, command-editing
is a custom command column. It displays links that redirect a user to a separate page for editing. The column is configured using a cellTemplate. Note that it is an unbound column, that is, it does not have the dataField specified.
jQuery
JavaScript
$(function(){ $("#treeListContainer").dxTreeList({ dataSource: [ { id: '1', fullName: "John Heart", position: "CEO" }, // ... ], columns: [ "fullName", "position", { name: "command-editing", allowFiltering: false, allowSorting: false, cellTemplate: function(cellElement, cellInfo) { cellElement.append("<a href='./edit?id=" + cellInfo.data.id + "'>Edit</a>"); } } ] }); });
Angular
HTML
TypeScript
<dx-tree-list [dataSource]="dataSource"> <dxi-column dataField="fullName"></dxi-column> <dxi-column dataField="position"></dxi-column> <dxi-column name="command-editing" [allowFiltering]="false" [allowSorting]="false" cellTemplate="cellTemplate"> <div *dxTemplate="let data of 'cellTemplate'"> <a [routerLink]="['/edit']" [queryParams]="{ id: data.data.id }">Edit</a> </div> </dxi-column> </dx-tree-list>
// app.component.ts import { dxTreeListModule } from 'devextreme-angular'; import { AppRoutingModule } from './app-routing.module'; // ... export class AppComponent { dataSource = [ { id: '1', fullName: "John Heart", position: "CEO" }, // ... ]; } @NgModule({ imports: [ dxTreeListModule // ... ], // ... })
TypeScript
// app-routing.module.ts import { RouterModule, Routes } from '@angular/router'; import { APP_BASE_HREF } from '@angular/common'; // ... const routes: Routes = [ { path: '', redirectTo: '/yourBaseRoot', pathMatch: 'full' }, { path: 'edit', component: YourEditComponent } ]; @Component({ // ... providers: [ { provide: APP_BASE_HREF, useValue : '/yourBaseRoot' }, // ... ] }) @NgModule({ imports: [ RouterModule.forRoot(routes) // ... ], // ... }) export class AppRoutingModule { }
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().TreeList() .ID("treeList") .DataSource(new object[] { new { id = "1", fullName = "John Heart", position = "CEO" } // ... }) .Columns(columns => { columns.Add().DataField("fullName"); columns.Add().DataField("position"); columns.Add() .Name("command-editing") .AllowFiltering(false) .AllowSorting(false) .CellTemplate(@<text> <a href="@Url.Action("Edit")?id=<%= data.id %>">Edit</a> </text>); }) )
You can also customize the built-in command columns. See the Command Columns topic for more details.
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.