DevExtreme Grid Stencil

The DevExtreme Grid Stencil is based on the Developer Express DevExtreme HTML5 JavaScript Data Grid.

Please review Developer Express Licensing before you use the generated code commercially. 

You can download the DevExtreme Grid Stencil here:


Generating The Grid App

To create an application using this stencil:

Step 1Create a New Project. Make sure you select "devex-grid.codestencil" as the stencil to use.

If you cannot see the devex-grid.codestencil stencil in the droplist: 


 Continue with the instructions here (using the devex-grid stencil) to download and register the stencil.


Step 2: Extract the sample database - Chinook Database

dev grid05

If the node is disabled:

dev grid01

Enable It:

dev grid02

Extract the database:

dev grid03

Disable the database after extraction so that it is not extracted again during the code generation process.

Locate where the database was extracted to (right-click on App_Data, Select "Locate File/Folder") :

dev grid06


dev grid07


Step 3Import Schema

Step 4: Create a Calculated Column. Set the Lookup display column to the Calculated Column

dev grid13

dev grid14


Step 5: Create a Lookup to be displayed when an update form is opened.


Step 6: Set Controller Options 

dev grid04

Set the node to be disabled after it has been executed the first time:   

dev grid08


Step 7: Start code generation:

dev grid09

 Once it reaches the "Set Controller Options" node, the "Grid Settings" form pops up. Select the "Album" table.

dev grid10

Click OK to continue the code generation.

After the code is generated, you will be prompted to navigate to the output folder.

dev grid15


Step 8:  Load the solution with Visual Studio and run the web app.

dev grid12


Once you get it running you should get a Data Grid:

dev grid


© 2018-2020 CodeStencil - Zera Systems Inc. All Rights Reserved.

No