Syncfusion Blazor Grid Stencil

Syncfusion has been providing UI components since 2001 and can be counted amongst the top component publishers like DevExpress, Telerik, Infragistics, etc. So it is no surprise to see them push out Blazor components to complement this new Microsoft Technology.

CodeStencil now has a stencil to help Syncfusion developers generate all the necessary code to kick off a Blazor project - The Syncfusion Blazor Grid Stencil.

This stencil will generate models, razor pages, services, controllers, etc. The good thing is that you have full control and configuration on how the code is generated, so you do not end up with a lot of redundant code you have to start deleting.

So, let's see how this is done.

If you do not have CodeStencil installed, you can download and install a free/trial copy from Downloads.

When CodeStencil loads the first time after installation, you may get an "Options" windows prompting you to add default values. You can safely cancel/close this window without updating the default values.

By default, CodeStencil has the Quick Start Wizard loaded at startup. Once this dialog is loaded, clicking NEXT will take you to the  "Add Project Name, Select Stencil" page. This shows some stencils downloaded and listed by default.

Unfortunately, you will not see the Syncfusion Blazor Grid listed because it is not downloaded by default. This is by design;  there is no point downloading 3rd party stencils unless you have a license for the corresponding product. This way your stencil repository will not be cluttered with stencils belonging to products you do not use. So, proceed and Close/Cancel the Quick Startup wizard.

Note: In order to use this stencil you need to have a valid /trial license of the Syncfusion Blazor Components Library

Now we proceed...

Step 1: Download the Syncfusion Blazor Grid Stencil.

From Stencils | Manage Stencils:

You will see the "Manage Stencils" dialog pop-up. Under the list of "Online" stencils, select the Syncfusion category, under 3rd Party. Click Install.

Once installed you will notice that the local stencil repository now has the Syncfusion with an additional entry.

Step 2: Create a new project

Accept the default name = "Project1"

Click on the stencil icon to select the Syncfusion stencil

The "Select Stencil" dialog opens. Follow the numbered steps:

1 - Select the Syncfusion category

2 - Select the "SyncfusionGrid" stencil

3 - Click the "Select" button

After the stencil has been selected we return to the New Project form. Note the following:

A - The "SyncfusionGrid.codestencil" stencil has been selected.

B - Note the output folder for the generated code. This can be changed at any time.

Step 3: Code Generation

Click on the Generate button:

Once the code is generated you will be prompted to navigate to the output folder. Click "Yes" to navigate.

After the Windows explorer dialog opens, open the "Project1.sln" solution with Visual Studio.

Run the application. You will see the generated Blazor application with all the tables from the Chinook Database

So what is the big deal here?

You may be thinking, what is the big deal, this is just another code generator and now you will have to start deleting redundant code you do not need. Consider the following:

1. CRUD Features: Your grid is automatically enhanced with CRUD capabilities without you writing any line of code. The stencil will pick the tables you selected before code generation and build the models, services, and razor pages to support this.

   

2. Grid Features: The popular and powerful grid features of the Syncfusion Blazor Grid can be configured and made available to the generated code. This is quite simple to achieve. It only requires TRUE/FALSE switches.

   

3. Time Saver: This entire application was generated in just about 27 seconds.

   

   Think about how long it would have taken to code the razor pages, controllers, services, etc. by hand.  

Conclusion

More grid options will be added to this stencil and there are plans underway to build stencils for other Syncfusion grids targeting Vue, Angular, etc.