Grid Export Implementation With Shield UI And ASP.NET Web API

About Shield UI
 
Shield UI is a Web component development company, which specializes in the design, development and marketing of UI widgets for pure JavaScript development, as well as for development in ASP.NET, ASP.NET MVC and Java Wicket.
 
What we are going to do
 
In this article, we will see how easy is to implement Shield UI's Grid Export function. Grid supports following-
  • Excel 2003 (.xml)
  • Excel 2007 and Later (.xlsx) 
  • PDF
In this article, we are going to implement PDF function.
 
Requirements
 
Some basic knowledge of ASP.NET Web API and ASP.NET MVC. 
 
Lets get started
 
Before creating our Model and Controller, we need to create our project. How easy is it?
 
Let's create it.
 
 
 
When Visual Studio is ready for scaffolding of our project, we need to include Shield UI's package in our project. We can download it from Shield UI and add JS/CSS in the project. Afterwards, we need to go in our _Layout.cshtml and add the lines given below.
 
  1. @Styles.Render("~/Content/shieldui.1.7.29-Trial/css/light/all.min.css")  
  2. @Scripts.Render("~/Content/shieldui.1.7.29-Trial/js/shieldui-all.min.js")  
We are all set. Now, let's create our Model class. 
 
SaveData.cs
  1. namespace SUIGridExport.Models  
  2. {  
  3.     public class SaveData  
  4.     {  
  5.         public string FileName { getset; }  
  6.   
  7.         public string ContentType { getset; }  
  8.   
  9.         public string Base64Content { getset; }  
  10.     }  
  11. }  
 Afterwards, we need to create our Controller.
 
 
 
FileSaveController.cs 
  1. namespace SUIGridExport.Controllers  
  2. {  
  3.     public class FileSaveController : ApiController  
  4.     {  
  5.         [HttpPost, ActionName("save")]  
  6.         public IHttpActionResult Save([FromBody] SaveData saveData)  
  7.         {  
  8.             var data = Convert.FromBase64String(saveData.Base64Content);  
  9.             var contentType = saveData.ContentType;  
  10.   
  11.             // strip the content encoding and other additional headers from the type  
  12.             contentType = Regex.Replace(contentType, ";.*$""",  
  13.                 RegexOptions.Compiled | RegexOptions.Multiline | RegexOptions.IgnoreCase);  
  14.   
  15.             var result = new HttpResponseMessage(HttpStatusCode.OK)  
  16.             {  
  17.                 Content = new StreamContent(new MemoryStream(data))  
  18.             };  
  19.   
  20.             result.Content.Headers.ContentType = new MediaTypeHeaderValue(contentType);  
  21.             if (contentType.Contains("xml"))  
  22.             {  
  23.                 result.Content.Headers.ContentType.CharSet = "UTF-8";  
  24.             }  
  25.   
  26.             result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")  
  27.             {  
  28.                 FileName = saveData.FileName  
  29.             };  
  30.   
  31.             return Ok(result);  
  32.         }  
  33.     }  
  34. }  
We are almost done. Now, we need a View for our Grid and to keep it simple, we are going to edit the already created one Index.cshtml 
 
Index.cshtml 
  1. <div id="grid"></div>  
  2.   
  3. @section scripts {  
  4.     <script type="text/javascript" src="~/Content/shortGridData.js"></script>  
  5.   
  6.     <script type="text/javascript">  
  7.     jQuery(function ($) {  
  8.         $("#grid").shieldGrid({  
  9.             dataSource: {  
  10.                 data: gridData  
  11.             },  
  12.             paging: {  
  13.                 pageSize: 20,  
  14.                 pageLinksCount: 10  
  15.             },  
  16.             columns: [  
  17.                 { field: "id", width: "70px", title: "ID" },  
  18.                 { field: "name", title: "Person Name" },  
  19.                 { field: "company", title: "Company Name" },  
  20.                 { field: "email", title: "Email Address", width: "270px" }  
  21.             ],  
  22.             toolbar: [  
  23.                 {  
  24.                     buttons: [  
  25.                         {  
  26.                             commandName: "pdf",  
  27.                             caption: '<span class="sui-sprite sui-grid-icon-export-pdf"></span> <span class="sui-grid-button-text">Export to PDF</span>'  
  28.                         }  
  29.                     ]  
  30.                 }  
  31.             ],  
  32.             exportOptions: {  
  33.                 proxy: "/filesave/save",  
  34.                 pdf: {  
  35.                     fileName: "shieldui-export",  
  36.                     author: "John Smith",  
  37.                     dataSource: {  
  38.                         data: gridData  
  39.                     },  
  40.                     readDataSource: true,  
  41.                     header: {  
  42.                         cells: [  
  43.                             { field: "id", title: "ID", width: 50 },  
  44.                             { field: "name", title: "Person Name", width: 100 },  
  45.                             { field: "company", title: "Company Name", width: 100 },  
  46.                             { field: "email", title: "Email Address" }  
  47.                         ]  
  48.                     }  
  49.                 }  
  50.             }  
  51.         });  
  52.     });  
  53.     </script>  
  54. }  
The data in the grid is coming from a JSON file, which is included in the project.
 
If everything is fine, we should see a populated grid with the button to export the data, as shown below.
 


The final result of our PDF file is given below.
 
 
 
References
  • https://demos.shieldui.com/web/grid-general/export-to-pdf
  • https://www.shieldui.com/documentation/grid
Conclusion
 
In this example, we have seen how fast and easy it is to create a grid with the populated data and export the information into PDF. I hope , you enjoyed it. Feel free to give feedback in the comments.

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now