Exporting in Kendo Grid

Grid came into existence to fulfill the need of data presentation in applications. Since it’s creation it has been an undisputed choice for data presentation.

Exporting is an integral component of the grids. In most of the third party tools we have the exporting feature as an inbuilt component. In kendo grid yet we don’t have it so today I will be throwing some light on how to achieve it.

We will be exporting the data of a kendo grid into two different formats i.e Excel(XLS) and Word(doc).

Have a video for the functionality as well.

We need a button on click of which we will be initiating the Exporting into different above mentioned formats.

We can place these buttons either outside or at the toolbar of the Kendo Grid. For my demonstration I will be using the toolbar but the implementation will remain the same even if the buttons are placed outside the grid area.

Kendo Grid:

Untitled

So in the above code a kendo grid is created in the Jquery, this grid has a toolbar in which there are two Image buttons for exporting the data in Excel and word format.

On click of these buttons we are calling a method ExportData with are parameter that will differentiate that wheather the word or excel button is pressed.

Export Function:

In the ExportData method we will be exporting the data of the grid.

Key Steps:

1> Get the DataSource : Retrieve the datasource of the kendo grid. If we want to take              filtering also into account then we have to find the filtered datasource.

2> Declare the extension (Type of file in which the data should be exported).

3> Declare the Table header ( List of the Coulumns Header )

4> Fill the data into rows corresponding to the headers.

5> Create a link button dynamically click of which will initiate the downloading of the               exported files.

Untitled1

This is how we can achieve the Exporting feature in the Kendo grid at the client side.

Keep Learning Keep Exploring 🙂

Advertisements

6 thoughts on “Exporting in Kendo Grid

  1. Hi Raman

    For generating the excel file or doc file we are merely creating a link button and initiating it’s click event.
    Will be great if you can share any type of error if you are getting one in the console.
    Also are you able to download the doc file?
    There was a @ symbol in the file name aLink.download = ‘exporteddata@.xls’; . Try removing that and share the results.

  2. Nice article , Have you tried applying styles to the elements..? i am not able to do it.if you know let me know the way we can use.

  3. Hi I am getting an error ” Uncaught TypeError: Cannot read property ‘dataSource’ of undefinedexportedData @ archiveSearch.js:160onclick @ Search.aspx:1″

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s