<h4>Default Value Disabled</h4>

RadioGroupValue1: @RadioGroupValue1

<TelerikRadioGroup Data="@Options"
                   @bind-Value="@RadioGroupValue1"
                   ValueField="@nameof(RadioModel.Id)"
                   TextField="@nameof(RadioModel.Text)">
    <ItemTemplate>
        @{
            var dataItem = (RadioModel)context;
            var isChecked = dataItem.Id == RadioGroupValue1;
        }
        @if (!dataItem.Enabled)
        {
            <span class="disabled-radio-option">
                <span class="k-radio-wrap">
                    <input type="radio" value="@dataItem.Id" aria-checked="@isChecked" aria-disabled="true" aria-invalid="true"
                           class="@( $"fake k-radio k-radio-md {(isChecked ? "k-checked" : "")}" )" style="user-select: none;" />
                </span>
                <span>@dataItem.Text</span>
            </span>
        }
        else
        {
            <span>@dataItem.Text</span>
        }
    </ItemTemplate>
</TelerikRadioGroup>

<h4>No Default Value</h4>

RadioGroupValue2: @RadioGroupValue2

<TelerikRadioGroup Data="@Options"
                   @bind-Value="@RadioGroupValue2"
                   ValueField="@nameof(RadioModel.Id)"
                   TextField="@nameof(RadioModel.Text)">
    <ItemTemplate>
        @{
            var dataItem = (RadioModel)context;
            var isChecked = dataItem.Id == RadioGroupValue2;
        }
        @if (!dataItem.Enabled)
        {
            <span class="disabled-radio-option">
                <span class="k-radio-wrap">
                    <input type="radio" value="@dataItem.Id" aria-checked="@isChecked" aria-disabled="true" aria-invalid="true"
                           class="@( $"fake k-radio k-radio-md {(isChecked ? "k-checked" : "")}" )" style="user-select: none;" />
                </span>
                <span>@dataItem.Text</span>
            </span>
        }
        else
        {
            <span>@dataItem.Text</span>
        }
    </ItemTemplate>
</TelerikRadioGroup>

<style>
    .k-radio-list-item:has(.disabled-radio-option) {
        pointer-events: none;
        cursor: default;
        opacity: 0.6;
        gap: 0;
    }

    .disabled-radio-option {
        display: flex;
        align-items: center;
        align-content: center;
        gap: var(--kendo-spacing-1);
    }

    .k-radio-list-item:has(.disabled-radio-option) input:not(.fake) {
        display: none;
    }
</style>

@code{
    private int RadioGroupValue1 { get; set; } = 2;
    private int RadioGroupValue2 { get; set; }

    private List<RadioModel> Options { get; set; } = new List<RadioModel>
    {
        new RadioModel { Id = 1, Text = "Option 1" },
        new RadioModel { Id = 2, Text = "Option 2", Enabled = false },
        new RadioModel { Id = 3, Text = "Option 3" },
        new RadioModel { Id = 4, Text = "Option 4", Enabled = false },
        new RadioModel { Id = 5, Text = "Option 5" },
    };

    public class RadioModel
    {
        public int Id { get; set; }
        public string Text { get; set; } = string.Empty;
        public bool Enabled { get; set; } = true;
    }
}

<TelerikButton OnClick="@ToggleStep">Toggle attachments step visibility</TelerikButton>

@if (WizardVisible)
{
    <TelerikWizard @bind-Value="@CurrStepIndex">
        <WizardSteps>
            <WizardStep Label="Personal Details" Icon="SvgIcon.User">
                <Content>
                    content here
                </Content>
            </WizardStep>

            @if (AttachmentsStepVisible)
            {
                <WizardStep Label="Attachments" Icon="SvgIcon.Paperclip">
                    <Content>
                        conditional content here
                    </Content>
                </WizardStep>
            }

            <WizardStep Label="Confirmation" Icon="SvgIcon.Check">
                <Content>
                    other content here
                </Content>
            </WizardStep>
        </WizardSteps>
    </TelerikWizard>
}


