Preview File on KendoGrid Link Click using AngularJS in ASP.Net MVC

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Feb 20, 2020 11:15 PM
Forum: ASP.Net MVC
Answer: 2
Views: 2963

Hi,

I have 3 fields in database

Id Name FileName

1 resume.doc ~/Uploads/resume.docx

2 invoice.odf ~/Uploads/invoice.pdf

currently my requirement is that after loading of page these values are displaying on kendo grid

after clicking of partucular file i need to preview that file

could you please help me

@{
    Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AngularJS: Input Type Date Set Date</title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.bootstrap.min.css" />
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ["kendo.directives"])
        app.controller('MyController', function ($scope) {
            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        transport: {
                            read: "/Home/GetAll/",
                        },
                        pageSize: 20
                    },
                    height: 550,
                    groupable: true,
                    sortable: true,
                    columns: [
                    {
                        field: "Id",
                        title: "Id",
                        width: "10%",
                    }, {
                        field: "FileName",
                        title: "FileName",
                        width: "15%",
                    }]
                });
            });
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div id="example">
        <div id="grid"></div>
    </div>
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 8

Reply
ANSWER
User: dharmendr
Replied: on Feb 26, 2020 03:25 AM
Modified: on Feb 26, 2020 04:07 AM
Report

Hi mahesh213,

Refer below sample.

Controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
    public JsonResult GetData()
    {
        List<FileData> files = new List<FileData>();
        files.Add(new FileData { Id = 1, Name = "Test.doc", FileName = "~/Uploads/Test.doc" });
        files.Add(new FileData { Id = 2, Name = "Test.pdf", FileName = "~/Uploads/Test.pdf" });
        files.Add(new FileData { Id = 2, Name = "Test.docx", FileName = "~/Uploads/Test.docx" });
        return Json(files, JsonRequestBehavior.AllowGet);
    }
    public class FileData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string FileName { get; set; }
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
    <script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    transport: { read: "/Home/GetAll/" },
                    pageSize: 20
                },
                height: 550,
                groupable: true,
                sortable: true,
                columns: [
                    { field: "Id", title: "Id", width: "10%" },
                    { field: "Name", title: "Name", width: "15%" },
                    {
                        field: "FileName",
                        title: "FileName",
                        template: '<a target="_blank" href=\"Uploads/#:data.Name#\">Link</a>'
                    }
                ]
            });
        });
    </script>
</head>
<body>
    <div id="grid"></div>
</body>
</html>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Preview File on KendoGrid Link Click using AngularJS in ASP.Net MVC

Company

Explore

Follow us

Contact Us