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: 

stencil-list01

 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

 

About CodeStencil

CodeStencil is Published and Marketed by Zera Systems Inc.





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

No items in cart