We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

How to bind TimeSpan value to Grid column

We cannot bind the Timespan value directly to the grid columns. This is a known limitation due to the fact that there is no Timespan datatype in Javascript. Also the .Net JavascriptSerailizer will serializes the TimeSpan object to Complex object, and hence trying to bind the Timespan value directly in grid columns will display the column value as [object Object].

In such cases, we can use the Column template feature of the grid to display the TimeSpan values in desired format.

For example we can use the following Jsrender custom converter to format the timespan value.

 

In the following code snippets, we have demonstrated, how to use the column template to display the timespan value in grid.

Grid Initialization

JS

 

MVC

ASPX

 

The grid data has been returned from the below function.

 

The output will be as follows.

C:\Users\madhup\Pictures\timespan[object].PNG

Figure 1: Grid with Timespan column without using template - see highlighted column

Figure 2: Grid with Timespan column using template - see highlighted column

Article ID: Published Date: Last Revised Date: Platform: Control:
4107 02/20/2015 08/06/2015 ASP.NET MVC Grid
Did you find this information helpful?
Comments
Mika Kahilainen Jan 19, 2016
If summary is added (for Worked Hours) column it will output sum of time in decimal format. How summary can be formatted to maintain time format like 00:30:00 instead of 0.5 hours?
Reply
Madhu Sudhanan P [Syncfusion] Jan 20, 2016
Hi Mika, Since WorkedHours column is a complex object using summary will provide un-expected result and hence we can use custom summary option to show correct values. Please refer the below code example. @(Html.EJ().Grid("Grid") . . . . .SummaryRow(row => { row.SummaryColumns(col => { col.SummaryType(SummaryType.Custom).CustomSummaryValue("TimeSpanCounter").Format("{0:D2}").Add(); }).Add(); }) ) The formatting of the result is done with the formatting method of the grid. The custom summary method will be provided with two arguments summary details and the current view data of the grid. Regards, Madhu Sudhanan. P
Add Comment
You must log in to leave a comment

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.