UI for ASP.NET AJAX

Resources for webinar “Create Word/Excel/PDF Documents in ASP.NET AJAX Web Apps using Telerik Tools”

On May 28 2015 we conducted one more webinar as part of our Thursday Webinar Series for Asia Pacific. This blog post is a recap of the webinar. You will be able to check out the slide deck that i used in the webinar and also the video recording of the webinar if you missed it live. This webinar was all about understanding how to create Word/Excel/PDF documents without installing either MS Office software of any PDF related software on your web server. Rather use our UI for ASP.NET AJAX suite and perform the document processing task.

UI for ASP.NET AJAX:

UI for ASP.NET AJAX is our complete toolbox for your ASP.NET AJAX based web applications. You get 70+ controls in this suite. The controls cater to almost any needs of your project. You can know more about our ASP.NET AJAX controls suite here: http://www.telerik.com/aspnet-ajax.

UI for ASP.NET AJAX

UI for ASP.NET AJAX

 

Slide Deck:

Here is the slide deck used for the webinar:

 

Video Recording:

Here is the video recording of the webinar. If you missed live webinar, you now have on demand viewing through the below recording.

 

Till next time – Happy Coding !

Advertisements
Kendo UI

Resources for Webinar “Exporting Data Easily with Kendo UI”

Feb 26, 2015 we conducted a webinar titled “Exporting Data Easily with Kendo UI”.  We here at Telerik India host webinars almost every Thursday of the month from 3PM to 4PM IST. This time we wanted to talk about one of the most asked feature in Kendo UI – Data Export.

Kendo UI

As part of our Kendo UI Q3 2014 release, we introduced the capability of exporting data to Excel & PDF out of the box. In this webinar i take a look at the options available for Excel export and PDF export. You can find more about Kendo UI here: http://www.telerik.com/kendo-ui.

Slide Deck:

Here is the slide deck used in the webinar:

Video Recording:

Here is the video recording of the webinar:

Q&A:

Q: Is it required to know JQuery for Kendo UI?
A: Kendo UI is based on JQuery and depends on JQuery. If you know JQuery way of working things, it will be easier to use Kendo UI.

Q: Is Kendo UI Open Source?
A: Kendo UI Core is the open source version of Kendo UI. You can know more about it here: http://www.telerik.com/kendo-ui/open-source-core. Kendo UI Professional is our Enterprise product which will require license.  You can know more about it here: http://www.telerik.com/kendo-ui

Q: Will Kendo UI mobile support BlackBerry as well?
A: yes it will.

Q: What could be the minimal software requirements to support Kendo UI?
A: Here are the supported browsers: http://docs.telerik.com/kendo-ui/browsers-support and JavaScript Prerequisites: http://docs.telerik.com/kendo-ui/install/prerequisites

Q: which IDE is the better one for KENDO UI?
A: Since Kendo UI is all about writing JavaScript – Any IDE that you are familiar with and are comfortable can be used.

Q: I dont have excel or PDF plugin installed in my web browser or on my box. still could i able to visualize the contents?
A: Kendo UI doesnt require Microsoft Office or Adobe software to create Excel or PDF documents on client side. But you will need Microsoft Office & Adobe software to view the exported files on the machine.

Q: What is the role of JSZip library in this?
A: Is is used to zip up the file and save it to local disk.

Q: Can I initialize the formulae for any cell while exporting to excel ?
A: Formulas are not supported as of now.

Q: what version of Kendo UI is export option supported?
A: Data Export is available from Q3 2014 release onwards

Q: how can we format the columns in excel?
A: This scenario is documented in our documentation. You can take a look at it here: http://docs.telerik.com/kendo-ui/web/grid/how-to/excel/cell-format

Teleik Ninja T-Shirt Winners:

As usual we have picked the following two lucky attendees as our T-Shirt winners. They are:

  • Sinu Antony
  • Altaf Shaikh

Congratulations to winners. Those who did not win, dont worry – we still have a lot of webinars to go this year. So try your luck in our next webinar.

