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!

Top 5 Blog Posts of 2014

We wanted to take this opportunity to thank you for a wonderful 2014. We have learnt and grown with you. In all cases, we have tried to bring to you the latest and greatest from Telerik. The technology field is a quest that is never ending – And that’s what we love about it.

We wish all the readers of our humble little effort, a Very Happy New Year:

Card_India_2014

Before we let the year go by, here are the top 5 most visited blog posts from 2014:

Kendo DropDownList Wrapper for ASP.NET MVC
How to iterate all the data in Kendo UI Data Source
Kendo Editor Wrapper for ASP.NET MVC
Conditional statement in Kendo UI Template
Kendo AutoComplete Wrapper for ASP.NET MVC

In the coming days, we are even more excited about the emerging technologies on the horizon. This year we also added a slew of technologies from Progress Technologies that we will share in the coming days.

We are always looking for feedback and opportunities for improvement. Please do share your thoughts and comments about our blog and technologies in the comments below. We want to be better in 2015 for you.

Telerik Reporting

Video: Telerik Reporting with Visual Studio 2013 in WPF Applications

Recently, i was talking to a customer who was evaluating Telerik Reporting. They were on Visual Studio 2013 and wanted to use Telerik Reports in WPF application. But they were having difficulty getting started with our Reporting. In order to make things easier, i have recorded a getting started video for Telerik Reporting using Visual Studio 2013 and consuming the report in WPF application.

Here is the video:

Hope this helps anybody who is working on our Reporting software & WPF platform.

Till next time, Happy Coding.

Telerik Mobile Testing

Resources for Webinar – Mobile Testing with Telerik Tools

Proliferation of Mobile Devices have lead to many mobile applications. Testing of these mobile applications require a new approach and new tools. In this webinar, we have covered the same.

About Telerik Mobile Testing:

Telerik Mobile Testing is an automated testing solution for native, hybrid, and web apps. Write one coded test on the desktop and execute it against any supported devices and clients, including an iOS native app, Android native app, hybrid app(Android/iOS/WP), mobile browser, and desktop browser. These coded tests are written in JavaScript. To know more about Telerik Mobile Testing, check this link.

Telerik Mobile Testing

Telerik Mobile Testing

Slide Deck:

Here is the slide deck used for the webinar:

Video Recording:

The recorded video of the webinar is available below:

Q & A:

Q: Do we to write separate code for android and ios?
A: The operation will be different for different platform. but you write one test or spec.

Q: Can we create multiple agents and run on multiple agents?
A: Yes. supported. You can take a look at this video: https://www.youtube.com/watch?v=JxxAkK1h26o

Q: Do we need to know android coding before?
A: Nope. You just need to know how to access a particular element from the screen . we have a query syntax

Q: what would be the cost of Telerik framework?
A: Pricing is available here: http://www.telerik.com/purchase/platform

Q: Web application load-performance testiing can it be possible using Telerik Test Studio?
A: Yes. Teleik Test Studio can perform automated testing of any web pps which includes functional/load/performace – all with one software

Q: If I write code for ios and andriod under one spec can i run it seperatley for each of the platform?
A: When you write a test – you can have platform specific instruction written under the same test. The test runner will execute the appropriate instruction depending on the platform.

Q: How are elements located?
A: by tagname, by clasname, by id, by XPATH also

Q: How to lacate elements in app?
A: With our framework – it doesnt do auto detection. we assume you know the id or tagname or classname or xpath to locate a element

Q: Can parameterization is possible using Telerik Test Studio? Want to check login scenario with multiple users
A: Yes. Absolutely – data driven testing is supported.

T-Shirt Winners:

As with any of our webinars, we have selected the following 2 attendees randomly who will receive our .NET Ninja T-Shirt.

  • Rajitha K
  • Kapil Chabra

Congratulations to the winners. You will be contacted on your registered email and t-shirt will be shipped.

We hope to see you in our future webinars also.

Till next time – Happy Coding.

