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 Excel from your Data Grid using Kendo UI

In Q3 2014 release of our Kendo UI, we added one of the most sought out feature in the Grid. Exporting grid data was one of the top ask feature for Kendo UI Grid. We are happy to say that with the Q3 release Kendo UI Grid now supports exporting to Excel or PDF document out of the box. In this blog post we will take a look at how to use the Excel export feature of the Kendo UI Grid.

Creating a Grid:

First we will create a simple Kendo UI Grid. I will connect to one of our demo service which is based on Northwind database. I will use the Products table and display Product Name, Units on Order and Units in Stock and will have a page size of 7. Here is the code snippet for the grid:

<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>

And here is the output of the above code snippet:

Kendo UI Grid

Providing Export Option on the Grid:

Before we proceed with enabling the export to excel option of the grid, there is one prerequisite that needs to be taken care of. Excel Export relies on a JavaScript library called “jszip”. This library needs to be referenced before Kendo UI JavaScript reference. JSZip is part of the Kendo UI distribution and is also available via the Kendo UI CDN:

<script src=”http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js”></script&gt;

Kendo UI Grid provides one of the easiest way to configure the export button options. If you have used Kendo UI Grid before, you will be familiar with the concept of Toolbars on Grid. We have provided a simple command which can be used in toolbar and provide export to excel or export to pdf option. Yes with just one setting you can now provide export capability on your grid. Let’s see the code to believe it:

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

And here is the output of the above code:

Kendo UI Grid with Toolbar
Let’s go ahead and click on the Excel export button. You should see a file named “Export.xslx” being download to your machine. Here is the screenshot of the excel file on my machine:

Excel Export File

Customizing the Exported Excel File:

So far we saw how simple it was to provide an export to excel capability on the Grid. But the exported file was named “Export.xslx”. Well that name is not intuitive. Better would be to provide a meaning full name to the excel file that’s gets exported. Fortunately, the Kendo UI team has thought about it and the Grid API has exposed certain options for Excel export feature. Let’s take a look at the options we have on hand:

Property Type Description
excel Object Configure the Kendo UI Grid Excel export settings
excel.fileName String Configure the file name of the exported excel file
excel.filterable Boolean Configure whether exported excel file will have column filtering or not
Excel.allPages Boolean Configure if all pages data need to be exported. Default is false

Let’s see the above excel options in action. Here is a code snippet which sets the excel options on the Grid:

<script>
    $("#grid").kendoGrid({
        toolbar:[“excel”],
        excel:{
	filename:”Northwind Products Stick List.xslx”,
	filterable:true,
	allPages:false
        },
        ….
        //code omitted for brevity
    });
</script>

Now, when we click on the Export to Excel button – the exported file will be named as “Northwind Products Stock List” and will have data filters on in the worksheet. Here is a screenshot of the exported excel file on my machine:

Excel Export File with Filters
Well that how easy it is to configure your excel export options.

Programmatically Export to Excel:

So far we have seen how the inbuilt feature of toolbar helps you to provide the excel export capability with juts a single setting. What if you have a scenario where you don’t need a toolbar button the grid rather you need a button outside the grid and on click of this external button excel file should be exported. Well even this scenario is covered by the export feature of Kendo UI Grid. Grid API exposes a single method called “saveAsExcel()” which can be invoked on the Grid at runtime and the excel file will be exported. Let’s see this in action. Here is the code snippet to do this:

<div id="grid"></div>
<button id="btnExport">Export to Excel</button>
<script>
  $("#btnExport").kendoButton({
    click: function()
    {
      $("#grid").data("kendoGrid").saveAsExcel()
    }
  })

    $("#grid").kendoGrid({
        excel: {
          fileName: "Northwind Products Stock List.xlsx",
          filterable:true,
          allPages:false
        },
        …
        //code omitted for brevity
    });

Lets take a closer look at what we have done here. I have placed a button outside the grid. I have gone ahead and set excel export options on the grid. When the button is clicked, I obtain a reference to kendo grid and call “saveAsExcel()” method on the grid instance. And the behavior is the same i.e. an excel file is exported according to the options set on the grid.

I hope this blog post excites you with the new feature of Kendo UI Grid namely Excel Export. If you have followed along the blog post, you would have realized that providing excel export option on a grid is as simple as setting couple of properties on the Grid itself. It cannot get any easier than this. Do give it a try and let us know your feedback or suggestion on Excel Export feature of Kendo UI Grid.

Note: The complete code of this blog post is made available as a Kendo UI DOJO here: http://dojo.telerik.com/@kashyapa/umuWI

Till next time, Happy Coding!