This is a migrated thread and some comments may be shown as answers.

Fire OnClick?

8 Answers 415 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Ilan
Top achievements
Rank 1
Bronze
Iron
Veteran
Ilan asked on 02 Mar 2021, 06:39 PM
     Is there a way to fire the OnClick event ?

8 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 02 Mar 2021, 07:41 PM

Hello Ilan,

This was posted in the Upload component forum, but it does not have an OnClick event (you can see its list of events in the documentation). Could you confirm what component you are using and what you are trying to achieve?

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ilan
Top achievements
Rank 1
Bronze
Iron
Veteran
answered on 03 Mar 2021, 07:43 AM

I'm using the Upload component, I would like to open the choose file window automatically

 

0
Marin Bratanov
Telerik team
answered on 03 Mar 2021, 07:57 AM

Hi Ilan,

You can Follow the implementation of such a feature here: https://feedback.telerik.com/blazor/1475231-trigger-file-select-dialog-from-my-own-button. The thread also offers a solution you can use right now.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ilan
Top achievements
Rank 1
Bronze
Iron
Veteran
answered on 03 Mar 2021, 09:08 AM

How can I call this from within a c# method?

 

That didn't work for me:

public async Task OnLogoClick()
{
var script = "$('.k-upload input').click()";
await JS.InvokeVoidAsync(script);
}

0
Marin Bratanov
Telerik team
answered on 03 Mar 2021, 09:14 AM

Hello Ilan,

You can use the JavScript Interop that the framework provides: https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ilan
Top achievements
Rank 1
Bronze
Iron
Veteran
answered on 03 Mar 2021, 09:35 AM

 

I've tried that but got 

Microsoft.JSInterop.JSException: '$ is not defined

_Host.cshtml

window.customUploadClick = function () {
$('.k-upload-button input').trigger('click');
return "done";
}

Interop

public async Task<string> Upload()
{
return await _js.InvokeAsync<string>("customUploadClick");
}

 

What am I missing?

0
Ilan
Top achievements
Rank 1
Bronze
Iron
Veteran
answered on 03 Mar 2021, 09:49 AM
jquery was missing, my bad
0
Marin Bratanov
Telerik team
answered on 03 Mar 2021, 10:14 AM

If you don't use jQuery already you don't have to add it, I've updated the other example with plain dom methods:

@inject IJSRuntime _js

<script suppress-error="BL9992">
    window.customUploadClick = function () {
        document.querySelector(".k-upload-button input").click();
    }
</script>

<TelerikButton OnClick="@InvokeSelectClick">invoke click</TelerikButton>

<TelerikUpload></TelerikUpload>

@code{
    async Task InvokeSelectClick()
    {
        await _js.InvokeVoidAsync("customUploadClick");
    }
}

 

--Marin

Tags
Upload
Asked by
Ilan
Top achievements
Rank 1
Bronze
Iron
Veteran
Answers by
Marin Bratanov
Telerik team
Ilan
Top achievements
Rank 1
Bronze
Iron
Veteran
Share this question
or