Latest Post

Thursday, 2 February 2017

Kendo Grid Export Data To PDF and Export Data To Excel

Kendo Grid with external buttons to export (Export to Excel, Export to PDF)





Source Code:- 
<h2>Kendo Grid with external buttons to export (Export to Excel, Export to PDF)</h2>
<button class="k-button k-primary" id="btnExportToPdf">Export to PDF</button>
<button class="k-button k-primary" id="btnExportToExcel">Export to Excel</button>
<br><br><br>
<div id="Moviesgrid"></div>


<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.web.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.aspnetmvc.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.js"></script>
<script>
    $(function () {        
        var movies = [{ "rank": 1, "rating": 9.5, "year": 1999, "title": "The Shawshank Redemption" },
                     { "rank": 2, "rating": 9.4, "year": 1982, "title": "The Godfather" },
                     { "rank": 3, "rating": 9.1, "year": 1964, "title": "The Godfather: Part II" },
                     { "rank": 4, "rating": 8.9, "year": 1986, "title": "Il buono, il brutto, il cattivo." },
                     { "rank": 5, "rating": 8.9, "year": 1999, "title": "Pulp Fiction" },
                     { "rank": 6, "rating": 8.5, "year": 2015, "title": "12 Angry Men" },
                     { "rank": 7, "rating": 8.2, "year": 2000, "title": "Schindler's List" },
                     { "rank": 8, "rating": 7.8, "year": 2014, "title": "One Flew Over the Cuckoo's Nest" },
                     { "rank": 9, "rating": 6.8, "year": 2016, "title": "Inception" },
                     { "rank": 10, "rating": 6.5, "year": 2008, "title": "The Dark Knight" }];

        $("#Moviesgrid").kendoGrid({
            excel: {
                fileName: "Movies.xls",
                allPages: false,
                filterable: false
            },
            pdf: {
                author: "www.code-view.com",
                creator: "alok singh",
                date: new Date(),
                fileName: "Movies.pdf",
                keywords: "Movies years ranks",
                landscape: false,
                margin: {
                    left: 10,
                    right: "10pt",
                    top: "10mm",
                    bottom: "1in"
                },
                //paperSize: "A4",
                subject: "Movies rank wise list",
                title: "Movies rank wise list",
                allPages: false,
                avoidLinks: true,
            },
            dataSource: {
                data: movies,
                pageSize: 10
            },
            sortable: true,
            pageable: true,
            columns: [
                {field: "rank", title: "rank" },
                { field: "rating", title: "rating" },
                { field: "year", title: "year" },
                { field: "title", title: "title" }
            ]
        });
        
        $("#btnExportToExcel").kendoButton({
            click: function () {
                $("#Moviesgrid").getKendoGrid().saveAsExcel();
            }
        });

        $("#btnExportToPdf").kendoButton({
            click: function () {
                $("#Moviesgrid").getKendoGrid().saveAsPDF();
            }
        });
    });
</script>

Government Jobs