Telerik UI for Blazor Productivity Tools for Visual Studio Code

Overview

The 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:

• Project Templates (Blank and Admin Dashboard) – provide prebuilt layout and multiple configuration options for project type, target framework, theme/ swatch selection and more.
• Page Templates with included Telerik components - feature-rich Data Grid, Chart and Form Input controls such as TextBox, DropDownList or Date Picker
• Telerik UI for Blazor Scaffolder – allows you to quickly scaffold data-bound components such Data Grid, ListView, Gantt, Scheduler, Drawer, DropDownList and more.
• A pack of 80+ Telerik UI for Blazor Code Snippets – can be easily invoked via shortcut or directly typing the component name.
• Convert command - suitable for cases when you need to add Telerik UI for Blazor components to an existing Blazor application with minimal effort.
• Share to REPL feature - export your code snippet and share the generated URL to social media, community forums or with a team member.

Telerik UI for Blazor Scaffolder

The 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 New Telerik UI for Blazor Project Item....

Then select the component you wish to add from the scaffolding wizard.

Project Templates with Telerik UI for Blazor Components

You can create a Telerik Blazor project by accessing the project template feature from the Visual Studio Code Extensions menu. To open the menu, use Ctrl+Shift+P in Windows/Linux or Cmd+Shift+P on Mac. Next in the menu, look for and select Telerik UI for Blazor Template Wizard: Launch and press Enter.

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 Snippets

The 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 tb (short for Telerik Blazor) or directly the name of the component you need to plug. For example, typing grid, or just gr will conveniently show a dropdown with the available snippet templates you can insert in code. Then using a Tab sequence you can fill out the component properties.

To make the most out of snippets:

• Learn more about snippets in VS Code.
• Check out the Snippets Viewer extension.

Telerik UI for Blazor Snippets Catalog

• tb-autocomplete: AutoComplete
• tb-autocomplete-filterable: AutoComplete with Filtering
• tb-barcode: Barcode
• tb-breadcrumb: Breadcrumb
• tb-button: Button
• tb-button-settings: Button with settings
• tb-calendar: Calendar
• tb-carousel: Carousel
• tb-checkbox: CheckBox
• tb-checkbox-tristate: CheckBox TriState
• tb-chunkprogressbar: ChunkProgressBar
• tb-colorgradient: ColorGradient
• tb-colorpalette: ColorPalette
• tb-colorpicker: ColorPicker
• tb-combobox: ComboBox
• tb-combobox-filterable: ComboBox with Filtering
• tb-contextmenu: ContextMenu
• tb-dateintput: DateInput
• tb-datepicker: DatePicker
• tb-daterangepicker: DateRangePicker
• tb-datetimepicker: DateTimePicker
• tb-dialog : Dialog
• tb-drawer : Drawer
• tb-dropdownlist: DropDownList
• tb-dropdownlist-filterable: DropDownList with Filtering
• tb-editor: Editor
• tb-filemanager: FileManager
• tb-fileselect: FileSelect
• tb-filter : Filter
• tb-flatcolorpicker: FlatColorPicker
• tb-form: Form
• tb-gantt: Gantt
• tb-gantt-editable: Gantt with Editing
• tb-ganttcolumn: Gantt Bound Column
• tb-grid: Grid
• tb-grid-editable: Grid with Editing
• tb-gridcolumn: Grid Bound Column
• tb-gridcolumn-locked: Grid Locked Column
• tb-gridlayout: GridLayout
• tb-listview: ListView
• tb-listview-editable: ListView with Editing
• tb-loader: Loader
• tb-loadercontainer: LoaderContainer
• tb-maskedtextbox: MaskedTextBox
• tb-menu: Menu
• tb-multicolumncombobox: MultiColumnComboBox
• tb-multiselect: MutiSelect
• tb-multiselect-filterable: MutiSelect with Filtering
• tb-numerictextbox: NumericTextBox
• tb-pager: Pager
• tb-panelbar: PanelBar
• tb-pdfviewer: PdfViewer
• tb-progressbar: ProgressBar
• tb-qrcode: QRCode
• tb-radiogroup: RadioGroup
• tb-rangeslider: RangeSlider
• tb-scheduler: Scheduler
• tb-scheduler-editable: Scheduler with Editing
• tb-signature: Signature
• tb-skeleton: Skeleton
• tb-slider: Slider
• tb-splitter: Splitter
• tb-stacklayout: StackLayout
• tb-stepper: Stepper
• tb-switch: Switch
• tb-tabstrip: TabStrip
• tb-textarea: TextArea
• tb-textbox: TextBox
• tb-tilelayout: TileLayout
• tb-timepicker: TimePicker
• tb-togglebutton: ToggleButton
• tb-tooltip: Tooltip
• tb-treelist: TreeList
• tb-treeList-editable: TreeList with Editing
• tb-treelistcolumn: TreeList Bound Column
• tb-treelistcolumn-locked: TreeList Locked Column
• tb-treeview: TreeView
• tb-upload: Upload
• tb-window: Window
• tb-wizard: Wizard

Convert Command

Instead 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 Blazor

The 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 Menu

To share your code using Share to Telerik REPL for Blazor from the code editor's context menu:

• Open a .razor file or a Razor language in the code editor.
• Select code to share:
  • To send the whole file - clear the selection.
  • To send a part of the file - select the code.
• Right-click over the code editor.
• In the context menu click Share to Telerik REPL for Blazor.

Share Using the Code Editor Command Palette

To share your code with Share to Telerik REPL for Blazor from the command palette:

• Open a .razor file or a Razor language in the code editor.
• Select code to share:
  • To send the whole file - clear the selection.
  • To send a part of the file - select the code.
• Open the Command Palette (Ctrl+Shift+P in Windows/Linux or Cmd+Shift+P on Mac) and type Share to Telerik REPL for Blazor.

Share Using the File Explorer Context Menu

To use Share to Telerik REPL for Blazor from the VS Code's file explorer's context menu:

• Right-click a .razor file in the files tree.
• Select the Share to Telerik REPL for Blazor.

Please note, that multiple selection is not supported. Only the file you have right-clicked on is sent.

Help Resources

a. Learn More about Telerik UI for Blazor Components
b. Download Free Trial
c. Documentation
d. Online Demos
e. Release History
f. Pricing and upsell options
g. Community Forums
h. Suggest a Feature