Till next time – Happy Coding.

Kendo UI Grid

Simple Export to PDF from your Data Grid using Kendo UI

In my last blog post, we looked at a new feature of Kendo UI Grid released as part of our Q3 2014 – namely Export to Excel. Exporting data from Data Grid was a high ask feature and we provided that in our latest release of the product. In this blog post we will look at how to export the data grid contents to PDF. Kendo UI Data Grid support exporting to PDF out of the box. So let’s start looking at some code.

Creating a Grid:

As usual let’s build a simple grid. I will make use of our Northwind service available on our demo server as a data source to the grid. Here is the code snippet:

<div id="grid"></div>
<script>
   $("#grid").kendoGrid({
       dataSource: {
           type: "odata",
           transport: {
               read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
           },
           pageSize: 7
       },
       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>

This will produce the following grid:

Kendo UI Grid

Kendo UI Grid

 

Providing Export Option on the Grid:

As seen in my previous blog post on Excel Export, for PDF also we have a command bar option available out of the box. We just have to add a toolbar command named “pdf”. This will provide an “Export to PDF” on the grid toolbar and clicking which will export the Grid to PDF. Here is the code snippet:


<script>
   $("#grid").kendoGrid({
       tooldbar:[“pdf”]      
       ….
       //code omitted for brevity
   });
</script>

And here is the snapshot of how our grid will look like now:

Kendo UI Grid with Export button

Kendo UI Grid with Export button

If we now click on the “Export to PDF” we will get the Grid exported to a PDF document and the PDF will be saved to your system. Here is a snapshot of the PDF file itself:

PDF Document

PDF Document

Well that’s all it takes to export your Grid data to PDF.

Customizing the Exported PDF File:

Kendo UI Grid also provides certain options which can be set on the grid itself and these options will control how the PDF exported file has to be shaped. Here are the options supported for PDF export:

Property Type Description
author String Author of PDF Document
creator String Creator of PDF Document. Defaults to “Kendo UI PDF Generator”
date Date Date when PDF Document was created. Defaults to current date
fileName String Name of the exported PDF Document
keywords String Keywords of exported PDF Document
landscape Boolean Paper dimension setting. Default is false
margin Object Specify margins of the page
paperSize String Specify paper size of PDF Document. e.g. A4, A3 etc
subject String Specify subject of the PDF Document
title String Specify title of PDF Document

Here is the code snippet on how to set the PDF options:

<script>
   $("#grid").kendoGrid({
       tooldbar:[“pdf”],
        pdf:{
              author:"Lohith G N",
              creator:"Telerik India",
              date:new Date(),
              fileName:"NorthwindProducts.pdf",
              keywords:"northwind products",
              landscape:false,
              margin:{
                      left: 10,
                      right: "10pt",
              top: "10mm",
               bottom: "1in"
              },
              paperSize:"A4",
              subject:"Northwind Products",
              title:"Northwind Products"
       },     
       ….
       //code omitted for brevity
   });
</script>

Programmatically Export to PDF:

Toolbar option to provide an export option is great. It lets you add export feature without much of you doing any coding. But what if you have a situation where you want to a button outside of the Grid i.e. no toolbar button. And you want the grid to be exported to PDF on click of that external button. Kendo UI Grid covers you in this scenario by exposing a method called “saveAsPDF()”. You just grab instance of the grid at runtime and invoke the method “saveAsPDF()” to start the export. That’s as easy and simple it is. Here is the code snippet to show this:


&nbsp;

<div id="grid"></div>
<br>
<button id="btnExport">Export to PDF</button>
<script>
$("#btnExport").kendoButton(
{
click:function(){
$("#grid").data("kendoGrid").saveAsPDF();
}
});
//code omitted for brevity
</script>

That’s all its there to exporting the data grid to a PDF document. Do give it a try and let us know if you have any suggestion/feedback on this feature.

All the code in this blog post can be accessed on our Kendo UI DoJo here: http://dojo.telerik.com/@kashyapa/ADUVi