Format date in column template

[Gary Whiteside]

Can you format the date in a column template? I want to display MeetingDate in the format dd/mm/yyyy on my grid

@{Html.EJ().Grid<Object>("FlatGrid")
                .Datasource(@Model)
                .AllowPaging()
                .PageSettings(page => { page.PageSize(30); page.EnableQueryString(true); })
                .IsResponsive(true)
                .AllowTextWrap()
                .AllowResizeToFit()
                .AllowSelection(false)

                    .Columns(col =>
                    {
                        col.Field("MeetingDate").HeaderText("Meeting Date").Width("8%").Template("<a rel='nofollow' href=\"/Orals/QuestionTimeDetails?mId ={{:MeetingId}} \">{{:MeetingDate}}</a>").Add();
                        col.Field("Name").HeaderText("Department").Width("35%").Add();
                        col.Field("OpeningDate").HeaderText("Opening Date").Format("{0:dd/MM/yyyy}").Width("8%").Add();
                        col.Field("ClosingDate").HeaderText("Closing Date").Format("{0:dd/MM/yyyy}").Width("8%").Add();
                    }).Render();
        }

[Farveen Sulthana Thameeztheen Basha]

Hi Gary, 

Thanks for contacting Syncfusion Support. 

We have checked your query and achieved your requirement using TemplateRefresh event of the Grid. In the TemplateRefresh event of the Grid, we have find the corresponding template value and set the format for the date value.   

Please refer to the code example:- 

<script type="text/x-jsrender" id="columnTemplate"> 

    <a> {{:OrderDate}} </a> 

</script> 

@(Html.EJ().Grid<EmployeeView>("ColumnTemplate") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

        .AllowPaging() 

        .ClientSideEvents(eve => eve.TemplateRefresh("refresh")) 

        .Columns(col => 

        { 

            col.HeaderText("Employee Image").Template("#columnTemplate").TextAlign(TextAlign.Center).Width(110).Add(); 

             

        }) 

) 

        <script type="text/javascript"> 

            function refresh(args) { 

              $(args.cell).find("a").text(ej.format(args.data.OrderDate, "MM/dd/yyyy")) 

            } 

        </script> 

Refer to the API link:- 

https://help.syncfusion.com/api/js/ejgrid#events:templaterefresh 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Gary Whiteside]

Thanks for your help Farveen, that worked for me.

If I wanted to upgrade my grid to ASP.NET Core what is .ClientSideEvents(eve => eve.TemplateRefresh("refresh")) replaced with?

Ive copied a sample of code below from your website, where would the ClientSideEvents property go to refresh the template field as in my example?

<div class="control-section">
    <ejs-grid id="Grid" dataSource="ViewBag.dataSource" width="auto" height="359" >
        <e-grid-columns>
            <e-grid-column headerText="Employee Image" template="#template" textAlign="Center" width="150" ></e-grid-column>
            <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="125"></e-grid-column>
            <e-grid-column field="FirstName" headerText="First Name" width="120"></e-grid-column>
            <e-grid-column field="Title" headerText="Title" width="170"></e-grid-column>
            <e-grid-column field="HireDate" headerText="Hire Date" format='yMd' textAlign="Right" width="135"></e-grid-column>
            <e-grid-column field="ReportsTo" headerText="Reports To" width="120"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>
</div>

[Farveen Sulthana Thameeztheen Basha]

Hi Gary, 

As per your requirement, we have converted the equivalent code in ASP.NET core for how to format date in ColumnTemplate using template-refresh event as like given below.  Please refer to the code example:- 

<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.datasource" template-refresh="refresh" allow-filtering="true"> 

                        <e-columns> 

                <e-column field="OrderID" header-text="Order ID" is-primary-key="true"></e-column> 

                <e-column  header-text="Order Date" template="#columnTemplate"></e-column> 

                .   .    . 

                

            </e-columns> 

        </ej-grid> 

     

        <script type="text/x-jsrender" id="columnTemplate"> 

            <a> {{:OrderDate}} </a> 

        </script>  

        <script> 

            function refresh(args) { 

                $(args.cell).find("a").text(ej.format(args.data.OrderDate, "MM/dd/yyyy"))  

 

            } 

       </script> 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T