Last Updated: 25 Sep 2020 11:59 by ADMIN
Created on: 25 Sep 2020 11:57
Category: Grid
Type: Bug Report
Async calls in Grid events prevent you from updating the grid State

If I add an await-ed call in the OnRowClick handler, then I cannot alter the grid state later in the code. It only works if the method is called again (e.g., a second click on the same row).


This affects other Grid events too, for example, the PageChanged


A workaround is to use synchronous code (remove the await call):

@inject IJSRuntime JsInterop

<TelerikGrid Data="@salesTeamMembers" OnRowClick="@OnRowClickHandler" @ref="@GridRef">
            var employee = context as MainModel;
            <TelerikGrid Data="employee.Orders" Pageable="true" PageSize="5">
                    <GridColumn Field="OrderId"></GridColumn>
                    <GridColumn Field="DealSize"></GridColumn>
        <GridColumn Field="Id"></GridColumn>
        <GridColumn Field="Name"></GridColumn>

@code {
    List<MainModel> salesTeamMembers { get; set; }
    TelerikGrid<MainModel> GridRef { get; set; }

    async Task OnRowClickHandler(GridRowClickEventArgs args) {
        // After adding this line, it now requires a double click when the InvokeAsync call uses "await"
         var width = JsInterop.InvokeAsync<int>("getWidth");

        var model = args.Item as MainModel;
        int index = salesTeamMembers.IndexOf(model);
        //todo: you may want to take paging into account for example, or use js interop to get the index of the row based on contents from it like id
        if (index > -1) {
            var state = GridRef.GetState();
            state.ExpandedRows = new List<int> { index };

            await GridRef.SetState(state);


    protected override void OnInitialized() {
        salesTeamMembers = GenerateData();

    private List<MainModel> GenerateData() {
        List<MainModel> data = new List<MainModel>();
        for (int i = 0; i < 5; i++) {
            MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
            mdl.Orders = Enumerable.Range(1, 15).Select(x => new DetailsModel { OrderId = x, DealSize = x ^ i }).ToList();
        return data;

    public class MainModel {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<DetailsModel> Orders { get; set; }

    public class DetailsModel {
        public int OrderId { get; set; }
        public double DealSize { get; set; }