<TelerikGrid Data="@GridData" EditMode="@GridEditMode.Incell" Navigable="true"
             OnEdit="@EditItem" OnUpdate="@UpdateItem">
    <GridColumns>
        <GridColumn Field="@nameof(GridModel.Foo)" Title="Foo (bug)" />
        <GridColumn Field="@nameof(GridModel.Bar)" Title="Bar (workaround)">
            @*<EditorTemplate>
                @{
                    var item = context as GridModel;
                    // workaround 1
                    if (item.IsEditable)
                    {
                        <TelerikTextBox @bind-Value="@item.Bar" />
                    }
                    else
                    {
                        <span class="k-textbox k-input k-rounded-md">
                            <input class="k-input-inner" tabindex="0" readonly value="@item.Bar" />
                        </span>
                    }
                }
            </EditorTemplate>*@
        </GridColumn>
        <GridColumn Field="@nameof(GridModel.IsEditable)" Title="Is Row Editable?" Editable="false" />
    </GridColumns>
</TelerikGrid>

@code {
    List<GridModel> GridData { get; set; }

    void EditItem(GridCommandEventArgs args)
    {
        GridModel item = args.Item as GridModel;
        if (!item.IsEditable)
        {
            args.IsCancelled = true;
        }
    }

    void UpdateItem(GridCommandEventArgs args)
    {
        var argsItem = args.Item as GridModel;
        var index = GridData.FindIndex(i => i.Id == argsItem.Id);
        // workaround 2
        //if (index != -1 && argsItem.IsEditable)
        //{
            GridData[index] = argsItem;
        //}
    }

    protected override void OnInitialized()
    {
        GridData = new List<GridModel>();

        for (int i = 1; i <= 5; i++)
        {
            GridData.Add(new GridModel()
            {
                Id = i,
                Foo = "Foo " + i.ToString(),
                Bar = "Bar " + i.ToString(),
                IsEditable = i % 2 == 0
            });
        }
    }

    public class GridModel
    {
        public int Id { get; set; }
        public string Foo { get; set; }
        public string Bar { get; set; }
        public bool IsEditable { get; set; }
    }
}

.....
-->>Clicking on Button for changing grid mode and visibility of columns**
<TelerikToggleButton Title="Oznaceni vice radku" Icon="@FontIcon.ListUnordered" OnClick="@( _  =>{ CurrentStackItem.gSelectionMode=(CurrentStackItem.gSelectionMode==GridSelectionMode.Multiple)?GridSelectionMode.Single:GridSelectionMode.Multiple;CurrentStackItem.gSelectedItems = Enumerable.Empty<ExpandoObject>();})"
				Selected="@(CurrentStackItem.gSelectionMode==GridSelectionMode.Multiple)"></TelerikToggleButton>
....
<GridColumns>
-->>First "static" 2 columns**
<GridCheckboxColumn Visible=@(CurrentStackItem.gSelectionMode==GridSelectionMode.Multiple) @key="@("sIDX")" Width="70px" Locked="true" SelectAll="true" SelectAllMode="GridSelectAllMode.Current"></GridCheckboxColumn><GridColumn FieldType=@typeof(bool) Visible=@(IsPicker==true || (XSmall==false && CurrentStackItem.gSelectionMode==GridSelectionMode.Single )) @key="@("sCMD")" Filterable="false" Sortable="false" Locked="true" Width="@((IsPicker==true && XSmall==true)?"45px":"120px")">
			<HeaderTemplate>&nbsp;</HeaderTemplate><Template Context="ctx"><div @onclick:preventDefault="true" @onclick:stopPropagation="true">

-->> THIS part is hitting LOT OF TIME in debug (expected is at best only once)
				@{if (XSmall==false)
					{
-->> here is LOT OF dynamic buttons.

				}
					</div></Template></GridColumn>

-->> rest of the dynamic columns. In video, starting with "ciiislo org" in header

			@if (GridDef.ColStore != null && GridDef.ColStore.Any())
			{
				foreach (var it in GridDef.ColStore.Where(x => x.Verejny == true))
				{
					<GridColumn @key=@it.FldName Field=@it.FldName FieldType=@it.FldType Title=@it.VerejnyNazev ShowFilterCellButtons="false" Width=@it.cSirkaSestava
					TextAlign=@it.cZarovnani 
					><FooterTemplate>
							@if (it.Sumovat == true)
							{
								@context.Sum
							}
						</FooterTemplate></GridColumn>
				}
			}
		</GridColumns>

<style>
    .my-grid .k-link {
        padding-right: 40px;
    }
</style>

<TelerikGrid Data="@MyData"
             Class="my-grid"
             Pageable="true"
             PageSize="5"
             FilterMode="@GridFilterMode.FilterMenu"
             Sortable="true"
             Resizable="true"
             ShowColumnMenu="true">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="80px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name"/>
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@code {
    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    });

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

<TelerikGrid Data=@GridData Pageable="true" Height="300px">
    <GridColumns>
        <GridColumn Field="@(nameof(Employee.EmployeeId))">
            <FooterTemplate>
                some footer
            </FooterTemplate>
        </GridColumn>
        <GridColumn Field=@nameof(Employee.Salary) Title="Salary">
        </GridColumn>
        <GridColumn Field=@nameof(Employee.Name)>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public List<Employee> GridData { get; set; } // = new List<Employee>(); // workaround

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public decimal Salary { get; set; }
    }
}