Change select button text

[Travis]

How do I set the text of the "Select..." button.  I tried using jquery but when I do the button ceases to work:

$("[class^='t-button t-upload-button']").select("span").html("My Custom Text");

[Georgi Tunev]

Hi Travis,

Here is how to do that - you need to add a custom attribute to the upload component and then reference the span container by it:

<%= Html.Telerik().Upload()
    .Name("attachments")
    //add a custom attribute
    .HtmlAttributes(new { @class = "myCustomClass" })

    .Async(async => async.Save("Save", "Home"))
%>
<button onclick="changeText(); return false;">
    Change the button text</button>
<script type="text/javascript">
    function changeText() {
        $(".myCustomClass").find('span:first').text("Custom text");
    }
</script>

Regards,
Georgi Tunev
the Telerik team

[Levi]

I too couldn't figure out how to change the "Select..." text.  I first looked in the documentation and found nothing.  Then I looked here and found this post.  I thought to myself I guess I could use jquery to find the span and change the content, but surely I shouldn't have to do that just to simply change some text content.  While technically this is not at all difficult to do, it's still seems like a hack and something that shouldn't be the user of the controls responsiblity.  It should also be clear in the documentation that this is the only way to set the content of the span.

Has Telerik considered either 1) Documenting this or 2) Add a parameter that allows the user to set the content of the span? 

Sorry for complaining, but this was really irritating and seemed out of place for such great controls.

Thanks!

[Georgi Tunev]

Hello Levi,

The reply given above assumes that you need to change the text dynamically, via JavaScript. Since such feature is rarely used, we don't have a client API for it and it requires some additional client coding. The easiest approach of course is to change the localization in the resource files.
 

Regards,
Georgi Tunev
the Telerik team

[Samir]

Hi Georgi,

The time I apply this code

$('.t-upload span:first').text('Open');

the upload button stops working when I click it. I am missing another step. It does it in all browsers.

Thanks.

[Georgi Tunev]

Hello Samir,

The code is working as expected on my side. If you added the full code from the sample above and still experience problems, please you provide a sample project so I can check it.

Regards,
Georgi Tunev
the Telerik team

[Steven]

Thank you for the code snippet.  I am using it in the onLoad event for upLoad control and it works great.  Now I need to change the width of the button to support the new button text.  Could you please let me know how this is done?   Thanks.

[Kajal]

This will change the width of the button:
$(".myCustomClass").find('span:first').parents('div:first').width(250);

Thanks

[Water]

If you don't need to change the text dynamically, you can just set it in the aspx code.

<telemeter:radasyncupload id="RadAsyncUpload1" runat="server" localization-select="Select zip file" />

See http://www.telerik.com/help/aspnet-ajax/asyncupload-localizing.html for more info.

[Iliana Dyankova]

Hello Water,

The code snippet that you provided is about asp.net ajax RadAsyncUpload, while the main topic in this forum thread is ASP.NET MVC related.


Regards,
Iliana Nikolova
the Telerik team