New to Telerik UI for ASP.NET Core? Start a free 30-day trial

Snippets in Visual Studio Code

Visual Studio Code snippets are templates that make it easier to enter repetitive code patterns. Use the Telerik UI for ASP.NET Core code snippets for fast declaration of components with their most used features.

Telerik UI for ASP.NET Core Snippets

The Telerik UI for ASP.NET Core Visual Studio Code Productivity Tools provide snippets for the components listed in the table below in both flavors—HTML Helpers and Tag Helpers.

Type tc—short for Telerik UI for ASP.NET Core—or the name of component you wish to add.
Select the desired snippet from the list and press Enter to generate the component configuration.

You can access the code snippets pack by installing the Telerik UI for ASP.NET Core Visual Studio Code productivity extension.

Component	Html Helper snippet	TagHelper snippet
Barcodes
Barcode	`tc-barcode-html`	`tc-barcode-tag`
QRCode	`tc-qrcode-html`	`tc-qrcode-tag`
Charts
Chart	`tc-chart-html`	`tc-chart-tag`
Chart DataSource Binding	`tc-chartremotedata-html`	`tc-chartremotedata-tag`
Conversational UI
Chat	`tc-chat-html`	`tc-chat-tag`
Data Management
FileManager	`tc-filemanager-html`	`tc-filemanager-tag`
Filter	`tc-filter-html`	`tc-filter-tag`
Grid	`tc-grid-html`	`tc-grid-tag`
Bound Grid Column	`tc-gridcolumn-html`	`tc-gridcolumn-tag`
Sticky Grid Column	`tc-gridcolumn-sticky-html`	`tc-gridcolumn-sticky-tag`
Frozen Grid Column	`tc-gridcolumn-frozen-html`	`tc-gridcolumn-frozen-tag`
ListView	`tc-listview-html`
Pager	`tc-pager-html`	`tc-pager-tag`
PivotGrid	`tc-pivotgrid-html`	`tc-pivotgrid-tag`
PivotGridV2	`tc-pivotgridv2-html`	`tc-pivotgridv2-tag`
Spreadsheet	`tc-spreadsheet-html`	`tc-spreadsheet-tag`
Spreadsheet DataSource Binding	`tc-spreadsheetremotedata-html`
TaskBoard	`tc-taskboard-html`	`tc-taskboard-tag`
TreeList	`tc-treelist-html`	`tc-treelist-tag`
Add TreeList Column	`tc-treelistcolumn-html`	`tc-treelistcolumn-tag`
Diagrams and Maps
Diagram	`tc-diagram-html`
Map	`tc-map-html`	`tc-map-tag`
OrgChart	`tc-orgchart-html`	`tc-orgchart-tag`
Editors
AutoComplete	`tc-autocomplete-html`	`tc-autocomplete-tag`
Captcha	`tc-captcha-html`	`tc-captcha-tag`
CheckBox	`tc-checkbox-html`	`tc-checkbox-tag`
CheckBoxGroup	`tc-checkboxgroup-html`	`tc-checkboxgroup-tag`
ColorGradient	`tc-colorgradient-html`	`tc-colorgradient-tag`
ColorPalette	`tc-colorpalette-html`	`tc-colorpalette-tag`
ColorPicker	`tc-colorpicker-html`	`tc-colorpicker-tag`
ComboBox	`tc-combobox-html`	`tc-combobox-tag`
DateInput	`tc-dateinput-html`	`tc-dateinput-tag`
DatePicker	`tc-datepicker-html`	`tc-datepicker-tag`
DateRangePicker	`tc-daterangepicker-html`	`tc-daterangepicker-tag`
DateTimePicker	`tc-datetimepicker-html`	`tc-datetimepicker-tag`
DropDownList	`tc-dropdownlist-html`	`tc-dropdownlist-tag`
DropDownTree	`tc-dropdowntree-html`	`tc-dropdowntree-tag`
Editor	`tc-editor-html`	`tc-editor-tag`
FlatColorPicker	`tc-flatcolorpicker-html`	`tc-flatcolorpicker-tag`
ImageEditor	`tc-imageeditor-html`	`tc-imageeditor-tag`
ListBox	`tc-listbox-html`	`tc-listbox-tag`
MaskedTextBox	`tc-maskedtextbox-html`	`tc-maskedtextbox-tag`
MultiColumnComboBox	`tc-multicolumncombobox-html`	`tc-multicolumncombobox-tag`
MultiSelect	`tc-multiselect-html`	`tc-multiselect-tag`
NumericTextBox	`tc-numerictextbox-html`	`tc-numerictextbox-tag`
RadioGroup	`tc-radiogroup-html`	`tc-radiogroup-tag`
Rating	`tc-rating-html`	`tc-rating-tag`
Slider	`tc-slider-html`	`tc-slider-tag`
Switch	`tc-switch-html`	`tc-switch-tag`
TextArea	`tc-textarea-html`	`tc-textarea-tag`
TextBox	`tc-textbox-html`	`tc-textbox-tag`
TimePicker	`tc-timepicker-html`	`tc-timepicker-tag`
Upload	`tc-upload-html`	`tc-upload-tag`
Gauges
ArcGauge	`tc-arc-gauge-html`	`tc-arc-gauge-tag`
CircularGauge	`tc-circular-gauge-html`	`tc-circular-gauge-tag`
LinearGauge	`tc-linear-gauge-html`	`tc-linear-gauge-tag`
RadialGauge	`tc-radial-gauge-html`	`tc-radial-gauge-tag`
Interactivity and UX
Circular ProgressBar	`tc-circular-progress-bar-html`	`tc-circular-progress-bar-tag`
Loader	`tc-loader-html`	`tc-loader-tag`
ProgressBar	`tc-progressbar-html`	`tc-progressbar-tag`
SkeletonContainer	`tc-skeletoncontainer-html`	`tc-skeletoncontainer-tag`
Sortable	`tc-sortable-html`	`tc-sortable-tag`
Layout
Avatar	`tc-avatar-html`	`tc-avatar-tag`
Badge	`tc-badge-html`	`tc-badge-tag`
Dialog	`tc-dialog-html`	`tc-dialog-tag`
ExpansionPanel	`tc-expansionpanel-html`	`tc-expansionpanel-tag`
Form	`tc-form-html`	`tc-form-tag`
Form Item	`tc-formitem-html`	`tc-formitem-tag`
Notification	`tc-notification-html`	`tc-notification-tag`
PopOver	`tc-popover-html`	`tc-popover-tag`
ResponsivePanel	`tc-responsivepanel-html`	`tc-responsivepanel-tag`
Splitter	`tc-splitter-html`	`tc-splitter-tag`
TileLayout	`tc-tilelayout-html`	`tc-tilelayout-tag`
Tooltip	`tc-tooltip-html`	`tc-tooltip-tag`
Window	`tc-window-html`	`tc-window-tag`
Media
MediaPlayer	`tc-mediaplayer-html`
ScrollView	`tc-scrollview-html`	`tc-scrollview-tag`
Navigation
ActionSheet	`tc-actionsheet-html`	`tc-actionsheet-tag`
AppBar	`tc-appbar-html`	`tc-appbar-tag`
BottomNavigation	`tc-bottomnavigation-html`	`tc-bottomnavigation-tag`
BottomNavigation Item	`tc-bottomnavigationitem-html`	`tc-bottomnavigationitem-tag`
Breadcrumb	`tc-breadcrumb-html`	`tc-breadcrumb-tag`
Button	`tc-button-html`	`tc-button-tag`
ButtonGroup	`tc-buttongroup-html`	`tc-buttongroup-tag`
Drawer	`tc-drawer-html`	`tc-drawer-tag`
DropDownButton	`tc-dropdownbutton-html`	`tc-dropdownbutton-tag`
DropDownButton Item	`tc-dropdownbuttonitem-html`	`tc-dropdownbuttonitem-tag`
FloatingActionButton	`tc-floatingactionbutton-html`	`tc-floatingactionbutton-tag`
FloatingActionButton Items	`tc-floatingactionbutton-items-html`	`tc-floatingactionbutton-items-tag`
FloatingActionButton Item	`tc-floatingactionbuttonitem-html`	`tc-floatingactionbuttonitem-tag`
Menu	`tc-menu-html`	`tc-menu-tag`
Menu Item	`tc-menuitem-html`	`tc-menuitem-tag`
Menu DataSource Binding	`tc-menuremotedata-html`	`tc-menuremotedata-tag`
PanelBar	`tc-panelbar-html`	`tc-panelbar-tag`
PanelBar DataSource Binding	`tc-panelbarremotedata-html`	`tc-panelbarremotedata-tag`
RadioButton	`tc-radiobutton-html`	`tc-radiobutton-tag`
SplitButton	`tc-splitbutton-html`	`tc-splitbutton-tag`
Stepper	`tc-stepper-html`	`tc-stepper-tag`
TabStrip	`tc-tabstrip-html`	`tc-tabstrip-tag`
Timeline	`tc-timeline-html`	`tc-timeline-tag`
ToolBar	`tc-toolbar-html`	`tc-toolbar-tag`
TreeView	`tc-treeview-html`	`tc-treeview-tag`
Wizard	`tc-wizard-html`	`tc-wizard-tag`
PDF
PDFViewer	`tc-pdfviewer-html`	`tc-pdfviewer-tag`
Scheduling
Calendar	`tc-calendar-html`	`tc-calendar-tag`
Gantt	`tc-gantt-html`	`tc-gantt-tag`
MultiViewCalendar	`tc-multiviewcalendar-html`	`tc-multiviewcalendar-tag`
Scheduler	`tc-scheduler-html`	`tc-scheduler-tag`

For further details on using snipets, creating personalized snippets or disabling snippets refer to the official Visual Studio Code documentation.