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,
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
With the release of Essential Studio 2017 Volume
3 Service Pack 2 (version 126.96.36.199), 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
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.
following image shows the data grid being rendered to the second page in the
Data grid rendered on the second page of the PDF
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.