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.

Nov 6

Death of Object.observe()

By on November 6, 2015 9:47 am


Adam Klien, software engineer at Google, announced on ESDiscuss that they were withdrawing the proposal to implement Object.observe and plan to remove it from V8 by the end of the year.

While I was never sold on the approach of this API, I assumed long ago it was the API that would be used for data binding to plain old JavaScript objects. I am also surprised because I was discussing the state of Web Components with a member of TC39 just a few weeks ago. While I listed all the parts of Web Components that are in V8/Blink but not elsewhere, including Object.observe, they assured me the other browsers would eventually implement the rest of Web Components. I also missed that Polymer 1.0 abandoned Object.observe.

Oct 27

October jQuery Foundation board meeting

By on October 27, 2015 7:56 am

In mid-October, I attended my first jQuery Foundation boarding meeting. In case you missed the news, we announced in early September that the Dojo Foundation and jQuery Foundation are merging. The primary goal of this open source foundation union is to encourage greater collaboration between open source web projects, and also provide a home for other open source JavaScript and web projects. Our board of eleven members got together in New York City and met for about eight hours to cover a number of topics. It was great to meet a number of people from the board in person for the first time. It was also great to reaffirm how much we have in common, and to learn more about how we can help!

Sep 30

SitePen JavaScript Support in Action

By on September 30, 2015 1:20 pm

SitePen’s team of JavaScript experts provide high quality development and production support to a wide range of companies, from the Fortune 500 to small startups.

Recently, we had the opportunity to assist BuyWinR, a company based in Brisbane, Australia. In this case, we went from initial inquiry to solution in less than 48 hours. To provide insight into how a typical support issue might be solved, the founder of BuyWinR has allowed us to share this story.

Sep 8

Recent TypeScript talks

By on September 8, 2015 11:04 am


SitePen is a huge supporter of TypeScript. It allows our developers to write using modern standards support for ES6 and some ES7 features while still targeting ES5 browsers. It also includes a type system that adds to our code’s integrity and makes it easier to write good software.

As noted in the Dojo 2 vision, we have chosen TypeScript as our approach to building tools we rely on for a next-generation JavaScript and TypeScript stack. With the emergence of ES6 (a.k.a. ES2015), as developers we’re currently in a state where the language and environments (browsers, servers, desktop apps, mobile apps, IoT devices, etc.) are greatly improved, but in a backwards-incompatible manner. In the short term, this means that to leverage new features of the platform, we need a tool to transpile to things that work in browsers today.

Jul 28

Simple Model-View synchronization with dstore and Dijit

By on July 28, 2015 7:14 am


Nearly every sufficiently large web application looks for a mechanism to efficiently synchronize or bind data between the Model and the View. There are many large scale application frameworks and approaches focused on this, whether the binding is one-directional like React, or follows other approaches such as those seen with AmpersandJS, Angular, Aurelia, Backbone, Ember, Knockout, Mayhem, or many others listed on ToDoMVC.

Simple Model-View synchronization

Many of our customers use Dojo and Dijit, because it’s a comprehensive toolkit for building web applications that work today, and while it does not intend to be an MV* framework, it already includes a lightweight approach to getters and setters.

Jun 19

Dojo + Koa

By on June 19, 2015 7:03 am

Dojo and its AMD loader provide outstanding tools for structuring a Web application on the client-side. However, the notion of “writing a JavaScript application” has widened in definition over the past few years with the increased popularity of Node.js. Though Dojo can be used in a Node.js environment with the AMD module pattern, other key frameworks have gained prominence in the server-side JavaScript space, including Express, Flatiron, Sails.js and the Dojo Foundation’s very own Persevere. These frameworks give structure and handle common tasks such as routing, template rendering, and content negotiation. Still, since most operations on a Node.js server are asynchronous, server-side JavaScript can be a complex, treacherous mess of callbacks. Enter Koa, a Node.js framework that attempts to save us from this callback hell by using ECMAScript 2015 Generators. Using Dojo on the client-side and Koa on the server-side makes for a robust, clean, and expressive application. In this post, we’ll explain what generators are and how to use Koa with Dojo for ultimate code cleanliness.

Jun 10

Dojo FAQ: How can I sequence asynchronous operations?

By on June 10, 2015 8:01 pm

Dojo’s Deferred module provides a convenient way of managing asynchronous operations. If you’re new to deferreds, you can get a good introduction by reading our blog post and some tutorials on Getting started with Deferreds and Dojo Deferreds and Promises.

There are a few features of the then method on a promise that are important to understand and remember:

  • then always returns a promise
  • the promise returned by then resolves to:
  • the value returned by the callback passed to then
  • OR

  • if the callback returns a promise, the value that promise resolves to
Jun 1

Multi-Platform Distribution with TypeScript

By on June 1, 2015 10:47 am

Over the past several years, JavaScript has grown to be relevant not only for rich browser applications, but also for server and console applications. Many types of JavaScript libraries can be useful on both ends of this spectrum. Dojo 2 is no exception, and one of our goals is therefore to make it as easily distributable and consumable across environments as possible.

Module Compilation in TypeScript Today

TypeScript can already help toward this goal by compiling to both the AMD and CommonJS module formats. For example, given the following simple TypeScript module:

export function myFunction() {
    // ...
May 1

SitePen Podcast – Ep. 1 The Pilot

By on May 1, 2015 2:07 pm
SitePen Podcast

At SitePen, we’ve always thought it would be fun to do a podcast, we just didn’t know what to talk about. My idea of doing a show about Fantasy Football was universally panned as were topics such as speedrunning SNES games, Birding and ‘just talk about the weather’. Finally the idea came to us, we should talk about JavaScript!

It turns out, we are all very passionate about this topic and quickly agreed! So we gave it a shot and created a podcast. Is the name the result of too many brainstorming by committee meetings? Marketing gone wrong? Or did we simply mess up the name and decide to keep it? Listen to the podcast and find out!

Let us know what you think

This episode is a pilot which means that we need to show the big studio execs that people are interested. At least I think that’s how pilots work in podcasting. I actually don’t know. Either way, let us know if you’re interested in hearing more!

JavaScript Workshops