Nov 16

Exploring dgrid with dgrid Laboratory

By on November 16, 2015 11:37 am

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:


Next, let’s inspect grid.html:

<!DOCTYPE html>
        <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">

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

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

            // paste the generated dgrid code here

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.


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 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.

Jul 7

JavaScript Support in action: Using dgrid and dstore with the Django REST Framework

By on July 7, 2015 8:23 am

Throughout the course of June, the dgrid StackOverflow tag saw a series of questions regarding usage of dgrid and dstore with the Django REST Framework. Based on the flurry of closely-related questions that popped up, I became quite curious as to the actual level of difficulty involved with this integration.

Over the holiday weekend here in the US, I decided to let that curiosity get the better of me. In this blog post, I share the results of that endeavor, stepping through the process of customizing a simple Django Rest Framework project to communicate with dgrid using dstore’s Rest store.

Apr 17

dstore 1.1 released

By on April 17, 2015 12:21 pm


We have released dstore version 1.1, which features a new set of stores for local DB storage. This feature provides the ability to store data locally in browsers, and use high-performance querying capabilities through the disparate technologies of IndexedDB and WebSQL (and localStorage), through the consistent dstore interface. Complex queries can be formulated in your application, and data can retrieved from local database storage with the same APIs and query format as is currently supported with other stores. Queries can then be automatically translated to SQL or cursor operations, depending on the underlying technology available.

Apr 14

Minimizing Dijit Instances in dgrid

By on April 14, 2015 11:22 am


Dijit and dgrid provide a powerful set of user interface components, allowing for fast construction of sophisticated web applications with excellent performance and interactivity. However, one particular configuration of dgrid that can impact memory and performance: heavy use of persistent Dijit editors within grid cells. The dgrid’s Editor plugin makes it very easy to leverage various Dijits for editing cells. However, using the default “always-on” mode, where a Dijit is instantiated for every editable cell, in combination with a several columns with numerous rows can quickly consume a lot of memory and create a noticeable drag on your application’s performance.

Dijit editors can help provide some fantastic functionality, with powerful widgets for auto-completion, date input, and validation. In this post, we’ll review two approaches to achieving advanced data input in dgrids that are designed for heavy data manipulation without compromising performance or memory consumption.

Mar 26

Dojo FAQ: How do I upload a CSV file, then access that data in my application?

By on March 26, 2015 12:24 pm


While a more recent advancement allows us use the HTML5 file API to retrieve contents from files, this approach is not universally supported in web browsers as yet. Instead, we will access data from user-uploaded CSV files using the following steps:

  • Upload a file to the server
  • Retrieve the file from the server
  • Load the data into an easy-to-use format
Nov 17

Introducing dstore

By on November 17, 2014 1:24 pm

dstore 1.0

Dojo has long distinguished itself with a robust and complete application architecture. And the foundation of this architecture has been the store interface, providing clean separation and consistent interface between presentation and data sources. We are committed to continuing to improve this architecture, and in this pursuit, we now releasing dstore, a next generation object store interface and set of data modeling components.

dstore is an exciting new package that provides a number of significant improvements over the prior data store framework, including a more fluent querying API, improved event notification, advanced cross-store filtering, and a more modular mixin system that allows us to easily combine components with alternate format support, advanced querying support, and more. In this post, we want take a brief look at these new features and improvements. From there, you can explore the tutorials and documentation that we have written for this new package.

Aug 25

dgrid 0.3.16 is born!

By on August 25, 2014 1:40 pm

dgrid 0.3.16 has been released!  It includes the following improvements:

  • Various improvements to keyboard accessibility, including interoperation with the ColumnSet mixin and editor column plugin
  • Additional ARIA attributes for improved accessibility in the ColumnHider and Pagination extensions
  • Improvements to logic for drag-and-drop operations with DnD extension

More information on dgrid 0.3.16 is available in the release notes.

We are working hard on our next release, dgrid 0.4!

Jul 9

FAQ: How can I create a JSONP service-based store?

By on July 9, 2014 11:16 am


Dojo’s store API is a common interface for providing data to user interface widgets, such as dgrid, Dijit Select, and Dojo Charting. The beauty of having a consistent API is that once you’ve defined an interface for a data source, that data becomes easily available to all widgets that support the store API. We’re going to look at how you can create a basic, read-only dojo/store API-compliant module for accessing GitHub’s API (specifically, GitHub issues), an example of implementing your own Dojo store.

May 8

Dojo FAQ: How does selection work with dgrid?

By on May 8, 2014 12:00 pm


dgrid’s Selection mixin

dgrid is SitePen’s lightweight, modular, and easily extensible modern grid component, designed for use with AMD and Dojo. The Selection and CellSelection mixins enable selection of rows or cells, both from mouse or keyboard actions and programmatically. Adding selection functionality to a grid is a simple as mixing in the desired module:

Apr 29

Looking Ahead to dgrid 0.4

By on April 29, 2014 10:22 am

dgrid, SitePen’s next-generation Dojo data grid, has been serving many users’ needs for over two years. Over that time, we have been steadily adding extensions, making improvements, and addressing issues. However, the process of reporting and fixing defects becomes an endless cycle — one we’ve arguably already been stuck in long enough — and it’s time to set our sights higher for the long run.

JavaScript Workshops