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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to bind TimeSpan value to Grid column

Platform: ASP.NET MVC |
Control: Grid

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






The grid data has been returned from the below function.


The output will be as follows.


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

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

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
You must log in to leave a comment
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
<div><p></p><div class="pasteContent" style="display:inline;">Hi Mika,</div><p></p><p></p><div class="pasteContent" style="display:inline;">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.</div><p></p><p></p><div class="pasteContent" style="display:inline;">@(Html.EJ().Grid&lt;object&gt;("Grid")</div><p></p><p></p><div class="pasteContent" style="display:inline;"> . . . . .</div><p></p><p></p><div class="pasteContent" style="display:inline;">SummaryRow(row =&gt; {</div><p></p><p></p><div class="pasteContent" style="display:inline;"> row.SummaryColumns(col =&gt; { col.SummaryType(SummaryType.Custom).CustomSummaryValue("TimeSpanCounter").Format("{0:D2}").Add();</div></div><div><div class="pasteContent" style="display:inline;"> }).Add();</div></div><div><div class="pasteContent" style="display:inline;"> })</div></div><div><span style="background-color: unset; text-align: inherit;"> </span><span style="background-color: unset; text-align: inherit; font-family: Roboto, &quot;Segoe UI&quot;, GeezaPro, &quot;DejaVu Serif&quot;, sans-serif, -apple-system, BlinkMacSystemFont;">)</span></div><div><div class="pasteContent" style="display:inline;">&lt;script type="text/javascript"&gt;</div></div><div><div class="pasteContent" style="display:inline;"></div></div><div><div class="pasteContent" style="display:inline;">function TimeSpanCounter(summary, data) {</div></div><div><div class="pasteContent" style="display:inline;"><br></div></div><div><div class="pasteContent" style="display:inline;">data = ej.select(data, ["WorkedHours"]);</div></div><div><div class="pasteContent" style="display:inline;"><br></div></div><div><div class="pasteContent" style="display:inline;">/</div><span style="background-color: unset; text-align: inherit; font-family: Roboto, &quot;Segoe UI&quot;, GeezaPro, &quot;DejaVu Serif&quot;, sans-serif, -apple-system, BlinkMacSystemFont;">/Helper to calulate the total time var getter = function (prop, divisor, prev) {</span></div><div><span style="background-color: unset; text-align: inherit; font-family: Roboto, &quot;Segoe UI&quot;, GeezaPro, &quot;DejaVu Serif&quot;, sans-serif, -apple-system, BlinkMacSystemFont;"><br></span></div><div><div class="pasteContent" style="display:inline;">var f = ej.select(data, [prop]), sum = 0 (prev || 0);</div></div><div><div class="pasteContent" style="display:inline;"><br></div></div><div><div class="pasteContent" style="display:inline;">sum = ej.sum(f);</div></div><div><div class="pasteContent" style="display:inline;"></div></div><div><div class="pasteContent" style="display:inline;">if (prop == "Hours")</div></div><div><div class="pasteContent" style="display:inline;">return sum;</div></div><div><div class="pasteContent" style="display:inline;"><br></div></div><div><div class="pasteContent" style="display:inline;">return { prev: ~~(sum / divisor), org: sum % divisor</div></div><div><div class="pasteContent" style="display:inline;"> };</div></div><div><div class="pasteContent" style="display:inline;"> };</div></div><div><div class="pasteContent" style="display:inline;"><br></div></div><div><div class="pasteContent" style="display:inline;">var sec = getter("Seconds", 60), min = getter("Minutes", 60, sec.prev), hours = getter("Hours");</div></div><div><div class="pasteContent" style="display:inline;"><br></div></div><div><div class="pasteContent" style="display:inline;">return this.formatting(summary.format, hours) " : " this.formatting(summary.format, min.org) " : " this.formatting(summary.format, sec.org);</div></div><div><div class="pasteContent" style="display:inline;"><br></div></div><div><div class="pasteContent" style="display:inline;">}</div></div><div><div class="pasteContent" style="display:inline;">&lt;/script&gt;</div></div><div><div class="pasteContent" style="display:inline;"><br></div></div><div><div class="pasteContent" style="display:inline;">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.</div></div><div><div class="pasteContent" style="display:inline;"><br></div></div><div><div class="pasteContent" style="display:inline;">Regards,</div></div><div><div class="pasteContent" style="display:inline;">Madhu Sudhanan. P </div><br><p></p></div>

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon 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.Close Icon

Live Chat Icon For mobile