Formting TimeSpan in a grid column

Is there a specific reason why TimeSpan isn't a recognised type of a column, and that formatting of TimeSpan isn't supported?

If there isn't, is there any chance that support for it will be added?


8 Replies 1 reply marked as answer

MS Monisha Saravanan Syncfusion Team May 23, 2022 01:13 PM UTC

Hi Stuart,


Greetings from Syncfusion support.


We suspect that you are facing an issue with Timespan column. We suggest you to use template feature of the DataGrid to apply the required timespan format. Kindly check the attached code snippet and sample for your reference.



            <SfGrid DataSource="@GridData" AllowPaging="true">

                <GridColumns>

                   

                   

                    <GridColumn  Field=@nameof(OrdersDetails.MyTimeSpan)  HeaderText="My TimeSpan1">

                         <Template>

                             @{

                                var a = (context as OrdersDetails);

                                @a.MyTimeSpan.ToString("mm\\:hh\\:ss");

 

                             }

                          </Template>

                    </GridColumn>

                </GridColumns>

            </SfGrid>

        </div>

    </div>

</div>

 

@code{

    public List<OrdersDetails> GridData { get; set; }

 

    protected override void OnInitialized()

    {

        GridData = Enumerable.Range(1, 7).Select(x => new OrdersDetails()

        {

            OrderID = 1000 + x,

            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

            Freight = 2.1 * x,

            OrderDate = DateTime.Now.AddDays(-x),

            MyTimeSpan = new TimeSpan(4, x, 0)

        }).ToList();

    }

 

    public class OrdersDetails

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

        public string ShipCountry { get; set; }

        public TimeSpan MyTimeSpan { get; set; }

    }

}


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Forum-175751-Timespan-653203527.zip


Kindly get back to us if you have further queries.


Regards,

Monisha.



SH Stuart Hemming May 23, 2022 03:24 PM UTC

That's pretty much what I am doing, but that wasn't the question;

Is there a specific reason why TimeSpan isn't a recognised type of a column, and that formatting of TimeSpan isn't supported?

And

If there isn't, is there any chance that support for it will be added?


MS Monisha Saravanan Syncfusion Team May 24, 2022 01:43 PM UTC

Hi Stuart,


Thanks for contacting Syncfusion support.


We have considered it as a usability improvement and logged a task “Need to provide format support for Timespan column”. We have planned to implement and include this improvement in our upcoming release upcoming 2022 Vol 2 SP release.



You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. You can also communicate with us regarding the open feature any time using our above feedback report page.


https://www.syncfusion.com/feedback/35152/need-to-provide-format-support-for-timespan-column


Until then we appreciate your patience.


Regards,

Monisha



Marked as answer

MS Monisha Saravanan Syncfusion Team October 5, 2022 01:21 PM UTC

Hi Stuart,


Sorry for the inconvenience caused.


Due to some unforeseen circumstances, we could not implement this support in our latest release. We have planned to implement this in our upcoming Volume 4 Service pack, 2022 release.


Disclaimer : Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.


We will update you once the release is rolled out. Until then we appreciate your patience.


Regards,

Monisha



MS Monisha Saravanan Syncfusion Team February 17, 2023 01:02 PM UTC


Hi Stuart,


Sorry for the inconvenience. 


We understand the importance of constantly improving our product to meet the needs of our customers.


Unfortunately, we were unable to include your request in our 2023 Volume 1 release Wishlist. Our 2023 Volume 1 roadmap has been carefully planned and focuses on previously postponed items. However, we appreciate your suggestion and would like to assure you that we have taken note of your request.


We will update you the status of your request after 2023 Volume 1 release. Until then we appreciate your patience.


In the meantime, please accept our apologies for any inconvenience this may cause. We value your patience and understanding as we work to continually enhance our product.


If you have any further questions or concerns, please do not hesitate to reach out to us. We are always here to help.


Regards,

Monisha



MS Monisha Saravanan Syncfusion Team April 13, 2023 11:17 AM UTC


Hi Stuart,


Thanks for the patience.


We have provided TimeOnly support in our latest version. So we suggest you to make use of Timeonly column at your end instead of using TimeSpan. Kindly refer the below attached documentation  and code snippet for your reference.


 

<SfGrid DataSource="@Orders" AllowPaging="true">

    <GridPageSettings PageSize="5"></GridPageSettings>

    <GridColumns>

       

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.DateOnly" TextAlign="TextAlign.Right" Width="130"></GridColumn>

        <GridColumn Field=@nameof(Order.OrderTime) HeaderText="Order Time" Format="mm\\:hh\\:ss" Type="ColumnType.TimeOnly" TextAlign="TextAlign.Right" Width="130"></GridColumn>        

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>

    </GridColumns>

</SfGrid>

 

@code{

    public List<Order> Orders { get; set; }

 

    protected override void OnInitialized()

    {

        Orders = Enumerable.Range(1, 10).Select(x => new Order()

        {

            OrderID = 1000 + x,

            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

            Freight = 2.1 * x,

            OrderDate = new DateOnly(2023, 2, x),

            OrderTime = new TimeOnly(x, 00)

        }).ToList();

    }


Reference: https://blazor.syncfusion.com/documentation/datagrid/data-binding#list-binding


Please let us know if you have any concerns.




AC Andrej Cacala November 9, 2024 12:13 PM UTC

Hello, 

When I have property type of TimeSpan it is still not working. It always display as HH:mm:ss and not only HH:mm when I specify. Will this type be supported or not? Thank you


            <GridColumn HeaderText="Duration"

                        Field="@($"{nameof(FlightDto.Duration)}")"

                        Type="ColumnType.TimeOnly" Format="HH:mm" AutoFit="true" TextAlign="TextAlign.Center">

            </GridColumn>

public class FlightDto{

   public TimeSpan Duration { get; set; }

}



PS Prathap Senthil Syncfusion Team November 11, 2024 02:48 PM UTC

Hi Andrej,

Based on the reported issue, it seems that you have used the column type as TimeOnly, but the property type is TimeSpan. This is why you are facing the problem. We suggest resolving the issue by changing the property type to TimeOnly to achieve the desired result. Please refer to the code snippet below for your reference.


<SfGrid DataSource="@FlightData" Height="300" Width="500" AllowFiltering="true" AllowSorting="true" AllowPaging="true">

    <GridColumns>

        <GridColumn HeaderText="Id" Width="60" TextAlign="TextAlign.Center">

          

        </GridColumn>

 

        <GridColumn HeaderText="Duration" Type="ColumnType.TimeOnly"

                    Field="@($"{nameof(FlightDto.Duration)}")"

                    Format="HH:mm"  TextAlign="TextAlign.Center">

        </GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

 

    public class FlightDto

    {

        public int Id { get; set; }

        public TimeOnly Duration { get; set; }

    }

}

 


Sample:https://blazorplayground.syncfusion.com/embed/hZrziiWsfJOBAFVY?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5


Regards,
Prathap Senthil


Loader.
Up arrow icon