Search code examples
devextreme

How to extract data from a Javascript method which invoked by CellTemplate DevExtreme DataGrid?


I am using ASP.NET MVC .Net Framework. It does invoke the Javascript method but not sure how to extract the column data from data parameter. When I debug it, data has too many objects inside.

enter image description here

This is my code

@(Html.DevExtreme().DataGrid<SampleOrder>()
    .ElementAttr(new { @class = "dx-card wide-card" })
    .DataSource(d => d.Mvc().Controller("SampleData").LoadAction("Get").Key("OrderId"))
    .ShowBorders(false)
    .FilterRow(f => f.Visible(true))
    .FocusedRowEnabled(true)
    .FocusedRowIndex(0)
    .ColumnAutoWidth(true)
    .ColumnHidingEnabled(true)
    .Columns(columns => {
        columns.AddFor(m => m.OrderId);
        columns.AddFor(m => m.OrderDate);
        columns.AddFor(m => m.CustomerName);
        columns.Add()
            .CellTemplate(new JS("transformData"));
        columns.AddFor(m => m.ShipCity);
    })
    .HeaderFilter(c => c.Search(x => x.Enabled(true)).Visible(true))
    .Paging(p => p.PageSize(10))
    .Pager(p => p
        .ShowPageSizeSelector(true)
        .AllowedPageSizes(new[] { 5, 10, 20 })
        .ShowInfo(true)
    )
)

<script>    
    
    function transformData(data) {        
        return data.ShipCountry.toUpperCase();
    }
</script>

Solution

  • You should try:

     function transformData(container, options) {        
            // your code : and u can get data in datagrid from options
     }