This topic describes how to customize the button bar to bring the pagination controls into the left-aligned button bar region, and also add a custom grid selection menu.

• Set Up
• Add JavaScript File for Moving Pagination Controls
• Query XML Metadata to Move Pagination Controls
• Add a Custom Grid Selection Menu

Set Up

To see the benefits of these options, you'll want a wide grid view to work with. If you already have one, you can use it with minimal updates described below.

If not, you can create a new study folder and install the example research study as described in this topic:

• Install an Example Study
• If you install it in the "Tutorials" project, "HIVStudy" folder (no spaces), you will have to make fewer changes to our example.
• On the Clinical and Assay Data tab, open the ViralLoad_NASBA dataset.
• Use the > Customize Grid to display many columns from the different datasets.
• Click View Grid and confirm that you see significant space between the button bar on the left and the pagination controls.
• Click Save and save as the default grid.

Add JavaScript File for Moving Pagination Controls

Click here to download, or create a text file named "MovePaginationButtons.js" and paste the following into it:

LABKEY.MovePaginationButtons = {
  pullLeft: function(dataRegion) {
    $('#' + dataRegion.domId + '-headerbar .labkey-pagination').parent().removeClass('pull-right')
  }
};

In your study, select > Go To Module > FileContent and drop this file into the target area to upload it. You can now refer to it from query metadata as described in the next section.

Query XML Metadata to Move Pagination Controls

Still in your study folder, add query XML metadata to the wide grid you created.

• Select > Go To Module > Query.
• Open the study schema and the ViralLoad_NASBA dataset.
• Click Edit Metadata then Edit Source.
• On the XML Metadata tab, paste the following inside the <table> section, i.e. parallel to, but not inside, the <columns> section.
• Note: You will need to update the path if you didn't install your study in a "Tutorials/HIVStudy" folder.

...
<buttonBarOptions includeStandardButtons="true">
  <includeScript>/_webdav/Tutorials/HIVStudy/@files/MovePaginationButtons.js</includeScript>
  <onRender>LABKEY.MovePaginationButtons.pullLeft</onRender>
</buttonBarOptions>
...

• Click Save & Finish.
• Now you will see the button bar controls have moved to be part of the left-aligned button bar.

Add a Custom Grid Selection Menu

If your dataset contains a long menu of custom grids, or you simply wish to "surface" a few of the key grids that your users will need outside of the menu, add this example to the query metadata for your grid. Note that this can be used in conjunction with the above relocation of pagination controls, but does not need to be.

In this example, we have two named custom grids "Grid View A" and "Grid View B" that we want to surface on an easy and readable "Go to View" menu. All of these names can easily be changed in the XML.

Reopen the XML Metadata editor as described above, and include this <item> in the <buttonBarOptions>:

...
<buttonBarOptions includeStandardButtons="true">

  <!-- the XML for moving pagination controls would go here, if used together -->

  <item text="Go to View" insertPosition="end">
    <item text="default">
      <onClick>
        dataRegion.changeView({type: 'view', viewName: null})
      </onClick>
    </item>
    <item text="Grid View A">
      <onClick>
        dataRegion.changeView({type: 'view', viewName: 'Grid View A'})
      </onClick>
    </item>
    <item text="Grid View B">
      <onClick>
        dataRegion.changeView({type: 'view', viewName: 'Grid View B'})
      </onClick>
    </item>
  </item> 
</buttonBarOptions>
...

When you Save & Finish, your grid will have a new dropdown menu giving quick access to the other named grid views.

Learn more about using dataRegion.changeView in the JavaScript API documentation.

More Examples

• Example Code: Invoke JavaScript from Custom Buttons

Related Topics

• Custom Button Bars