Implementing Data Grid Cell Template with C# (ASP.NET Core)

Question

I am trying to create a data grid with C# and I will like to implement a cell template.

This is my data grid. My data source, deviceSupportTickets, has the data type of List<SupportTicketVM>. I can't access the current element of the cell to modify it as I will encounter the error

'object' does not contain a definition for 'SupportTicketPrefix' and no accessible extension method 'SupportTicketPrefix' accepting a first argument of type 'object' could be found (are you missing a using directive or an assembly reference?)

@(Html.DevExtreme().DataGrid<SupportTicketVM>()
    .ID("supportTicketDataGrid")
    .DataSource(deviceSupportTickets)
    .Columns(columns =>
    {
        columns.AddFor(m => m.SupportTicketPrefix).Caption("Ticket#").CellTemplate(@<text>
        <a href="[email protected]">@item.SupportTicketPrefix</a>
    </text>);
        //More Columns Ommitted
    })
    .ShowBorders(false)
    .ShowColumnLines(false)
    .FilterPanel(filterPanel => filterPanel.Visible(false))
    .FilterRow(f => f.Visible(false))
    .HeaderFilter(f => f.Visible(false))
    .GroupPanel(p => p.Visible(false))
    .Paging(paging => paging.PageSize(5))
    .Pager(pager =>
    {
        pager.Visible(true);
        pager.ShowInfo(true);
        pager.ShowNavigationButtons(true);
    })
    .NoDataText("No ticket created for this device.")
)

Answer 1

Can u try it : I hope it working! good luck

var dataSourceJson = new DevExpress.data.DataSource({
    store: {
        type: "array",
        data: JSON.parse(mappedJsonString),
        key: "yourKey"
    }
});
$("#supportTicketDataGrid").dxDataGrid({
    dataSource: dataSourceJson,
    key: "yourKey"
});

Answer 2

I recomend to specify the cell template as a JS function, and then you can acess some parameters, for example the item clicked data,index and the element itself. Something like this :

columns.AddFor(m => m.SupportTicketPrefix).Caption("Ticket#").CellTemplate(new JS("templateJS"))  

Then in the script zone

<script>
function templateJS (itemElement,itemIndex,itemData)
{
 //modify the element as you wish
}  

More info : https://docs.devexpress.com/AspNetCore/DevExtreme.AspNet.Mvc.Builders.DataGridColumnBuilder-1.CellTemplate(DevExtreme.AspNet.Mvc.JS)

https://docs.devexpress.com/AspNetCore/401029/devextreme-based-controls/concepts/templates#javascript-functions-as-templates