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.

 

@Styles.Render("~/Content/shieldui.1.7.29-Trial/css/light/all.min.css")
@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

namespace SUIGridExport.Models
{
    public class SaveData
    {
        public string FileName { get; set; }

        public string ContentType { get; set; }

        public string Base64Content { get; set; }
    }
}

 Afterwards, we need to create our Controller.

 

 

 

FileSaveController.cs 

namespace SUIGridExport.Controllers
{
    public class FileSaveController : ApiController
    {
        [HttpPost, ActionName("save")]
        public IHttpActionResult Save([FromBody] SaveData saveData)
        {
            var data = Convert.FromBase64String(saveData.Base64Content);
            var contentType = saveData.ContentType;

            // strip the content encoding and other additional headers from the type
            contentType = Regex.Replace(contentType, ";.*$", "",
                RegexOptions.Compiled | RegexOptions.Multiline | RegexOptions.IgnoreCase);

            var result = new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content = new StreamContent(new MemoryStream(data))
            };

            result.Content.Headers.ContentType = new MediaTypeHeaderValue(contentType);
            if (contentType.Contains("xml"))
            {
                result.Content.Headers.ContentType.CharSet = "UTF-8";
            }

            result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
            {
                FileName = saveData.FileName
            };

            return Ok(result);
        }
    }
}

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 

<div id="grid"></div>

@section scripts {
    <script type="text/javascript" src="~/Content/shortGridData.js"></script>

    <script type="text/javascript">
    jQuery(function ($) {
        $("#grid").shieldGrid({
            dataSource: {
                data: gridData
            },
            paging: {
                pageSize: 20,
                pageLinksCount: 10
            },
            columns: [
                { field: "id", width: "70px", title: "ID" },
                { field: "name", title: "Person Name" },
                { field: "company", title: "Company Name" },
                { field: "email", title: "Email Address", width: "270px" }
            ],
            toolbar: [
                {
                    buttons: [
                        {
                            commandName: "pdf",
                            caption: '<span class="sui-sprite sui-grid-icon-export-pdf"></span> <span class="sui-grid-button-text">Export to PDF</span>'
                        }
                    ]
                }
            ],
            exportOptions: {
                proxy: "/filesave/save",
                pdf: {
                    fileName: "shieldui-export",
                    author: "John Smith",
                    dataSource: {
                        data: gridData
                    },
                    readDataSource: true,
                    header: {
                        cells: [
                            { field: "id", title: "ID", width: 50 },
                            { field: "name", title: "Person Name", width: 100 },
                            { field: "company", title: "Company Name", width: 100 },
                            { field: "email", title: "Email Address" }
                        ]
                    }
                }
            }
        });
    });
    </script>
}

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.