<script>
        function clickButton(selector) {
            var btn = document.querySelector(selector);
            if (btn && btn.click) {
                btn.click();
            }
        }
    </script>

@inject IJSRuntime _js

<style>
    /* hide the built-in button if you like */
    .myExcelExportButton {
        display:none;
    }
</style>

<button @onclick="@MyExternalExportTrigger">my external export button</button>

<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
             FilterMode="@GridFilterMode.FilterRow" Groupable="true"
             Class="@GridClass">
    <GridToolBar>
        <GridCommandButton Class="@ExportBtnClass" Command="ExcelExport" Icon="@IconName.FileExcel">Export to Excel</GridCommandButton>
        <label><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
    </GridToolBar>
    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
    </GridExport>

    <GridColumns>
        <GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
        <GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="300px" />
        <GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
        <GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="200px" />
        <GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="100px" />
        <GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" Width="300px" />
    </GridColumns>
</TelerikGrid>

@code {
    // cascade through classes on the grid and/or on the built-in button to click it with JS
    // so that it can invoke the built-in export operations
    string GridClass { get; set; } = "MyGrid";
    string ExportBtnClass { get; set; } = "myExcelExportButton";
    async Task MyExternalExportTrigger()
    {
        var selector = $".{GridClass} .k-header .{ExportBtnClass}";
        await _js.InvokeVoidAsync("clickButton", selector);
    }



    List<SampleData> GridData { get; set; }
    bool ExportAllPages { get; set; }

    protected override void OnInitialized()
    {
        GridData = Enumerable.Range(1, 100).Select(x => new SampleData
        {
            ProductId = x,
            ProductName = $"Product {x}",
            UnitsInStock = x * 2,
            Price = 3.14159m * x,
            Discontinued = x % 4 == 0,
            FirstReleaseDate = DateTime.Now.AddDays(-x)
        }).ToList();
    }

    public class SampleData
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public int UnitsInStock { get; set; }
        public decimal Price { get; set; }
        public bool Discontinued { get; set; }
        public DateTime FirstReleaseDate { get; set; }
    }
}

@inject IJSRuntime _js

Notes:<br />
- Move this script to a proper place, it is hacked into the component to make this snippet short
- Make sure the ID is unique if you use IDs. THere are other selectors you can use (such as classes, or you can even cascade your selectors to make them more specific)
<br /><br />

<script suppress-error="BL9992">
    function focusElement(selector) {
        var elem = document.querySelector(selector);
        if (elem && elem.focus) {
            setTimeout(function () {
                elem.focus();
            }, 30);
        }
    }
</script>

<TelerikButton OnClick="@FocusBtn">Focus the other button</TelerikButton>

<br /><br />

<TelerikButton Id="@btnId" OnClick="@SpecialBtnAction">I will be focused programmatically</TelerikButton>

@code{
    string btnId = "my-special-btn";

    async Task FocusBtn()
    {
        await _js.InvokeVoidAsync("focusElement", $"#{btnId}");
    }

    async Task SpecialBtnAction()
    {
        Console.WriteLine("special button clicked");
    }
}

@inject IJSRuntime _js

@* Move this script to a proper place in your project, the suppress-error hack is to keep it here in the component for easy copy-paste *@
<script suppress-error="BL9992">
    function getComboHighligtedItem() {
        // gets the currently focused item in this particular combobox
        var selItemElem = document.querySelector(".special-combobox .k-item.k-state-focused");
        if (selItemElem) {
            return selItemElem.innerText;
        }
    }
</script>

Selected value: @selectedValue
<br />

<TelerikComboBox OnBlur="@Test" PopupClass="special-combobox"
                 
                 Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@selectedValue" 
                    Placeholder="Select an item..." ClearButton="true" Filterable="true" FilterOperator="@StringFilterOperator.Contains">
</TelerikComboBox>

<input placeholder="other form elements" />

@code {
    async Task Test()
    {
        string currInput = await _js.InvokeAsync<string>("getComboHighligtedItem");
        Console.WriteLine("--------------");
        Console.WriteLine(currInput);
        Console.WriteLine("--------------");
        // note - this relies on the item template of the combo rendering the text, or not being used at all
        // if you use other item templates, you may need to delve deeper in the DOM or otherwise recognize the item
        if (!string.IsNullOrEmpty(currInput))
        {
            // match the filter operation to the filter operator of the combo box - Contains in this sample
            var matchingItem = myComboData.Where(itm => itm.MyTextField.ToLowerInvariant().Contains(currInput.ToLowerInvariant())).FirstOrDefault();
            if (matchingItem != null)
            {
                selectedValue = matchingItem.MyValueField;
            }
        }

    }
   
    // just dummy data follows

    IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    int selectedValue { get; set; }

    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }
}

<TelerikComboBox Data="@Dtos"
                         OnRead="@ReadItems"
                         Filterable="true"
                         Placeholder="Find what you seek by typing"
                         @bind-Value="@SelectedValue"
                         TextField="Name" 
                         ValueField="Id"
                         Pageable="true" 
                         PageSize="20" 
                         TotalCount=@Dtos.Count
                         >

@inject IJSRuntime _js

@* move this script to a proper place in your project and remove the 
    suppress-error hack that lets it stay in the component - it is here for brevity only *@
<script suppress-error="BL9992">
    function focusCancelDialogButton() {
        setTimeout(function() {
            var cancelButtons = document.querySelectorAll(".k-dialog .k-dialog-buttongroup .k-button");
            if(cancelButtons && cancelButtons.length > 1) {
                cancelButtons[1].focus();
            }
        }, 100);
    }
</script>

<TelerikButton OnClick="@ShowConfirm">Show Confirm</TelerikButton>

@code {
    [CascadingParameter]
    public DialogFactory Dialogs { get; set; }

    public async Task ShowConfirm()
    {
        await _js.InvokeVoidAsync("focusCancelDialogButton");
        bool isConfirmed = await Dialogs.ConfirmAsync("Are you sure?");

        if (isConfirmed)
        {
            Console.WriteLine("The user is sure, continue.");
        }
        else
        {
            Console.WriteLine("The user changed their mind");
        }
    }
}