<TelerikTabStrip PersistTabContent="true">
    <TabStripTab Title="tab1">
        <p>tab1 content</p>
    </TabStripTab>
    <TabStripTab Title="tab2">
        <p>tab2 content</p>
    </TabStripTab>
    <TabStripTab Title="tab3">
        <p>tab3 content</p>
    </TabStripTab>
    <SubComponent />
</TelerikTabStrip>

<TabStripTab Title="tab4">
    <p>tab4 content</p>
</TabStripTab>
<TabStripTab Title="tab5">
    <p>tab5 content</p>
</TabStripTab>

SaveImageUrl = $"api/property/{TenantSelectionService.SelectedTenant.Id}/product-types/{TypeCode}/images";

<TelerikUpload AllowedExtensions="@(new List<string>() {".jpg", ".jpeg", ".webp" })"
                   SaveUrl="@SaveImageUrl"
                   WithCredentials="true"
                   OnUpload="@OnUploadAsync">

@using Telerik.DataSource

<p>
    <label>
        <TelerikCheckBox Value="@GridLoadGroupsOnDemand"
                         ValueChanged="@GridLoadGroupsOnDemandChanged"
                         TValue="@bool" /> Load Groups On Demand
    </label>
</p>

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             TItem="@Employee"
             Pageable="true"
             Sortable="true"
             Groupable="true"
             LoadGroupsOnDemand="@GridLoadGroupsOnDemand"
             FilterMode="GridFilterMode.FilterRow"
             OnStateInit="@OnGridStateInit"
             EditMode="@GridEditMode.Inline">
    <GridColumns>
        <GridColumn Field="@nameof(Employee.Name)" />
        <GridColumn Field="@nameof(Employee.Team)" />
        <GridColumn Field="@nameof(Employee.Salary)" />
        <GridColumn Field="@nameof(Employee.OnVacation)" />
                    <GridCommandColumn>
                <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
                <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
                <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
            </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<Employee>? GridRef { get; set; }

    private List<Employee> GridData { get; set; } = new();

    private bool GridLoadGroupsOnDemand { get; set; }

    private void GridLoadGroupsOnDemandChanged(bool newValue)
    {
        GridLoadGroupsOnDemand = newValue;

        GridRef?.Rebind();
    }

    private void OnGridStateInit(GridStateEventArgs<Employee> args)
    {
        args.GridState.GroupDescriptors = new List<GroupDescriptor>();

        args.GridState.GroupDescriptors.Add(new GroupDescriptor()
        {
            Member = nameof(Employee.Team),
            MemberType = typeof(string)
        });
    }

    protected override void OnInitialized()
    {
        var rnd = new Random();

        for (int i = 1; i <= 20; i++)
        {
            GridData.Add(new Employee()
            {
                Id = i,
                Name = "Name " + i,
                Team = "Team " + (i % 4 + 1),
                Salary = (decimal)rnd.Next(1000, 3000),
                OnVacation = i % 3 == 0
            });
        }
    }

    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Team { get; set; } = string.Empty;
        public decimal Salary { get; set; }
        public bool OnVacation { get; set; }
    }
}