Live Updating Timespan in grid column

[liamcannon]

Hi Guys,

I've been working on implementing a queue using Sfgrids but have been stuck. I have a column that contains the "TimeInQueue' for the particular entry. 

For the sake of this I've trimmed the EFCore generated model.

 

public partial class FirstPiece // EFCORE

    {

        public int FirstPieceId { get; set; }

        public DateTime TimeIn { get; set; }

        public DateTime? TimeOut { get; set; }

    }

because I don't want a column that stores the timeinqueue in my database I made another first piece partial class

public partial class FirstPiece

    {

        public TimeSpan TimeInQueue => DateTime.Now - TimeIn;

        public string TimeInQueueString => TimeInQueue.ToString(@"hh\:mm");

        public string TimeInQueueColor

        {

            get

            {

                if (TimeInQueue.TotalMinutes <= 30)

                {

                    return "green";

                }

                else if (TimeInQueue.TotalMinutes <= 120)

                {

                    return "yellow";

                }

                else

                {

                    return "red";

                }

            }

        }

    }

Razor Page

<GridColumn Field="@nameof(FirstPiece.FirstPieceId)" Visible="false" IsPrimaryKey="true"></GridColumn>

  <GridColumn Field="@(nameof(FirstPiece.TimeInQueueString))" Visible="true" HeaderText="Time in Queue" Format="hh:mm:ss"></GridColumn>

-- code

private async void OnTimerElapsed(object sender, ElapsedEventArgs e)

    {

        if (skip > 90000)

        {

            skip = 0;

        }

        var currentTimeinQueue = DateTime.Now - queuedFirstPieces[skip].T;

        queuedFirstPieces[skip].TimeInQueue = DateTime.Now - queuedFirstPieces[skip].T;

        await grid.SetRowDataAsync(queuedFirstPieces[skip].FirstPieceId, queuedFirstPieces[skip]);

        skip++;

        await InvokeAsync(StateHasChanged);

    }

Note: The Current OnTimerElapsed does have syntax errors it's just my most recent attempt to get this to work.
- If I didn't provide enough information let me know.

My final goal would be to have x rows each with their own counters incrementing every minute or so.

Thank you

[Monisha Saravanan]

Hi Liam,

Greetings from Syncfusion.

We have prepared an simple sample which update the time only column at certain time interval using SetRowDataAsync method. Kindly check the below attached code snippet and sample for your reference.

Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetRowDataAsync_System_Object__0_

We would like to inform that the SetRowDataAsync will work based on the primary key column value and if the timer is started before the Grid rendering then there is a possibility that it will not update the row properly. So kindly try using timercallback function at the DataBound Event of Grid.

If the reported issue is not resolved then kindly try updating the values using UpdateRowAsync method of DataGrid

Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdateRowAsync_System_Int32__0_

 

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

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

    <GridEvents DataBound="Databound" TValue="Order"></GridEvents>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>

   </GridColumns>

</SfGrid>

 

@code{

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

    public SfGrid<Order> Grid { get; set; }

    private Timer timer;

    public void Databound()

    {

        timer = new Timer(UpdateQueuedPieces, null, 1, 1000);

    }

    protected override void OnInitialized()

    {

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

        {

            OrderID = 1000 + x,

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

            Freight = 2.1 * x,

 

            TimeInQueue = new TimeOnly(x, 00)

        }).ToList();

       //timer = new Timer(UpdateQueuedPieces, null, 1, 1000);

    }

    public int x = 0;

    private async void UpdateQueuedPieces(object state)

    {

        if (Grid != null)

        {

           

                foreach (var piece in Orders)

            {

                piece.TimeInQueue = piece.TimeInQueue.Value.AddMinutes(1);

                await Grid.SetRowDataAsync(piece.OrderID, piece);

                }

              

        }

        await InvokeAsync(StateHasChanged);

      

 

    }

}

If you still face the reported issue then kindly share the below mentioned details from your end.

1. Share us the entire Grid code snippet.
2. Kindly call the method (OnTimerElapsed) in the button click and check whether you are facing the same issue at your end?.
3. Share us the video demonstration of the issue.
4. If possible kindly share us a simple issue replicating sample from your end.

The above requested details would be very helpful for us to validate the reported issue at our end.

Regards,

Monisha

Attachment: BlazorApp1_9d6b48ca.zip