How can I restrict the types of files a user can select when using the GridAttachmentColumn in a RADGrid control?

1 Answer 56 Views
Grid
Brandon
Top achievements
Rank 1
Brandon asked on 13 Mar 2023, 05:04 PM

Within a page, I have the following - 

<telerik:RadGrid ...

     <telerik:GridAttachmentColumn ... AllowedFileExtensions=".png,.gif,.jpg,.jpeg" ... />

</ telerik:RadGrid>

When editing an item within the grid, and clicking the 'Select' option on the grid's edit column related to the GridAttachmentColumn, I'm receiving this popup - 

 

I want to restrict the files a user can select to upload through this dialog to those defined within the 'AllowedFileExtensions' property of the control, either from within the HTML, or in the code behind.

How can I go about doing that? If this is not the correct place to be asking this question, where on the forum should I be asking this question?

Thanks.

1 Answer, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 16 Mar 2023, 10:55 AM

Hello Brandon,

This is called file filtering and it needs to be configured in the RadAsyncUpload control. For the standalone RadAsyncUpload, you can find the instruction in the RadAsyncUpload File Filtering article.

The GridAttachmentColumn of RadGrid uses two Upload Control types. One of which is the RadUpload and the other is the RadAsyncUpload. You can access this upload control in the backend and configure it accordingly.

 

First, you will need to make sure that AsyncUpload is used as the UploadControlType and the column has a UniqueName.

<telerik:GridAttachmentColumn UniqueName="UploadColumn" UploadControlType="RadAsyncUpload" AllowedFileExtensions="jpeg,jpg,gif">
</telerik:GridAttachmentColumn>

 

In the ItemDataBound event of the Grid, you can access this Control when the Grid is in edit mode.

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item.IsInEditMode)
    {
        GridEditableItem editItem = (GridEditableItem)e.Item;

        RadAsyncUpload uploadControl = editItem["UploadColumn"].Controls[0] as RadAsyncUpload;

        // Attach the ClientAdded client-side event
        uploadControl.OnClientAdded = "OnClientAdded";
    }
}

 

When the event triggers, access the input element by its class name and set the "accept" rule accordingly.

Example

<script>
    function OnClientAdded(sender, args) {
        $telerik.$(args.get_row()).find(".ruFileInput").attr("accept", "image/*");
    }
</script>

 

Result

 

In the following StackOverflow article, you can find more examples of the "accept" rule: HTML Input="file" Accept Attribute File Type (CSV)

 

Regards,
Attila Antal
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/.

Tags
Grid
Asked by
Brandon
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or