Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Telerik UI for ASP.NET Core Productivity ToolsNew to Visual Studio Code? Get it now.
Telerik UI for ASP.NET Core Productivity Tools

Telerik UI for ASP.NET Core Productivity Tools

Telerik

telerik.com
|
24,290 installs
| (12) | Free
Progress® Telerik® UI for ASP.NET Core 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 ASP.NET Core components.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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

Telerik ASP.NET Core Productivity Tools

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. Create new project with Telerik ASP.NET Core Visual Studio Code Template
  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.... Telerik UI for ASP.NET Core Scaffolder Context Menu

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

    Telerik UI for ASP.NET Core Scaffolder

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.

Telerik UI for ASP.NET Core snippets

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 to Telerik REPL for ASP.NET Core, Code Editor, Context Menu

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 to Telerik REPL for ASP.NET Core, Command Palette

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.

Share to Telerik REPL for ASP.NET Core, VS Code File Editor, Context Menu

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.

Configure Document Processing Wizard, Context Menu

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.

Configure Document Processing Wizard, Command Palette

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.

Configure Document Processing Wizard

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

Library Packages
RadPdfProcessing Documents.Core
Documents.Fixed
Zip
Documents.ImageUtils
Documents.Fixed.FormatProviders.Image.Skia
Documents.CMapUtils
RadSpreadProcessing Documents.Core
Documents.Fixed
Documents.Spreadsheet
Documents.SpreadSheet.FormatProviders.OpenXml
Documents.SpreadSheet.FormatProviders.Pdf
Documents.Spreadsheet.FormatProviders.Xls
Documents.ImageUtils
Zip
RadSpreadStreamProcessing Documents.SpreadSheetStreaming
Zip
RadWordsProcessing Documents.Core
Documents.Fixed
Documents.Flow
Documents.Flow.FormatProviders.Pdf
Documents.ImageUtils
Documents.Flow.FormatProviders.Doc
Documents.DrawingML
Zip

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.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft