Format Date in template column

[Aaron Khan]

How do you format a date in a template column. Example Template: "<a rel='nofollow' href='/Test/Edit/${id}'>${some_date}</a>"

[Pavithra Subramaniyam]

Hi Aaron, 

You can format the template column in the queryCellInfo event of Grid component which will be triggered while accessing every cell. In that event you can format the template column value by using getDateFormat method. We have prepared a simple sample based on your requirement. Please refer to the below code example , Documentation link and sample link. 

[index.chtml] 

@Html.EJS().Grid("FlatGrid").DataSource(dataManger => 

{ 

    dataManger.Url("http://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders/?$top=7").CrossDomain(true).Adaptor("ODataAdaptor"); 

}).Width("auto").Columns(col => 

   { 

       col.HeaderText("Order Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Format("yMd").Type("date").Template("#template").Width("150").Add(); 

       .   .   . 

   }).QueryCellInfo("queryCellInfo"). Render() 

 

 

<script id="template" type="text/x-template"> 

    ${OrderDate} 

</script> 

 

<script> 

    function queryCellInfo(args) { 

        if (args.column.headerText == 'Order Date') { 

            var intl= new ej.base.Internationalization(); 

            var dFormatter = intl.getDateFormat({ skeleton: 'yMd', type: 'date' }); 

            var formattedDate = dFormatter(args.data.OrderDate); 

            args.cell.innerText = formattedDate; 

        } 

    } 

</script> 

Documentation: https://ej2.syncfusion.com/16.1.37/aspnet/documentation/base/intl.html?syntax=tag#manipulating-datetime 

                              https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html#querycellinfo  

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJGrid-1019067245  

Regards, 

Pavithra S. 

[Aaron Khan]

This works perfectly thank you.

[Pavithra Subramaniyam]

Hi Aaron, 

Thanks for your update. 

We are happy to hear that the provided solution helps you. 

Please contact us if you have any queries. 

Regards, 

Pavithra S.