Kendo UI Grid with external buttons to export

gridwithextbuttons

<div id="grid"></div>
  <br>
  <button class="k-button k-primary" id="btnExcelExport">Export to Excel</button>
  <button class="k-button k-primary" id="btnPdfExport">Export to PDF</button>
  
<script>
  	$("#btnExcelExport").kendoButton({
      click:function(){
        $("#grid").getKendoGrid().saveAsExcel();
      }
    });
  
  $("#btnPdfExport").kendoButton({
      click:function(){
        $("#grid").getKendoGrid().saveAsPDF();
      }
    });
  
    $("#grid").kendoGrid({
      excel:{
      	    fileName:"Northwind Product List.xlsx",
      	    allPages:true, 
      	    filterable:true
      	},
      pdf:{
              author:"Lohith G N",
              creator:"Telerik India",
              date:new Date(),
              fileName:"Northwind Product List.pdf",
              keywords:"northwind products",
              landscape:false,
              margin:{
                    left: 10,
                    right: "10pt",
                    top: "10mm",
                    bottom: "1in"
              },
              paperSize:"A4",
              subject:"Northwind Products",
              title:"Northwind Products"
       },
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
            },
            pageSize: 10
        },
        sortable: true,
        pageable: true,
        columns: [
            { width: 300, field: "ProductName", title: "Product Name" },
            { field: "UnitsOnOrder", title: "Units On Order" },
            { field: "UnitsInStock", title: "Units In Stock" }
        ]
    });
</script>