<TelerikGrid Data="@GridData"
             EditMode="@GridEditMode.Incell"
             OnUpdate="@OnGridUpdate"
             OnCreate="@OnGridCreate">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add">Add Item</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" />
        <GridColumn Field="@nameof(Product.MaskedValue)">
            <EditorTemplate>
                @{ var dataItem = (Product)context; }
                <TelerikMaskedTextBox @bind-Value="@dataItem.MaskedValue"
                                      Mask="AAA-AAA" />
            </EditorTemplate>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

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

    private int LastId { get; set; }

    private void OnGridCreate(GridCommandEventArgs args)
    {
        var createdItem = (Product)args.Item;

        createdItem.Id = ++LastId;

        GridData.Insert(0, createdItem);
    }

    private void OnGridUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (Product)args.Item;
        var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);

        if (originalItemIndex != -1)
        {
            GridData[originalItemIndex] = updatedItem;
        }
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 5; i++)
        {
            GridData.Add(new Product()
            {
                Id = ++LastId,
                Name = $"Product {LastId}",
                MaskedValue = $"ABC-{LastId:D3}"
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string MaskedValue { get; set; } = string.Empty;
    }
}

@inject IJSRuntime JsInterop

<input />
<span @onfocusin="@CollapseInputSelection" @ref="@ParentElem">
    <TelerikMaskedTextBox Mask="+1 (000) 000-0000"
                          IncludeLiterals="true"
                          @bind-Value="@CellPhoneNumber"
                          Class="form-control" />
</span>

@* move this script to an actual script file instead of using this hack *@
<script suppress-error="BL9992">
    function collapseInputSelection(root) {
        setTimeout(function () {
            var input = root.querySelector("input");
            if (input) {
                input.setSelectionRange(0, 0);
            }
        }, 20);
    }
</script>

@code{
    string CellPhoneNumber { get; set; }

    ElementReference ParentElem { get; set; }
    async Task CollapseInputSelection()
    {
        await JsInterop.InvokeVoidAsync("collapseInputSelection", ParentElem);
    }
}

<TelerikFloatingLabel Text="Floating Label Over Mask">
    <TelerikMaskedTextBox @bind-Value="@MaskedValue"
                          Mask="000-000"
                          Width="200px"
                          Class="mask-with-label" />
</TelerikFloatingLabel>

@if (string.IsNullOrEmpty(MaskedValue))
{
    <style>
        .mask-with-label input:not(:focus) {
            color: transparent;
        }
    </style>
}

@code {
    private string MaskedValue { get; set; } = string.Empty;
}