The fundamentals of using Essential Grid.

Configuring Navigation and Pagination for Your Grid

Learn how to set up navigation and pagination controls in this guide.

Navigation and Pagination

Essential Grid has a rich set of configuration options to set up navigation and pagination controls for your grid.

In this guide we are going to go through all of the related options and how you can use them.

Note: All the options covered in this guide can be found under the Nav-Filter-Sort tab:

Navigation Positions

Essential Grid provides you with a simple drag and drop method to add navigation controls to your grids through the Navigation Positions panel, which is the first panel under the Nav-Filter-Sort tab:

Let’s see how it works.

Available Modules

At the top of the panel you’ll see an area, bounded by a dashed line, labelled Available Modules:

Within its bounds you’ll see the control modules available to be added to any grid. They may include:

  • Back
  • Forward
  • Filter
  • Sort
  • Search
  • Pagination

Note: Some of the items in the above list may have already been added and hence not be seen in the Available Modules area.

Any of these modules can be added to your grid by dragging and dropping them onto a controls dropzone:

There are two types of dropzones: Inside and External.

Inside dropzones are contained within the grid area, while External dropzones allow navigation modules to be placed anywhere using a shortcode.

Controls Inside Grid

The area within the Navigation Positions panel labeled Controls Inside Grid shows you the six dropzones that are available inside the grid area:

  • Top 1
  • Top 2
  • Left
  • Right
  • Bottom 1
  • Bottom 2

Each of these dropzones is positioned over an example grid to illustrate where it would be relative to your grid:

To add a control module inside your grid just drag one of the buttons from the Available Modules area and drop it onto any of the above listed drop zones.

Controls Through Shortcodes

If you need to place a navigation control module somewhere other than inside the grid, you can instead drag and drop it onto the area under the label Controls Anywhere on Page:

After you do this you will see that a shortcode has been generated that can then be used to place this navigation control anywhere on your site that you like.

Grid Internal Controls Layout

The Grid Internal Controls Layout panel is second from the top under the Nav-Filter-Sort tab, and allows you to set up alignment and spacing for drop zones:

Let’s see what can be controlled with these options.

Dropzone Alignment

For each of the two top drop zones, and the two bottom drop zones, you’ll see an option to align any controls in that drop zone to either the left, center, or right:

Note that when you change one of the sittings you won’t see any difference right away. To see the changes save your grid, refresh it, then look at the preview area at the bottom of the page.

Dropzone Margin

Each of the top drop zones and bottom drop zones also have an associated margin option:

The two top drop zones have a Margin Bottom option. These allow you to set the amount of space, in pixels, that should appear below that drop zone.

The two bottom drop zones on the other hand have a Margin Top option instead. These allow you to set the amount of space above the related drop zone.

Dropzone Left and Right

The Dropzone Left option allows you to set an amount, in pixels, by which the left dropzone should be inset towards the right.

The Dropzone Right option allows you to set an amount, in pixels, by which the right dropzone should be inset towards the left.

Module Spaces

If you have multiple navigation controls added to a single dropzone, you can use the Module Spacing option to set an amount, in pixels, of horizontal space between those controls:

Pagination Settings

If you are using pagination with your grid, then the Pagination Settings panel will allow you to configure related page numbering and scrolling options:

Let’s see how to use each of the three options it contains.

Page Number Option

Page Number Option gives you two modes for how the page numbers on the bottom of your grid will be presented:

Choose Smart to display the first few numbers, then an ellipse, then the last few page numbers.

Choose Full to show every single page number, no matter how many there are.

Scroll to Top

The Scroll to Top option is useful if you have a grid that is relatively tall, such that when a person reaches the pagination controls they can no longer see the top of the grid:

In this circumstance, you can set Scroll to Top to On, then when a visitor clicks to go to the next page they’ll automatically be scrolled to the top of the grid to ensure they can see all the content.

Scroll to Offset

Instead of the scroll to top action taking a visitor all the way to the top, you might instead like the scroll position to be a little further down.

If so, enter a pixel value into the Scroll To Offset field:

Now when a visitor clicks the pagination, the position they are scrolled up to will be offset by the amount you entered.

Up Next: Filtering and Sorting

Now that we’ve covered the navigation aspects of the Nav-Filter-Sort tab, on the next page of the good we are going to step through all the options related to filtering and sorting.

Configuring Navigation and Pagination for Your Grid