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

Overview of Telerik UI for ASP.NET Core Productivity Tools

The Progress® Telerik® UI for ASP.NET Core Productivity Tools within Visual Studio Code increase developer productivity and simplify the process of creating ASP.NET Core projects with Telerik UI components.

To use Telerik and Kendo UI components and tools without disruption, you need to apply a valid license key file (LKF) to both new and existing projects. License key files ensure that your applications remain fully supported, secure, and up to date with the latest product versions.

The Telerik UI for ASP.NET Core extension can automatically download and manage your license key. Simply log in to your Telerik or Kendo UI account within Visual Studio to enable this feature. Alternatively, you can manually download and apply a license key file.

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 Project—Lets you develop your Telerik UI for ASP.NET Core application from scratch.
  • Standard—Includes three examples pages with integrated Panel Bar, Card and TabStrip components.
  • Grid and Menu—Contains Grid, Menu and Buttons as a base for your ASP.NET Core application.
  • Grid Razor Pages—Includes Grid with enabled CRUD (create-read-update-delete) operations.
  • Dashboard—Lets you quickly develop dashboards and dashboard-like applications using the built-in TileLayout component.
  • Admin—Lets you jump quickly into the action of a complete app developed using Telerik UI for ASP.NET Core.
• Scaffolder—The scaffolder allows you to quickly scaffold data-bound components such as Data Grid, Chart, Form, ListView and Scheduler.
• Code Snippets—The pack contains a collection of Telerik UI for ASPN.NET Core code snippets for fast UI component reference and configuration.
• 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 ASP.NET Core Project Templates

The Telerik UI for ASP.NET Core Template Wizard lets you create new projects that are pre-configured for Telerik UI for ASP.NET Core 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 ASP.NET Core Template Wizard: Launch and press Enter.
3. Select your preferred configuration options and click Create Project.

To run the application, open the solution file with Visual Studio and build the application. After the NuGet packages are 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, open the Terminal in your project folder and run dotnet run.

For more information, see this documentation page.

Telerik UI for ASP.NET Core Scaffolder

Scaffolders ease the process of generating and integrating new Telerik UI for ASP.NET Core components in existing projects. The tool enables you to create complex Telerik UI for ASP.NET Core 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 ASP.NET Core components for the first time and experiment with their features.

The Telerik UI for ASP.NET Core Scaffolder creates new pages in your ASP.NET Core apps with the most used data-bound Telerik UI components:

• Data Grid
• Scheduler
• Chart, ListView
• 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 Telerik UI for ASP.NET Core 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 an ASP.NET Core .csproj file and select New Telerik UI for ASP.NET Core 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 ASP.NET Core Code Snippets

The Telerik UI for ASP.NET Core Productivity Tools provide code snippets to simplify and accelerate the implementation of Telerik UI for ASP.NET Core 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. The snippets are available for both flavors of the UI components for ASP.NET Core HTML and TAG Helpers.

The Telerik UI for ASP.NET Core 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.

1. In the source code in the IDE, type tc (short for Telerik ASP.NET Core) 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 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

For more information, see this documentation page.

Telerik UI for ASP.NET Core Sharing to REPL

The Telerik UI for ASP.NET Core Productivity Tools also provide integration with Telerik REPL for ASP.NET Core—a browser-based playground for creating, saving, running and sharing of ASP.NET Core 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 .cshtml file or an aspnetcorerazor 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 ASP.NET Core.

Share Using the Code Editor Command Palette

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

Share Using the File Explorer Context Menu

1. In the Explorer, right-click a .cshtml file.
2. Select Share to Telerik REPL for ASP.NET Core.

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 ASP.NET Core: Add Document Processing Libraries.

Document Processing Libraries via the Code Editor Command Palette

1. Open a .cshtml file or an aspnetcorerazor 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 ASP.NET Core: 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 ASP.NET Core Components
• Download Free Telerik UI for ASP.NET Core Trial
• Telerik UI for ASP.NET Core Documentation
• Telerik UI for ASP.NET Core Online Demos
• Telerik UI for ASP.NET Core Release History
• Telerik UI for ASP.NET Core Pricing and Upsell Options
• Telerik UI for ASP.NET Core Community Forums
• Suggest a Telerik UI for ASP.NET Core Feature
• Contact the Telerik UI for ASP.NET Core 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.