[Solved] Customizing Control strings

[Sebastian S]

Hi,

Is it possible to set the localized string values for the upload control via javascript?

We have a requirement that the string values be configurable at run-time, so we'd need to customise the actual control text based on configurable, settings.

Cheers,
Sebastian

[Dimo]

Hello Sebastian,

You can use the following approach:

Html.Telerik().Upload()
      .ClientEvents(ev => ev.OnLoad("setStrings"))

function setStrings(е) {
    var upload = $(this).closest(".t-upload");
    $(".t-upload-button span", upload).text("my Select...");
    $(".t-dropzone em", upload).text("my drop files here to upload");

    $(this).data("tUpload").localization = {
        "select": "my Select...",
        "cancel": "my Cancel",
        "retry": "my Retry",
        "remove": "my Remove",
        "uploadSelectedFiles": "my Upload files",
        "dropFilesHere": "my drop files here to upload",
        "statusUploading": "my uploading",
        "statusUploaded": "my uploaded",
        "statusFailed": "my failed"
    };
}

Since the text inside the button and the drop zone has already been rendered, you need to change it directly with DOM operations.


Greetings,
Dimo
the Telerik team

[Sebastian S]

Thanks Dimo.

I get an exception at the line below. On IE we get a javascript error 'Error: Unable to set value of the property 'localization': object is null or undefined'.
Looking at the $(this).data("tUpload")object returns undefined.

$(this).data("tUpload").localization = {

        "select": "my Select...",

        "cancel": "my Cancel",

        "retry": "my Retry",

        "remove": "my Remove",

        "uploadSelectedFiles": "my Upload files",

        "dropFilesHere": "my drop files here to upload",

        "statusUploading": "my uploading",

        "statusUploaded": "my uploaded",

        "statusFailed": "my failed"

    };

[Dimo]

Hi Sebastian,

Are you using the OnLoad event to set the localization strings or some other event? You can't use earlier event (e.g. document ready). If you are using a different (later) event, you may need to chage "this" to the Upload file input DOM element.

If the problem persists, please send a demo.

Greetings,
Dimo
the Telerik team

[Sebastian S]

Hi Dino,

I was using the OnLoad event. Tried with the document ready as well but same result. Not sure if this is relevant, but we don't use the normal localization stuff i.e. App_GlobalResource (we don't have this folder).

 I've worked around the problem (see code below). It works, but I'm wondering if this dirty hack is ok :)

Cheers,
Sebastian

function onLoad(e) {
		var selButtonText = $.browser.msie ? '@SmartResource.SelectFile' : '@SmartResource.SelectFiles';
 
		var upload = $(this).closest(".t-upload");
		$('.t-upload-button span', upload).text(selButtonText);
		$('.t-dropzone em', upload).text('@SmartResource.FileUpload_DropFilesHere');
 
		var loc = $(this).tUpload.defaults.localization;
		loc.select = selButtonText;
		loc.cancel = '@SmartResource.FileUpload_BtnCancel';
		loc.dropFilesHere = '@SmartResource.FileUpload_DropFilesHere';
		loc.remove = '@SmartResource.FileUpload_BtnRemove';
		loc.retry = '@SmartResource.FileUpload_BtnRetry';
		loc.statusFailed = '@SmartResource.FileUpload_Failed';
		loc.statusUploaded = '@SmartResource.FileUpload_Uploaded';
		loc.statusUploading = '@SmartResource.FileUpload_Uploading';
		loc.uploadSelectedFiles = '@SmartResource.FileUpload_UploadFiles';
	}

[Dimo]

Hi Sebastian,

Your approach is no more or less a hack than mine, so you can go with it.

Regards,
Dimo
the Telerik team

[Sebastian S]

Thank Dimo.