#JQGRID EXPORT TO EXCEL DEMO JAVASCRIPT FREE HOW TO#We also learned how to export the grid to excel.JqxGrid is an advanced jQuery Grid widget built entirely with JavaScript and open web standards. In this article we learned how to use jqGrid to display data from the database. Later the GridView control is rendered to the HtmlTextWriter and send as an attachement with the response. Inside the ExportToExcel action we simply retrieve the products from the database and creates an anonymous type collection and assign to the GridView control. Create a ExportToExcel service and use that to perform the exportation task. #JQGRID EXPORT TO EXCEL DEMO JAVASCRIPT FREE CODE#NOTE: You should not put the export to excel code right into the controller action. When the export to excel button is clicked the form is submitted and "ExportToExcel" action is fired. If we need to include a couple of more columns we can add the names in the string collection for the columnNames parameter to the ToJsonForjqGrid method. The second argument is the columnNames which contains the name of the columns to be included in the jqGrid.Īnd here is the GetProducts action using the ToJsonForJqGrid method. The first argument is the primary key of the object which will be assigned to the id property of the row. The purpose of ToJsonForjqGrid extension method is to convert a List collection into a format supported by the jqGrid. We should move this code to a different place where it can be reused.Ĭreating ToJsonForjqGrid Extension Method: The code in the GetProducts action of the HomeController is very nasty. There are few columns which are not displayed because they were not included in the jqGrid column collection. The above image shows that Grid is rendered on the page successfully. When you run the above example you will see the following output: The rows collection contains an object with id property and cells collection. Finally, we created an Anonymous type jsonData which contains the properties required by the jqGrid. The _productRepository.GetAll() method is responsible for fetching all the products from the Products table. Now, let's see what the controller looks like: The colModel refers to the individual grid columns as an array of properties. The colNames represent the header text of the table that will be displayed. The url attribute represents the controller action that will be fired. The above code assigns different values to the jqGrid. Let's take a look at the loadProducts method. The loadProducts JavaScript function is responsible for populating the View with the data. Here is our simple repository which returns all the products from the Products table as a List. We will be using the Northwind database " Products" table. Since, we are using master pages we will include all the script and CSS references in the master page as shown below:Īfter creating all the references our next task is to populate the Grid with data. #JQGRID EXPORT TO EXCEL DEMO JAVASCRIPT FREE DOWNLOAD#If you find it hard to follow then just download the source code at the end of this article and set up your project similar to the download sample.īefore we start retrieving products from the database we should make a reference to all the required scripts in our page. The JGrid documentation explains how and where to put all the. First, you can download the JQuery library and the JGrid library from the following URLs: We are using ASP.NET MVC 1.0 for our demo. You can always use the plain vanilla HTML code to create your tables but JQuery Grid gives you the ability perform sorting, paging, searching and many other operations which are very cumbersome to write.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |