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 1: Create 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
If the node is disabled:
Enable It:
Extract the database:
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") :
Step 3: Import Schema
Step 4: Create a Calculated Column. Set the Lookup display column to the Calculated Column
Step 5: Create a Lookup to be displayed when an update form is opened.
Step 6: Set Controller Options
Set the node to be disabled after it has been executed the first time:
Step 7: Start code generation:
Once it reaches the "Set Controller Options" node, the "Grid Settings" form pops up. Select the "Album" table.
Click OK to continue the code generation.
After the code is generated, you will be prompted to navigate to the output folder.
Step 8: Load the solution with Visual Studio and run the web app.
Once you get it running you should get a Data Grid:
