Xaf Blazor - How to use a custom cell template (HTML markup) in Grid List Editor

Hello Akin,

To implement a custom cell template in an XAF Blazor project, create a new Razor Component:

CellDisplayTemplate.razor

Razor
@using DevExpress.Blazor

@code {
    public static RenderFragment<GridDataColumnCellDisplayTemplateContext> Create() => (item) => {
        GridDataColumnCellDisplayTemplateContext c = item as GridDataColumnCellDisplayTemplateContext;
        return@<div>@((MarkupString)c.DisplayText)</div>;
    };
}

Then, add a controller that passes this component to the corresponding template:

CustomizeCellTemplateController.cs

C#
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor.Editors;

namespace MainDemo.Blazor.Server;

public class CustomizeCellTemplateController : ObjectViewController<ListView, Employee> {
    protected override void OnViewControlsCreated() {
        base.OnViewControlsCreated();
        var gridListEditor = (DxGridListEditor)View.Editor;
        var dataGridAdapter = gridListEditor.GetGridAdapter();
        foreach (var columnModel in dataGridAdapter.GridDataColumnModels) {
            if (columnModel.FieldName == "FirstName") {
                columnModel.CellDisplayTemplate = CellDisplayTemplate.Create();
            }
        }
    }
}

In addition, it is possible to render a component for a grid template directly in a ViewController:

C#
using DevExpress.Blazor;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor.Editors;
using MainDemo.Module.BusinessObjects;

namespace MainDemo.Blazor.Server;

public class CustomizeCellTemplateController : ObjectViewController<ListView, Employee> {
    protected override void OnViewControlsCreated() {
        base.OnViewControlsCreated();
        var gridListEditor = (DxGridListEditor)View.Editor;
        var dataGridAdapter = gridListEditor.GetGridAdapter();
        foreach (var columnModel in dataGridAdapter.GridDataColumnModels) {
            if (columnModel.FieldName == "FirstName") {
                columnModel.CellDisplayTemplate = (GridDataColumnCellDisplayTemplateContext context) => builder => {
                    builder.AddMarkupContent(0, context.DisplayText);
                };
            }
        }
    }
}

You can see more examples in the following tickets:
How to show a translated enum value in a custom CellDisplayTemplate
Blazor - How to create an inline listview action that is shown in each row's cell

Examples for DxDataGrid (GridListEditor):

CellDisplayTemplate.razor

Razor
@using MainDemo.Module.BusinessObjects

@code {
    public static RenderFragment<object> Create() => (item) => {
        Contact contact = item as Contact;
        return@<div>@contact.FirstName</div>;
    };
}

CustomizeCellTemplateController.cs

C#
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor.Editors.Grid;
using DevExpress.ExpressApp.Blazor.Editors.Grid.Models;
using MainDemo.Module.BusinessObjects;

namespace MainDemo.Module.Blazor {
    public class CustomizeCellTemplateController : ObjectViewController<ListView, Contact> {
        protected override void OnViewControlsCreated() {
            base.OnViewControlsCreated();
            GridListEditor gridListEditor = (GridListEditor)View.Editor;
            IDxDataGridAdapter dataGridAdapter = gridListEditor.GetDataGridAdapter();
            foreach (DxDataGridColumnModel columnModel in dataGridAdapter.DataGridColumnModels) {
                if (columnModel.Field == "FirstName") {
                    columnModel.DisplayTemplate = CellDisplayTemplate.Create();
                }
            }
        }
    }
}