For the dgrid 0.4 release we added a new demo and helper utility, the dgrid Laboratory. This is more than just a demo, as it allows you to quickly explore and build different dgrid configurations, returning boilerplate code for efficiently including dgrid within your application. Although not every possible configuration is supported with this tool (sub-rows, column sets, and compound columns), it is very useful for visually generating complex base configurations for use in your applications. The dgrid Laboratory itself was built using dgrid as well!

dgrid Laboratory

Using the dgrid Laboratory

The left panel of the dgrid Laboratory allows you to select and modify the grid’s configuration. The right panel provides a preview of the grid as well as generated code. These right panel tabs are updated in real time as you make modifications to the dgrid options in the left panel.

Columns Tab

The Columns tab in the left panel can be used to define the columns for your grid. To create a new column simply:

  1. Type in a name in the textbox
  2. Click the ‘+’ next to the textbox

The options for editing, deleting, and reordering columns should be fairly intuitive. To edit an existing column, click the gear icon next to the column name in the list below the textbox. Depending on the mixins selected, you will find different editing options. You can delete columns by clicking the ‘x’ next to the column name in the list below the textbox. You can also reorder the columns by dragging the drag handle that exists to the left of each column name.

Grid Features

As its name implies, this tab provides a list of various grid features that you may apply to your grid. Some features may not work together (e.g. Pagination and OnDemandGrid), so features may be automatically deselected to prevent failures or redundancy in the demo grid.

The following grid features are currently available within the dgrid Laboratory:

  • Grid – The core grid component
  • OnDemandGrid – Provides lazy-loading and virtual scrolling of data
  • Keyboard – Facilitates keyboard handling
  • Selection – Adds row selection
  • CellSelection – Adds cell selection
  • Tree – Enables expansion of rows to display children via expansion controls in a specific column
  • Pagination – Implements classic discrete paging controls
  • DijitRegistry – Adds each dgrid instance to the Dijit registry
  • DnD – Adds row reordering functionality via drag and drop

Similar to each row in the Columns tab, most grid features have a gear icon to edit the configuration for that feature.

Column Features

The Column Features tab provides a list of various column features that you can apply to your grid. Column features are still just mixins and extensions like grid features, but focus on adding capabilities to one or more columns. Adding a column feature will expand the level of configuration possible for each column in the Columns tab.

The following column features are currently available:

  • Editor – Makes cells editable
  • ColumnHider – Adds the ability to hide/show entire columns
  • ColumnReorder – Adds the ability to reorder columns via drag and drop
  • ColumnResizer – Adds the ability to resize columns
  • Selector – Allows for dedicating entire columns to render controls for providing alternate row selection methods to a grid

If you haven’t already used dgrid, this is a great way to explore these features and familiarize yourself with its capabilities.

Preview/Code Tabs

The Preview tab displays a grid with example data based on the configuration settings in the left panel. There is also a Code tab with the generated code to produce the grid seen in the Preview tab. Both tabs update automatically as you make changes to the configuration.

code tab

Using the Output in Your Application

Now let’s take a look at how to use the output from the Code tab within your application. First, we recommend a simple directory structure for your project as follows: 

grid.html
dojo/
dijit/
dstore/
dgrid/
put-selector/
xstyle/

Next, let’s inspect grid.html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="dijit/themes/claro/claro.css">
        <link rel="stylesheet" href="dgrid/css/dgrid.css">
        <link rel="stylesheet" href="dgrid/css/skins/claro.css">
    </head>

    <body class="claro">
        <div id="grid"></div>

        <script src="dojo/dojo.js" data-dojo-config="async: true"></script>

        <script>
            // paste the generated dgrid code here
        </script>
    </body>
</html>

Simply paste the output from the Code tab into the script tag at the bottom of grid.html and you will see the same grid as in the preview tab of the dgrid Laboratory. A great next step to exploring is making your own modifications to grid.html and seeing how you can use the generated base configuration with your own real application data.

Conclusion

dgrid is a powerful grid component and the dgrid Laboratory is a great way to both learn about dgrid as well as set up base configurations for your own apps. If you’re interested in how the dgrid Laboratory was constructed, developer-oriented documentation is available in its README. For more information on dgrid, visit dgrid.io or read the documentation.

If you’re not sure where to start with dgrid, SitePen can help! You can start by attending our Dojo 201 workshop. If you need assistance building your own custom grids or dgrid extensions, contact us for a free 30-minute consultation to discuss how we can help.