This guest blog post was written by Dave Lasike. He can be found on Twitter at @davelasike.
Recently I was asked to prototype a cross-platform application for a community-based education provider. The application was designed to replace a form being used to assess students’ driving abilities. The tricky part came when deciding how to display the assessment sheet, a grid displaying driving assessment data, in a mobile application. My initial thinking was to do something like a list view within a list view, or a custom grid with rows and columns containing buttons within each cell. However, Syncfusion’s data grid control for Xamarin.Forms provided an easy out-of-the-box solution to do what we needed, and allowed us to customize a range of features to meet the client’s requirements.
With the release of Essential Studio® 2017 Volume 3 Service Pack 2 (version 15.3.0.33), a StartPageIndex property was added, which allows you to specify which page in a PDF document you want the data grid control to be rendered to.
Previous to this release, the data grid could only be rendered to the first page of a PDF document. This wasn’t a bad thing, but if you tried to create a PDF document based on a specific design, you had a great control that worked well across mobile platforms but could only be rendered on the first page of every PDF document as opposed to a specific page, which often conflicted with what we needed to achieve.
The first step was to clear out the portable class library that is generated when creating a Xamarin.Forms project. If you haven’t considered using .NET Standard, there are several blog posts online that show how to implement a .NET Standard library into your project (see this post from Nick Randolph in particular). There are also blog posts that show how to install PCL NuGet packages into .NET Standard libraries (see this post from James Montemagno).
Once the .NET Standard library was up and running, it was time to take a look at Syncfusion’s data grid control. To use it, you need to import the appropriate Syncfusion NuGet packages. Implementing the control is relatively easy. The Syncfusion documentation is excellent. With small code snippets, getting started and testing out the controls is a case of just reading through the documentation, copying the code snippet, and playing around to suit your needs. I won’t cover creating the data grid control or creating the model here, as those are covered extensively in the getting started documentation.
What I want to focus on is the StartPageIndex property and how to implement it into your code when generating a PDF document with the data grid control. At the time of this writing, there is no documentation on the StartPageIndex property. However, it is fairly easy to implement given it is an int that takes the page number you want to render the control to.
In my case, I had a page that I wanted to create before the data grid. To do this, I created the PDF document, added the required pages, and then added the data grid control to the second page.
The following image shows the data grid being rendered to the second page in the PDF document.
Data grid rendered on the second page of the PDF document
This was a quick overview of how to render the data grid control to a specific page using the StartPageIndex property. As you can see from the screenshot, there is a range of customizations (e.g., different colored cells) that you can add to your data grid and render to PDF if required by attaching to the different events that are raised when generating the PDF.