Telerik UI for Blazor Productivity Tools for Visual Studio Code

Overview of Telerik UI for Blazor Productivity Tools

The Progress® Telerik® UI for Blazor Productivity Tools within Visual Studio Code increase developer productivity and simplify the process of creating Blazor projects with Telerik UI components. The tools are available as a VS Code extension for Windows, Linux, and Mac, and include:

• Project Templates—The wizard provides the following templates:
  • Blank App—A blank solution based on the Microsoft template with added Telerik UI components.
  • CRUD, Form, Chart—A small app that showcases the Telerik UI Data Grid, Chart, and Forms validation. The Grid also uses a basic CRUD service which is a common pattern for data updates in real applications.
  • Dashboard—A basic dashboard layout that uses the TileLayout component for customizable dashboards and showcases several ways individual blocks (tiles) can fetch data.
  • Admin—A small app that shows an administrative dashboard. The app uses some of the main Telerik UI for Blazor components like the Data Grid, Chart, TileLayout, Form, and more.
• Scaffolder—The scaffolder allows you to quickly scaffold data-bound components such Data Grid, ListView, Gantt, Scheduler, Drawer, DropDownList, and more.
• Code Snippets—The pack contains a collection of 80+ Telerik UI for Blazor code snippets for fast UI component reference and configuration.
• Converter—The converter helps you add Telerik UI for Blazor components to an existing Blazor application with minimal effort.
• Sharing to REPL—The feature lets you export your code snippet and share the generated URL to social media, community forums, or with a team member.
• Document Processing Libraries—The wizard lets you quickly add processing for the most commonly used flow, fixed and spreadsheet document formats to your app.

Telerik UI for Blazor Project Templates

The Telerik UI for Blazor Template Wizard lets you create new projects that are pre-configured for Telerik UI for Blazor components:

1. In VS Code, open the Command Palette menu by pressing Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on Mac.
2. Select Telerik UI for Blazor Template Wizard: Launch and press Enter.
3. Select your preferred configuration options and click Create Project.

To run the application, open the Terminal on your project and find the Server folder. Note that if you selected a Server type of project, the folder will hold the name of your project. If you selected 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.

For more information, see this documentation page.

Telerik UI for Blazor Scaffolder

Scaffolders ease the process of generating and integrating new Telerik UI for Blazor components in existing projects. The tool enables you to create complex Telerik UI for Blazor components with a lot of repetitive configuration (like the Grid, Chart, Inputs, and others), by selecting options from a seamless interactive wizard-like UI. The scaffolder functionality is a great way to get started with the Telerik UI for Blazor components for the first time and experiment with their features.

The Telerik UI for Blazor Scaffolder 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.

1. In VS Code, in the Explorer, right-click a Blazor .csproj file and select New Telerik UI for Blazor Project Item....

2. In the scaffolding wizard, select the component that you want to add, configure its options, and click Create Project.

For more information, see this documentation page.

Telerik UI for Blazor Code Snippets

The Telerik UI for Blazor Productivity Tools provide code snippets to simplify and accelerate the implementation of Telerik UI for Blazor components in your project. They facilitate the development process by providing a quick way for adding the components directly in the source code, while also including predefined tab stops for the required options.

1. In the source code in the IDE, type tb (short for Telerik Blazor) or directly type the name of the component (for example, datagrid or gr).
2. From the dropdown menu, choose the snippet template that you want to use.
3. Press Enter to insert the desired component in the source code.
4. If the component provides placeholders for specific properties, cycle through them and set their values by pressing the Tab key.

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

For more information, see this documentation page.

Telerik UI for Blazor Convert Command

If you want to add Telerik UI for Blazor components to an existing Blazor app, you can use the converter. It adds the NuGet package, static assets, and other references for you, so that you can immediately start using the Telerik UI for Blazor components.

For more information about how to use the convert command, see this documentation page.

Telerik UI for Blazor Sharing to REPL

The Telerik UI for Blazor Productivity Tools provide integration with Telerik REPL for Blazor—a browser-based playground for creating, saving, running and sharing of Blazor code snippets.

You can easily export your code snippet and share the generated URL to social media, community forums or send it to a team mate.

Share Using the Code Editor Context Menu

1. Open a .razor file or a Razor language in the code editor.
2. Select code to share:
   • To send the whole file, clear the selection.
   • To send a part of the file, select the code.
3. Right-click within the code editor and select Share to Telerik REPL for Blazor.

Share Using the Code Editor Command Palette

1. Open a .razor file or a Razor language in the code editor.
2. Select code to share:
   • To send the whole file, clear the selection.
   • To send a part of the file, select the code.
3. Open the Command Pallette menu by pressing Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on Mac.
4. Type Share to Telerik REPL for Blazor.

Share Using the File Explorer Context Menu

1. In the Explorer, right-click a .razor file.
2. Select Share to Telerik REPL for Blazor.

Multiple selection is not supported. Only the file you have right-clicked is sent.

For more information, see this documentation page.

Document Processing Libraries

The Telerik Document Processing Libraries wizard enables you to easily add the required packages when working with the Telerik Document Processing Libraries.

Document Processing Libraries via the File Explorer Context Menu

1. In the Explorer, right-click a file.
2. Select Telerik UI for Blazor: Add Document Processing Libraries.

Document Processing Libraries via the Code Editor Command Palette

1. Open a .razor file or a Razor language in the code editor.
2. Open the Command Pallette menu by pressing Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on Mac.
3. Select Telerik UI for Blazor: Add Document Processing Libraries.

Configuring Your Document Processing Libraries

You can choose which libraries to add to your project. If a library you selected has any dependencies, they are automatically checked.

The following table lists the assemblies that will be selected for each library:

For more information, see this documentation page.

Help Resources

• Telerik UI for Blazor Components
• Download Telerik UI for Blazor Free Trial
• Telerik UI for Blazor Documentation
• Telerik UI for Blazor Online Demos
• Telerik UI for Blazor Release History
• Telerik UI for Blazor Pricing and Upsell Options
• Telerik UI for Blazor Community Forums
• Telerik UI for Blazor Suggest a Feature
• Contact the Telerik UI for Blazor Support

License

This code is distributed under the terms and conditions of the Progress Software Corporation End User License Agreement for Visual Studio Code Extensions.