How to highlight row programatically in real-time

[Andrius]

Hi,

I have a grid and a time-based event behind. I need to highlight grid row based on the row index after a certain time. 

For example, 

when by time-based event hits 0 seconds, I need to select grid row where index = 0

when by time-based event hits 1 second I need to select grid row where index = 1

when by time-based event hits 8 seconds, I need to select grid row where index = 2

when by time-based event hits 13 seconds, I need to select grid row where index = 3

when by time-based event hits 15 seconds, I need to select grid row where index = 4

etc.

By time-based event looks following:

public async Task OnEvent(State state)

    {

       var currentTime = state.CurrentTime;

        var currentViewData = Grid.CurrentViewData.ToList();

        var myModelList = currentViewData.Cast<myModel>().Where(ssm => ssm != null).ToList();

        modelToHighlight = myModelList.OrderBy(d => d.Time).FirstOrDefault(s => s.Time.TotalSeconds > currentTime);        

        var index = myModelList.IndexOf(modelToHighlight);

}

I have a row index, I just cannot find a way how to highlight a row in real-time. 

Any guidance is highly appreciated

[Rahul Narayanasamy]

Hi Andrius, 

Greetings from Syncfusion. 

Query: How to highlight row programatically in real-time - I have a grid and a time-based event behind. I need to highlight grid row based on the row index after a certain time. 

We have validated your query and you want to select the rows programmatically after certain time. You can achieve your requirement by using SelectRow method with Time delay. Find the below code snippets and sample for your reference. 

 

<button @onclick="Select">Select</button> 

 

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

    <GridSelectionSettings Type="SelectionType.Multiple"></GridSelectionSettings> 

    <GridColumns> 

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

        . . . 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    SfGrid<Order> Grid; 

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

 

    . . . 

 

    public async Task Select() 

    { 

        await Task.Delay(1000); 

        await Grid.SelectRow(0);    //it will select the particular row after 1 second 

        await Task.Delay(1000); 

        await Grid.SelectRow(1);    // it will select the particular row after 2 seconds 

        await Task.Delay(6000); 

        await Grid.SelectRow(2);    // it will select the particular row after 8 seconds 

        await Task.Delay(5000); 

        await Grid.SelectRow(3);    // it will select the particular row after 13 seconds 

        await Task.Delay(2000); 

        await Grid.SelectRow(4);    // it will select the particular row after 15 seconds 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/160081/ze/BlazorAppSample1-1618651862  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Andrius]

Hi Rahul,

Thank you for your suggestion. I did try your suggested method, however, that is not exactly what I need. 

Row selection is not an option as the grid needs to be interactive for the user and if I use select row method, a different row will be selected and the user will lose focus on his/her selected cell. Is it possible just to highlight cell without any selection change? 

For example, after 1 second 1 row is highlighted. User is selected cell in a first row, second column and is in process of editing data in that cell.

After 2nd second, the grid will select the second row, and the user will lose focus on his/her cell where he/she was doing amendments.

And this is not what's I'm trying to achieve. All I need is that the second row would be highlighted in a different colour, but users would not lose selection from his/her selected cell.

I hope the above makes more sense. Please let me know if any further scenario clarification is required. 

[Rahul Narayanasamy]

Hi Andrius, 

Thanks for the update. 

Query: if I use select row method, a different row will be selected and the user will lose focus on his/her selected cell. Is it possible just to highlight cell without any selection change?  

We have validated your query and you want to select the next row without losing the previously selected row. You can achieve your requirement by using SelectRows method with Time delay. Here, we have prepared a sample based on your requirement. Find the below code snippets and sample for your reference. 

 

<button @onclick="Select">Select</button> 

 

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

    <GridSelectionSettings Type="SelectionType.Multiple"></GridSelectionSettings> 

    <GridColumns> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    SfGrid<Order> Grid; 

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

    public List<double> Indexes { get; set; } = new List<double>(); 

 

    . . . 

 

    public async Task Select() 

    { 

        Indexes.Add(0); 

        await Task.Delay(1000); 

        await Grid.SelectRows(Indexes.ToArray()); 

        Indexes.Add(1); 

        await Task.Delay(1000); 

        await Grid.SelectRows(Indexes.ToArray()); 

        Indexes.Add(2); 

        await Task.Delay(6000); 

        await Grid.SelectRows(Indexes.ToArray()); 

        Indexes.Add(3); 

        await Task.Delay(5000); 

        await Grid.SelectRows(Indexes.ToArray()); 

        Indexes.Add(4); 

        await Task.Delay(2000); 

        await Grid.SelectRows(Indexes.ToArray()); 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/160081/ze/SAmpleBlazorApp1-1923945392  

Please let us know if you have any concerns. 

Regards, 

Rahul