@code {
    private bool AttachmentsStepVisible { get; set; }
    private bool WizardVisible { get; set; } = true;

    private int CurrStepIndex { get; set; }

    private async void ToggleStep()
    {
        //dispose the Wizard
        WizardVisible = false;

        // defence against hiding the step when it is the last step, which would cause an exception
        if (AttachmentsStepVisible && CurrStepIndex == 2)
        {
            CurrStepIndex = 1;
        }

        //the actual visibility toggle
        AttachmentsStepVisible = !AttachmentsStepVisible;

        //allow some time for the disposal and toggling the step visibility prior to re-initialization
        await Task.Delay(10);

        //re-initialize the Wizard
        WizardVisible = true;

        StateHasChanged();
    }
}

@using System.Dynamic
@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid OnRead="@OnGridRead"
             TItem="@ExpandoObject"
             Pageable="true"
             Sortable="true"
             FilterMode="@GridFilterMode.FilterMenu"
             FilterMenuType="@FilterMenuType.CheckBoxList"
             Height="400px">
    <GridToolBarTemplate>
        <GridSearchBox />
    </GridToolBarTemplate>
    <GridColumns>
        @{
            if (GridData != null && GridData.Any())
            {
                <GridColumn Field="PropertyInt" FieldType="@GridPropertyTypes["PropertyInt"]" />
                <GridColumn Field="PropertyString" FieldType="@GridPropertyTypes["PropertyString"]" />
                <GridColumn Field="PropertyGroup" FieldType="@GridPropertyTypes["PropertyString"]" />
                <GridColumn Field="PropertyDate" FieldType="@GridPropertyTypes["PropertyDate"]" />
                <GridColumn Field="PropertyBool" FieldType="@GridPropertyTypes["PropertyBool"]" />
            }
        }
    </GridColumns>
</TelerikGrid>

@code {
    private List<ExpandoObject> GridData { get; set; } = new List<ExpandoObject>();

    private Dictionary<string, Type> GridPropertyTypes { get; set; } = new Dictionary<string, Type>() {
        { "Id", typeof(int) },
        { "PropertyInt", typeof(int) },
        { "PropertyString", typeof(string) },
        { "PropertyGroup", typeof(string) },
        { "PropertyDate", typeof(DateTime) },
        { "PropertyBool", typeof(bool) }
    };

    private async Task OnGridRead(GridReadEventArgs args)
    {
        args.Request.Filters.OfType<CompositeFilterDescriptor>()
        .Each(x =>
        {
            x.FilterDescriptors.OfType<FilterDescriptor>()
                .Each(y => y.MemberType = GridPropertyTypes[y.Member]);
        });

        var result = GridData.ToDataSourceResult(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;
        args.AggregateResults = result.AggregateResults;
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 18; i++)
        {
            dynamic expando = new ExpandoObject();

            expando.Id = i;
            expando.PropertyGroup = $"Group {(i % 3 + 1)}";
            expando.PropertyInt = i;
            expando.PropertyString = $"String {(char)(64 + i)}{(char)(64 + i)}";
            expando.PropertyDate = DateTime.Now.AddMonths(-i);
            expando.PropertyBool = i % 2 != 0;

            GridData.Add(expando);
        }
    }
}

<InputTextArea class="k-textarea" @bind-Value="@myValue"></InputTextArea>

<TelerikGrid Data="@GridData"
             SelectionMode="@GridSelectionMode.Multiple"
             SelectedItems="@SelectedItems"
             SelectedItemsChanged="@( (IEnumerable<Employee> newSelected) => OnSelectedItemsChanged(newSelected) )"
             Height="300px">
    <GridToolBarTemplate>
        <TelerikButton Enabled="@(SelectedItems.Any())" OnClick="@DeleteSelectedEmployees">Delete</TelerikButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridCheckboxColumn SelectAll="true" />
        <GridColumn Field="Name" Title="Name" />
        <GridColumn Field="Team" Title="Team" />
    </GridColumns>
</TelerikGrid>

@code {
    private List<Employee> GridData { get; set; } = Enumerable.Range(1, 10).Select(i => new Employee
    {
        EmployeeId = i,
        Name = $"Employee {i}",
        Team = $"Team {i % 3}"
    }).ToList();

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

    private void OnSelectedItemsChanged(IEnumerable<Employee> items)
    {
        SelectedItems = items.ToList();
    }

    private void DeleteSelectedEmployees()
    {
        if (SelectedItems.Any())
        {
            GridData = GridData.Except(SelectedItems).ToList();
            SelectedItems.Clear();
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public override bool Equals(object obj) => obj is Employee e && e.EmployeeId == EmployeeId;
        public override int GetHashCode() => EmployeeId.GetHashCode();
    }
}