Telerik UI for ASP.NET Core Productivity Tools for Visual Studio Code

Overview

The Progress® Telerik® UI for ASP.NET Core Productivity Tools within Visual Studio Code increase developer productivity and simplifies the process of creating ASP.NET Core 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.
• ASP.NET Core 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 ASP.NET Core Scaffolder – allows you to quickly scaffold data-bound components such Data Grid, Chart, Form, ListView and Scheduler.
• Telerik UI for ASP.NET Core Code Snippets – can be easily invoked via shortcut or directly typing the component name.
• Share to Telerik Core REPL feature - export your code snippet and share the generated URL to social media, community forums or with a team member.

Telerik UI for ASP.NET Core Scaffolder

The scaffolding feature within the productivity tools creates new pages in your ASP.NET Core apps with the most used data-bound Telerik UI components: Data Grid, Scheduler, Chart, ListView and Form. 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 UI for ASP.NET Core 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 an ASP.NET Core .csproj file, and select New Telerik UI for ASP.NET Core Project Item....

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

Project Templates with UI for ASP.NET Core Components

You can start developing a new Telerik ASP.NET Core project by using the available project templates within the Visual Studio Code Extensions menu. Use Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on Mac to open the menu and search for Telerik UI for ASP.NET Core Template Wizard: Launch. By pressing Enter, you will access the functionality which will take you through the steps of creating a new project. Firstly, you will need to choose whether to start from a Blank project or use the Admin Dashboard Template as a base. You can easily jump-start a project using the pre-built layout and functionality of the Admin Dashboard project template—rearrange the layout to match your needs, and just plug in your data and link it to the components.

Moving forward, you will need to set up a Project Name and Output Path for your application and then choose Trial or Paid for the type of license you are using. For a faster development, you will have the option to include ready-to-use sample pages with Telerik UI for ASP.NET Core components choosing from Dashboard, Chart, Form input and Grid. Finally, you can add styling to your application by selecting one of the Telerik UI for ASP.NET Core Themes (Default, Bootstrap or Material) and picking from a variety of swatches that come with each theme.

To run the application:

• Open the solution file with Visual Studio and build the application. Once the NuGet packages get restored and the build passes, you will have your ASP.NET Core project up and running.

OR if you have configured the private Telerik Nuget Feed:

• Navigate to the project folder
• Open a terminal
• execute dotnet run

Please review our documentation page for more information.

Telerik UI for ASP.NET Core 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 tc (short for Telerik ASP.NET Core) 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 component properties, options, model, and controller actions. The snippets are available for both flavors of the UI components for ASP.NET Core HTML and TAG Helpers.

The code snippets are available for the 30+ most used Telerik components such as Data Grid, Autocomplete, Editor, Dialog, DropDownList, and more. As these resources will grow throughout 2022, please make sure to check the complete reference at the VS Code integration UI for ASP.NET Core documentation.

To make the most out of snippets:

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

Telerik UI for ASP.NET Core Snippets Catalog

HTML Snippets

• tc-autocomplete-html: AutoComplete
• tc-checkbox-html: CheckBox
• tc-checkboxgroup-html: CheckBoxGroup
• tc-colorpicker-html: ColorPicker
• tc-combobox-html: ComboBox
• tc-dateinput-html: DateInput
• tc-datepicker-html: DatePicker
• tc-daterangepicker-html: DateRangePicker
• tc-datetimepicker-html: DateTimePicker
• tc-dropdownlist-html: DropDownList
• tc-dropdowntree-html: DropDownTree
• tc-editor-html: Editor
• tc-maskedtextbox-html: MaskedTextBox
• tc-multicolumncombobox-html: MultiColumnComboBox
• tc-multiselect-html: MultiSelect
• tc-numerictextbox-html: NumericTextBox
• tc-rating-html: Rating
• tc-radiobutton-html: RadioButton
• tc-radiogroup-html: RadioGroup
• tc-switch-html: Switch
• tc-textarea-html: TextArea
• tc-textbox-html: TextBox
• tc-timepicker-html: TimePicker
• tc-upload-html: Upload
• tc-button-html: Button
• tc-window-html: Window
• tc-dialog-html: Dialog
• tc-form-html: Form
• tc-formitem-html: FormItem
• tc-grid-html: Grid
• tc-gridcolumn-html: Bound Grid Column
• tc-gridcolumn-sticky-html: Sticky Grid Column
• tc-gridcolumn-frozen-html: Frozen Grid Column

Tag Helper Snippets

• tc-autocomplete-tag: AutoComplete
• tc-checkbox-tag: CheckBox
• tc-checkboxgroup-tag: CheckBoxGroup
• tc-colorpicker-tag: ColorPicker
• tc-combobox-tag: ComboBox
• tc-dateinput-tag: DateInput
• tc-datepicker-tag: DatePicker
• tc-daterangepicker-tag: DateRangePicker
• tc-datetimepicker-tag: DateTimePicker
• tc-dropdownlist-tag: DropDownList
• tc-dropdowntree-tag: DropDownTree
• tc-editor-tag: Editor
• tc-maskedtextbox-tag: MaskedTextBox
• tc-multicolumncombobox-tag: MultiColumnComboBox
• tc-multiselect-tag: MultiSelect
• tc-numerictextbox-tag: NumericTextBox
• tc-rating-tag: Rating
• tc-radiobutton-tag: RadioButton
• tc-radiogroup-tag: RadioGroup
• tc-switch-tag: Switch
• tc-textarea-tag: TextArea
• tc-textbox-tag: TextBox
• tc-timepicker-tag: TimePicker
• tc-upload-tag: Upload
• tc-button-tag: Button
• tc-window-tag: Window
• tc-dialog-tag: Dialog
• tc-form-tag: Form
• tc-formitem-tag: FormItem
• tc-grid-tag: Grid
• tc-gridcolumn-tag: Bound Grid Column
• tc-gridcolumn-sticky-tag: Sticky Grid Column
• tc-gridcolumn-frozen-tag: Frozen Grid Column

Telerik REPL for ASP.NET Core

The Telerik UI for ASP.NET Core Productivity Tools also provide integration with Telerik REPL for ASP.NET Core which is a browser-based playground for creating, saving, running and sharing of ASP.NET Core code snippets.

Using the Share to Telerik REPL for ASP.NET Core 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 ASP.NET Core from the code editor's context menu:

• Open a .cshtml file or a aspnetcorerazor 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 ASP.NET Core.

Share Using the Code Editor Command Palette

To share your code with Share to Telerik REPL for ASP.NET Core from the command palette:

• Open a .cshtml file or a aspnetcorerazor 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) and type Share to Telerik REPL for ASP.NET Core.

Share Using the File Explorer Context Menu

To use Share to Telerik REPL for ASP.NET Core from the VS Code's file explorer's context menu:

• Right-click a .cshtml file in the files tree.
• Select the Share to Telerik REPL for ASP.NET Core.

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 ASP.NET Core 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