Attachment Column

[Daniel]

Is there an Attachment Column type of the MVC or Core grid?

[Petar]

Hi Daniel,

Both, the UI for ASP.NET MVC and UI for ASP.NET Core versions of the Grid component, support the option to define an Upload component as a custom editor template for a given model field.

You can check this example: https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/file-upload-in-popup. It demonstrates how we can have an Upload as editor template in the Grid. 

If you want to add an Upload in a Grid column, not as a client template, you can check this Grid client template with upload control forum thread. It discusses how an Upload can be added as a ClientTemplate for a selected Grid column.

I hope the provided information will help you implement the targeted business functionality in the application you are working on.

Regards,
Petar
Progress Telerik

[Daniel]

Sorry if I was misunderstood, I want to list the attachments in the grid not upload them.

[Petar]

Hi Daniel,

Can you give me more details about the mentioned attachments? What is the scenario that you are working on? I am not sure that I understand what you want to implement with this "attachment column".

Can you send me an example or a screenshot of a similar functionality?

Looking forward to your reply.

Regards,
Petar
Progress Telerik

[Daniel]

So I have users creating records and attaching files to it.  They want to see a link to those attachments in the grid so they can click on it and download it.  You can do this on the ajax version.... 

[Petar]

Hi Daniel,

Thank you for the clarification. There is no built-in "attachment" column in the Grid. It can be implemented using the Template configuration of the component.

Attached to my reply, you will find a runnable UI for ASP.NET Core project that demonstrates how we can add a column in the Grid, which contains a link by which a file can be downloaded. The column that defines the "download" functionality in the Grid is defined as follows.

columns.Template("<a href='#=data.File_Path#/#=data.File_Name##=data.File_Ext#' download>#=File_Name##=File_Ext#</a>").Title("Download");

In the above snippet, the File_Path, File_Name, and File_Ext variables are provided by the model. Using them, we build the URL to the file that is associated with the exact Grid row. The last thing that has to be done is to add the "download" attribute to the anchor tag.

I hope the above description and the provided example will help you implement the targeted functionality in the application you are working on. 

Regards,
Petar
Progress Telerik

[Daniel]

AH so no way to do this with multiple models then?  I store attachments in their own table.

[Petar]

Hi Daniel,

You can nest the two models in one and use the new model for the Grid. 

Attached to my reply you will find a runnable example that uses the following model:

public class ProductModel
{
    public int Id { get; set; }

    public string ProductName { get; set; }

    public FilesModel FileData { get; set; }
}

The marked in the yellow field uses the FilesModel that was used in the previous example that I've sent you.

Using the above model, the columns in the Grid are defined like this:

.Columns(columns =>
{
    columns.Bound(o => o.Id).Width(60);
    columns.Bound(o => o.ProductName).Width(250);
    columns.Bound(o => o.FileData.File_Name).Title("<span style='color:black'>FileName</span>").Width(200);
    columns.Bound(o => o.FileData.File_Ext).Title("<span style='color:black'>FileExt</span>").Width(200);
    columns.Template("<a href='#=data.FileData.File_Path#/#=data.FileData.File_Name##=data.FileData.File_Ext#' download>#=FileData.File_Name##=FileData.File_Ext#</a>").Title("Download");
})

In green, I've marked the way we can access the fields from the FilesModel. 

Last but not least, I've also changed the code that populates the data for the Grid. Here is how a single record of the "ProductModel" can be defined.

products.Add(new ProductModel{ Id =1, ProductName ="Product 1", FileData = new FilesModel { ActivityId = 1, Create_Date = new DateTime(), File_Ext = ".png", File_Name = "telerik", File_Path = "uploads" } });

Regards,
Petar
Progress Telerik