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.

1. Type tc—short for Telerik UI for ASP.NET Core—or the name of component you wish to add.

   

2. 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.