Pending Review
Last Updated: 06 Feb 2023 15:40 by Steven

It is impossible to customize the Text and Icon for the Telerik Upload Blazor Component. It always sans "Select Files". This is not easy to see at a glance.

Requests:

  1. Add a Title attribute to the upload component that lets you change the text from the default "Select Files". 
  2. Add the ability to set the Icon on the upload button.

Proposed Code:


<TelerikUpload Title="Upload Files" Icon="@SvgIcon.Upload" ... />

I had to write some hacky JavaScript interop to accomplish this:

function setTelerikUploadButtonText(text) {
    // Finds all the telerik blazor upload components on the page and changes the text of the upload button.

    let replaced = 0;

    const defaultText = "Upload";

    // Find all the buttons with class "k-upload-button". There should be one for each upload component.
    const buttons = document.getElementsByClassName("k-upload-button");

    for (let i = 0; i < buttons.length; i++) {
        // Find the span with class "k-button-text" and change its text.
        const spans = buttons[i].getElementsByClassName("k-button-text");

        if (spans.length > 0) {

            // Add horizontal padding to the span.
            spans[0].classList.add("px-2");
            
            // Change the text.
            spans[0].innerHTML = text ?? defaultText;

            // Insert a font awesome icon.
            spans[0].insertAdjacentHTML('afterbegin', '<i class="fas fa-upload"></i>&nbsp;');
            
            // Track how many buttons were updated.
            replaced++;
        }
    }
    
    console.info("setTelerikUploadButtonText: " + replaced + " buttons updated.");
    
    return replaced;
}



/// <summary>
    /// Finds all the telerik blazor upload components on the page and changes the text of the upload button.
    /// </summary>
    /// <returns>The number of upload components button text that were found &amp; replaced.</returns>
    public static async Task SetTelerikUploadButtonText(this IJSRuntime jSRuntime,
        string text = "Upload Files")
    {
        await jSRuntime.InvokeVoidAsync("setTelerikUploadButtonText", text);
    }

 

Screenshot:

Pending Review
Last Updated: 06 Feb 2023 08:47 by Niels
The extended DDL is reopened as soon as it is clicked to close it. The problem can be reproduced on Telerik's demo page. Blazor UI version 3.6.1 and 4.0.0 on Safari 15.6.1 and 16: https://docs.telerik.com/blazor-ui/components/combobox/overview#creating-combobox
Pending Review
Last Updated: 04 Feb 2023 17:06 by Ben
Created by: Ben
Comments: 0
Category: UI for Blazor
Type: Bug Report
0
Just came across this while looking at source code...