@using System.ComponentModel.DataAnnotations
@* Used for the model annotations only *@

<strong>REPRO: activate the validation for the Name field to see the issue - click Save with an empty input</strong>

<TelerikGrid Data=@MyData EditMode="@GridEditMode.Popup" Pageable="true" Height="500px"
             OnUpdate="@UpdateHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler">
    <GridToolBar>
        <GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>
    </GridToolBar>
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
            <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {

    public class SampleData
    {
        public int ID { get; set; }

        [Required(ErrorMessage = "aa something else")] // the first word is 1 or 2 characters to show the issue
        public string Name { get; set; }
    }

    async Task UpdateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        // perform actual data source operations here through your service

        // if the grid Data is not tied to the service, you may need to update the local view data too
        var index = MyData.FindIndex(i => i.ID == item.ID);
        if (index != -1)
        {
            MyData[index] = item;
        }
    }

    async Task DeleteHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        // perform actual data source operation here through your service

        // if the grid Data is not tied to the service, you may need to update the local view data too
        MyData.Remove(item);
    }

    async Task CreateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        // perform actual data source operation here through your service

        // if the grid Data is not tied to the service, you may need to update the local view data too
        item.ID = MyData.Count + 1;
        MyData.Insert(0, item);
    }


    public List<SampleData> MyData { get; set; }

    protected override void OnInitialized()
    {
        MyData = new List<SampleData>();

        for (int i = 0; i < 50; i++)
        {
            MyData.Add(new SampleData()
            {
                ID = i,
                Name = "Name " + i.ToString()
            });
        }
    }
}

@using System.Collections.ObjectModel

<TelerikGrid @ref="@Grid"
             Data="@GridData"
             SelectionMode="@GridSelectionMode.Single"
             OnRowClick="@OnRowClickHandler"
             @bind-SelectedItems="@SelectedData"
             EditMode="@GridEditMode.Incell"
             Resizable="true"
             Width="100%"
             Height="200px"
             Reorderable="true"
             Groupable="false"
             ShowColumnMenu="false"
             FilterMode="@GridFilterMode.None"
             Sortable="true">
    <GridColumns>
        <GridColumn Field=@nameof(ViewModel.Name) Editable="false">
        </GridColumn>
    </GridColumns>
</TelerikGrid>

<TelerikButton OnClick="RefreshButtonClick">Refresh</TelerikButton>

@code {
    private const int RowHeight = 40;
    private const string Height = "700px";
    private const int PageSize = 20;

    private ObservableCollection<ViewModel> GridData { get; set; } = new ObservableCollection<ViewModel>();
    private IEnumerable<ViewModel> SelectedData { get; set; } = Enumerable.Empty<ViewModel>();

    private TelerikGrid<ViewModel> Grid { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await LoadData();

        await base.OnInitializedAsync();
    }

    async Task LoadData()
    {
        var data = Enumerable.Range(1, 5).Select(x => new ViewModel { Name = $"name {x}" });
        GridData = new ObservableCollection<ViewModel>(data);
    }


    private async Task RefreshButtonClick()
    {
        Console.WriteLine("reload data");

        // spawn a new thread, a Timer will do as well
        await Task.Run(() =>
        {
            IEnumerable<ViewModel> data = new List<ViewModel> { new ViewModel { Name = "1" }, new ViewModel { Name = "2" }, new ViewModel { Name = "3" } };

            this.GridData.Clear();
            this.GridData.AddRange(data);
        });
    }

    private void OnRowClickHandler(GridRowClickEventArgs args)
    {
        Console.WriteLine("click to select");
        ViewModel viewModel = (ViewModel)args.Item;
        //this is here because of theincell editing, not relevant to the issue
        SelectedData = new List<ViewModel>() { viewModel };
    }

    public class ViewModel
    {
        public ViewModel()
        {
        }

        private string name;
        public string Name
        {
            get
            {
                return name;
            }
            set
            {
                name = value;
            }
        }
    }
}

Is Groupable: @IsGroupable
<TelerikButton OnClick="@ToggleGroupable">Toggle Groupable</TelerikButton>

@if (isGridVisible)
{
    <TelerikGrid Data=@GridData @ref="@GridRef" Groupable="@IsGroupable" Pageable="true" Height="400px">
        <GridColumns>
            <GridColumn Field=@nameof(Employee.Name) Groupable="false" />
            <GridColumn Field=@nameof(Employee.Team) Title="Team" />
            <GridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
        </GridColumns>
    </TelerikGrid>
}

@code {
    bool IsGroupable { get; set; }
    bool isGridVisible { get; set; } = true;
    TelerikGrid<Employee> GridRef { get; set; }
    async Task ToggleGroupable()
    {
        //save state (sorting, paging,...) - it will be lost when we hide the grid
        var state = GridRef.GetState();

        //hide the grid so it can later re-initialize with the new groupable setting
        isGridVisible = false;
        await InvokeAsync(StateHasChanged);
        await Task.Delay(20);
        IsGroupable = !IsGroupable;
        isGridVisible = true;

        //afte the grid re-initialized and rendered with the new setting, restore its state
        await InvokeAsync(StateHasChanged);
        await Task.Delay(20);
        await GridRef.SetState(state);
    }


    public List<Employee> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3,
                IsOnLeave = i % 2 == 0
            });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public bool IsOnLeave { get; set; }
    }
}