Displaying Audio Files within the Grid

Environment

Product	Telerik UI for ASP.NET MVC Grid
Progress Telerik UI for ASP.NET MVC version	Created with the 2022.2.621 version

Description

How can I display audio files within the Telerik UI for ASP.NET MVC Grid?

Solution

1. Utilize a Column Template
2. Within the template, add the conventional audio element that is primarily utilized for displaying an audio file on a the web page.
3. Specify the file name and extension using the Template Syntax.

Model.cs

    public class EmployeeViewModel
    {
        public string Sound { get; set; } //stores both the file name and extension
    }

Column

    .Columns(columns =>
    {
        columns.Bound(p => p.Sound).Width(350).ClientTemplate("<audio controls><source src='./#=Sound#'/></audio>");
    })

For a complete implementation of the suggested approach, refer to the following GitHub Project.

More ASP.NET MVC Grid Resources

• ASP.NET MVC Grid Documentation

• ASP.NET MVC Grid Demos

• ASP.NET MVC Grid Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET MVC
• Server-Side API Reference of the Grid for ASP.NET MVC
• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base