Telerik UI for Blazor Productivity ToolsProgress® Telerik® UI for Blazor Productivity Tools is a Visual Studio Code extension which includes multiple developer productivity features for scaffolding, code generation, configuration, reference, usage and sharing of code snippets of Telerik UI for Blazor components. Installation Launch VS Code Quick Open ( Ctrl+P), paste the following command, and press enter.Copied to clipboard |
Telerik UI for Blazor Productivity Tools for Visual Studio Code
OverviewThe Progress® Telerik® UI for Blazor Productivity Tools within Visual Studio Code increase developer productivity and simplifies the process of creating Blazor projects with Telerik UI components. The tools can be installed as an extension and launched on Windows, Linux and Mac and include:
Telerik UI for Blazor ScaffolderThe scaffolding feature within the productivity tools creates new pages in your Blazor apps with the most used data-bound Telerik Blazor components: Data Grid, TreeList, Scheduler, Chart, ListView, Gantt, Form, Drawer, Menu, DropDownList, Upload, ComboBox and more. When adding a new project item, the scaffolder will prompt you to input the service and model names and will allow you to configure multiple component-specific properties. For example, if you scaffold a new page with Telerik Blazor Data Grid, you will be able to set its sorting, filtering, grouping, column resizing and more features. To start the scaffolder, from the file explorer, use the context menu for a Blazor .csproj file (if you are using an ASP.NET hosted WASM app, rightclick on the client .csproj), and select
Then select the component you wish to add from the scaffolding wizard.
Project Templates with Telerik UI for Blazor ComponentsYou can create a Telerik Blazor project by accessing the project template feature from the Visual Studio Code Extensions menu. To open the menu, use Choose whether to start from a Blank project or use the Admin Dashboard Template, select a Project Name and the Output Path. Next, pick the type of project (Blazor WebAssembly or Server project), the target framework, and the type of license you are using – trial or paid. For easy getting started journey you also have the option to pick a page template – Grid, Chart, Form inputs, Chart and more. Style your project at its creation, choosing from Default, Bootstrap or Material themes and select your preferred swatches with different color variations.
To run the application, you need to open the Terminal on your project and find the Server folder. Note that if you chose a Server type of project, the folder will hold the name of your project. If your project is WebAssembly, the folder you will be looking for is called Server folder. Execute the dotnet run command and you will have your Blazor project up and running. Please review our documentation page for more information. Telerik UI for Blazor Code SnippetsThe Telerik Visual Studio Code extension provides a handy feature for increased developer productivity – code snippets for fast UI component reference and configuration. You can take advantage of the tens of code snippets that can be easily invoked in the IDE by typing a shortcut
To make the most out of snippets: Telerik UI for Blazor Snippets Catalog
Convert CommandInstead of manually adding the NuGet package, static assets and other references, you can take advantage of a simple convert command provided by the extension. It will create on your behalf all the necessary references to your Blazor project and you can immediately start using Telerik UI for Blazor components within it. For more details on how to use the convert command see the dedicated article in the product documentation. Telerik REPL for BlazorThe productivity tools also provides integration with Telerik REPL for Blazor which is a browser-based playground for creating, saving, running and sharing of Blazor code snippets. Using the Share to Telerik REPL for Blazor option from the code editor context menu, you can easily export your code snippet while coding in your favorite IDE and share the generated URL to social media, community forums or send it to a team mate. Share Using the Code Editor Context MenuTo share your code using Share to Telerik REPL for Blazor from the code editor's context menu:
Share Using the Code Editor Command PaletteTo share your code with Share to Telerik REPL for Blazor from the command palette:
Share Using the File Explorer Context MenuTo use Share to Telerik REPL for Blazor from the VS Code's file explorer's context menu:
Help Resourcesa. Learn More about Telerik UI for Blazor Components |
