Upload control - respond to row click

[Mike]

using kendoFileSelectFileTemplate,

would like to have some Angular TypeScript code run when the user clicks in the whitespace in the <li> elements rendered by the kendo-upload control.

[Martin]

Hi Mike,

Using the kendoFileSelectFileTemplate is the correct approach to customize the selected files. You can attach any event listeners inside the template, like:

<ng-template kendoFileSelectFileTemplate let-files let-state="state">
            <div (click)="onClick()">Name: {{files[0].name}} Size: {{files[0].size}} bytes</div>
</ng-template>

However, the <li> element is automatically generated by the FileSelect component and the developer doesn't have direct access to it.

To avoid the padding that the <li> element has (and possibly interferes with the custom click handler), remove the paddings of the <li> and add them to the custom div element inside. Here is an example:

https://stackblitz.com/edit/angular-h5z55d

I hope this helps.

Regards,
Martin
Progress Telerik