Sitefinity

Resources for Webinar – “Jumpstart your ASP.NET Project Development with Sitefinity Platform”

On Dec 11 2014, we conducted a webinar titled “Jumpstart your ASP.NET Project Development with Sitefinity Platform”.  This time the emphasis was on our Content Management Solution or CMS software that we have called “Sitefinity”. One of our Sales Engineer from Sofia delivered this webinar. This blog post is a recap of the webinar. if you missed attending the webinar, you will be able to catch up on the slide deck, video recording and questions from the webinar as part of this blog post

About Sitefinity:

Sitefinity is a content management system (CMS) that you use to create, store, manage, and present content on your website. Content and pages in Sitefinity are multilingual and you can use one Sitefinity instance to manage multiple sites that can share content. To know more about Sitefinity, head over to this URL: http://www.sitefinity.com/

Slide Deck:

Here is the slide deck that was used in the webinar:

 

Video Recording:

Here is the video recording of the webinar:

 

Q&A:

Here are the questions that were asked as part of the webinar:

Q: Can we add custom SEO tags and page categories or type like news or blogs?
A: Yes. We have News/Blogs supported out of the box.

Q: Besides news and blog, can we have our custom page type?
A: Yes. You can create your own custom content type

Q: Is there a software available for use with our servers ? or we should use the site being used by Greg?
A: Sitefinity is a software you download. and deploy to your server. you can then design you site

Q: Is trial version available?
A: Yes. just head over to http://www.sitefinity.com

Q: My client wants the CMS to also have workflows?
A: Workflows are supported in Sitefinity. You can create your custom workflow with Windows Workflow Foundation.

Q: RadControls are also available along with same Sitefinity licence ?
A: Yes. But its usage has to be within the Sitefinity project. You cannot use it to create a standalone ASP.NET project. The licensing terms will not allow it

Q: Is there any connector available in Sitefinity to integrate with media maintained outside, e.g. in a DAM?
A: We have connectors for SharePoint, Marketo and SalesForce. Sitefinity is all web services under the hood. you can create your own by hooking in to sitefinity events

Q: Which .net framework is required to deploy the project
A: Here is the system requirements for Sitefinity – http://www.sitefinity.com/documentation/documentationarticles/installation-and-administration-guide/install-sitefinity/system-requirements-

Q: How sitefinity can help in scenarios where load balancers are used?
A: Documented here – http://www.sitefinity.com/documentation/documentationarticles/installation-and-administration-guide/load-balancing

T-Shirt Winners:

We have selected the following 2 attendees from the webinar (randomly) who will recieve our t-shirts. They are:

  • Anurag Agarwal
  • Sathish Potta

Congratulations to the winners. We will contact you on your email and ship the t-shirts.

Till next time, Happy Coding.

Register for the Last Learning Webinars of 2014

2013_2014We are the end of 2014 and we can almost hear the celebration bells ringing. Just like always, we have the learning webinars to keep you company in those celebrations.

We are giving out lots more T-Shirts this holiday season. Read to the end of this post to know how to make the most of this.

We are happy to bring to you sessions that have been most frequently requested by the community. Register for these last webinars of 2014 using the links below:

Date Time (IST) Topic
Thursday,
Dec 11 ’14
3:00 – 4:00 PM Jumpstart your ASP.NET Project Development with Sitefinity Platform
Thursday,
Dec 18 ’14
3:00 – 4:00 PM Testing Mobile Applications with Telerik Platform

Telerik Ninja T-Shirts (3 nos.) are still up for winning during each webinar. The most active participants during the sessions win the goodies.

This is a season of giving and and there is now a shortcut for winning our awesome T-Shirts. You need to download the “unofficial” Telerik app (in Beta) – NinjaVerse and take the Telerik Progress Quiz (located in Engagements -> Contests). We will be announcing 5 winners every week.

I wouldn’t wait to download and take quiz! Here is the download link for NinjaVerse app: Android Devices |iOS Devices