# DataGrid selected item highlight

**URL:** <https://forum.radzen.com/t/datagrid-selected-item-highlight/21753>\
**Category:** Radzen.Blazor Components\
**Created:** [October 26, 2026, 11:59pm UTC](https://forum.radzen.com/t/datagrid-selected-item-highlight/21753 "2026-10-26T23:59:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![vlado](https://forum.radzen.com/letter_avatar_proxy/v4/letter/v/779978/32.png) [@vlado](https://forum.radzen.com/u/vlado)\
**Post date:** [October 26, 2026, 11:59pm UTC](https://forum.radzen.com/t/datagrid-selected-item-highlight/21753/1 "2026-10-26T23:59:46Z")

</div>

I have stored ID of active row in my config . When I set the selected item in Task OnInitializedAsync() I want to highlight the row of Datagrid when the page started.

\<RadzenDataGridSk AllowFiltering="true" AllowColumnResize="true" AllowAlternatingRows="true" @refref="grid"  
FilterMode="FilterMode.Advanced" AllowSorting="true" PageSize="15" AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true"  
Data="orders" TItem="Zakazka\_mdl" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or" Density="Density.Compact" GridLines="DataGridGridLines.Vertical" SelectionMode="DataGridSelectionMode.Singl@bind-Value" @bind-Value="@selectedOrders"\>

I tried to use OnAfterRenderAsync(first render), but this method starts to run immediatly after calling first api data loading, when the Datagrid is still null. I don't know how to do it.  
When I set the selected item by button, it works. I can see it because datasets in the Datagrid are dynamically filtered through the master dropdown.

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [October 27, 2026, 5:32am UTC](https://forum.radzen.com/t/datagrid-selected-item-highlight/21753/2 "2026-10-27T05:32:48Z")

</div>

The grid highlights the rows whose items are in the Value collection. Two things decide whether that works on startup:

1. How items are matched. Without KeyProperty the grid compares the selected item with the rows by reference (or by your class's Equals override). If you create the selected item from the stored ID, e.g. new Zakazka\_mdl { ID = savedId }, it is a different object than the one in orders and no row matches. Either take the instance from the loaded data:

2. How the grid notices the change. It compares the Value list by reference, so assign a new list as above instead of adding to the list that is already bound (selectedOrders.Add(...) will not refresh the highlight).

Doing this in OnInitializedAsync after the data has loaded is enough; you do not need OnAfterRenderAsync or the grid reference. One more thing to check: with AllowPaging and PageSize 15 the row is highlighted only if it is on the current page. If the selected order can be on another page, call grid.GoToPage(index / PageSize) after the first render.

While checking this we found that KeyProperty was applied only when it appeared before Data in the markup. That is fixed for the next release; until then put KeyProperty before Data if you use it.

---

<div class="post-metadata">

**Author:** ![vlado](https://forum.radzen.com/letter_avatar_proxy/v4/letter/v/779978/32.png) [@vlado](https://forum.radzen.com/u/vlado)\
**Post date:** [October 27, 2026, 5:56pm UTC](https://forum.radzen.com/t/datagrid-selected-item-highlight/21753/3 "2026-10-27T17:56:31Z")

</div>

Thanks for your answer. I tried to do it what you wrote, but it didn't work. For explanation or some analysis here is som piece of used code. I suppose that Id does not have to be a part of Column collection, does it?

```auto
 <RadzenDataGridSk AllowFiltering="true" AllowColumnResize="true" AllowAlternatingRows="true" @ref="grid"
                   FilterMode="FilterMode.Advanced" AllowSorting="true" 
                   KeyProperty="Id"
                   Data="orders" TItem="Zakazka_mdl" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or" Density="Density.Compact" GridLines="DataGridGridLines.Vertical" SelectionMode="DataGridSelectionMode.Single" @bind-Value="@selectedOrders" RowRender="@RowRender">

   <Columns>
     <RadzenDataGridColumn TItem="Zakazka_mdl" Property="Order_dod_code" Title="Číslo" Width="40px" TextAlign="TextAlign.Center" HeaderCssClass="rz-background-color-base-300" />
     <RadzenDataGridColumn TItem="Zakazka_mdl" Property="Katuz_name" Title="Kat. územie" Width="80px" HeaderCssClass="rz-background-color-base-200" />
     <RadzenDataGridColumn TItem="Zakazka_mdl" Property="Zakaznik_view" Title="Zákazník" Width="80px" HeaderCssClass="rz-background-color-base-300" />
     <RadzenDataGridColumn TItem="Zakazka_mdl" Property="Meral_view" Title="Vyhotovil" Width="80px" HeaderCssClass="rz-background-color-base-200" />
     <RadzenDataGridColumn TItem="Zakazka_mdl" Property="Zpmz" Title="ZPMZ č." Width="40px" HeaderCssClass="rz-background-color-base-300" />
     <RadzenDataGridColumn TItem="Zakazka_mdl" Filterable="false" Sortable="false" Width="40px" HeaderCssClass="rz-background-color-base-200">
       <HeaderTemplate>
         <RadzenButton Click=@(() => OnClickZakAdd(firmaName)) Icon=@MaterialIcons.AddIcon ButtonStyle="ButtonStyle.Success" Size="ButtonSize.ExtraSmall" Text="Nová" Class="me-1" Disabled=@livechange />
       </HeaderTemplate>
       <Template Context="Zakazka_mdl">
         <RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" Variant="Variant.Flat" Size="ButtonSize.ExtraSmall" Click=@(() => OnClickZakDetail(Zakazka_mdl, firmaName)) /> @*Text="@Zakazka_mdl.Id.ToString()"*@
         <RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Variant="Variant.Flat" Shade="Shade.Lighter" Size="ButtonSize.ExtraSmall" Class="my-1 ms-1" Click=@(() => OnClickZakDelete(Zakazka_mdl)) />
       </Template>
     </RadzenDataGridColumn>
     @* <RadzenDataGridColumn TItem="Zakazka_mdl" Property="Dodavatel_id" Title="Dodavatel_id." Width="80px" HeaderCssClass="rz-background-color-base-300" />*@
   </Columns>
 </RadzenDataGridSk>

```

then

```auto
 protected override async Task OnInitializedAsync()
 {........
 orders = await gpApi.GetFromJsonAsync<List<Zakazka_mdl>>($"orders?usrid={usrId}") ?? new(); // parameter z comba
 ordersDb = orders;
......
if (settings.Act_dod_id > 0)
{
  dodId = (long)settings.Act_dod_id;//nastavi combo
  OnChange(dodId); // nastavi dodavatela
  disabContinue = false;
}
else if (dods.Any() == true)
{
  dodId = dods.First().Dod_id;
  OnChange(dodId);
}

```

and OnChange(object did) method

```auto
void OnChange(object did)//, string name)//zmena combo dodavatel
{
  if (dods != null)
    dod = dods.FirstOrDefault(d => d.Dod_id.Equals(did));
  if (dod != null)
  {
    firmaName = dod.Nazov;
    disabContinue = false;
  }
  if (ordersDb != null)
  {
    orders = ordersDb.Where(o => o.Dodavatel_id.Equals(did)).ToList();

    // If the active supplier matches the selected one, highlight the active order in this grid view
    if (settings != null && settings.Act_dod_id == dod?.Dod_id && settings.Act_order_id > 0)
    {
      var activeOrder = orders.FirstOrDefault(o => o.Id == settings.Act_order_id);
      if (activeOrder != null)
      {
        selectedOrders = new List<Zakazka_mdl> { activeOrder };
        StateContainer.Zakazka = activeOrder;
      }
      else
      {
        selectedOrders = new List<Zakazka_mdl>();
        StateContainer.Zakazka = null;
      }
    }
    else
    {
      // If it's a different supplier or no active settings match, clear selection cleanly with a new empty list
      selectedOrders = new List<Zakazka_mdl>();
      StateContainer.Zakazka = null;
    }

    if (grid != null)
      grid.Reload();
  }
  StateContainer.Dodavatel = dod;

}

```

---

<div class="post-metadata">

**Author:** ![enchev](https://forum.radzen.com/user_avatar/forum.radzen.com/enchev/32/16_2.png) [@enchev](https://forum.radzen.com/u/enchev)\
**Post date:** [October 27, 2026, 9:11pm UTC](https://forum.radzen.com/t/datagrid-selected-item-highlight/21753/4 "2026-10-27T21:11:55Z")

</div>

Id does not need to be a column, and the code you posted works as written on the current source. Two things can still remove the highlight. If your RowRender handler sets `args.Attributes["class"]`, that class replaced the grid's own row classes including the selection highlight; from the next release it is merged instead. And if RadzenDataGridSk forwards `@bind-Value` before `Data`, a change of both in the same render dropped the selection; that is fixed for the next release too. Until then, append to the class in RowRender only via style, or keep `@bind-Value` after `Data`.