Adding Code Snippets with the Productivity Tools

The Kendo UI Productivity Tools extension for Visual Studio (VS) Code provides a handy feature for improving the daily development with the React components library—code snippets for fast UI component reference and configuration.

Snippets simplify and accelerate the implementation of KendoReact components in your project. They facilitate the development process by providing a quick way for adding the components directly to the source code, while also including predefined tab stops for the required options.

The KendoReact snippets library consists of many components such as Grid, Inputs, Layouts, and more.

To take advantage of the dozens of available code snippets:

  1. Open the source code in the IDE and click where you want to insert the KendoReact component.
  2. To list the KendoReact snippets, type the kr- snippet prefix.
  3. Continue by typing the name of the component that you want to insert. Some components are provided by multiple snippets which allow you to create them in various ways depending on the desired configuration.
  4. Press Enter to insert the desired component in the source code.
  5. (Optional) If the component provides placeholders for specific properties, iterate and provide them by pressing the Tab key.

VSCode-Snippets

Code Snippets Library

The following table lists the available KendoReact code snippet libraries per component with their references.

COMPONENTSNIPPETS
Barcodes
Barcodekr-barcode
QRCodekr-qrcode
Buttons
Buttonkr-button
ButtonGroupkr-buttongroup
Chipkr-chip
ChipListkr-chiplist
DropDownButtonkr-dropdownbtn
FloatingActionButtonkr-floatingactionbtn
Toolbarkr-toolbar
SplitButtonkr-splitbtn
Charts
Chartkr-chart
Sparklinekr-sparkline
StockChartkr-stockchart
Conversational UI
Chatkr-chat
Grid
Gridkr-grid
GridColumnkr-gridcolumn
Data Tools
Filterkr-filter
Pagerkr-pager
DateInputs
Calendarkr-calendar
DateInputkr-dateinput
DatePickerkr-datepicker
DateRangePickerkr-daterangepicker
DateTimePickerkr-datetimepicker
MultiViewCalendarkr-multiviewcalendar
TimePickerkr-timepicker
Dialogs
Dialogkr-dialog
Windowkr-window
Dropdowns
AutoCompletekr-autocomplete
ComboBoxkr-combobox
DropDownListkr-dropdownlist
DropDownTreekr-dropdowntree
MultiColumnComboBoxkr-multicolumncombobox
MultiSelectkr-multiselect
MultiSelectTreekr-multiselecttree
Editor
Editorkr-editor
Excel Export
ExcelExportkr-excelexport
Form
Formkr-form
Gantt
Ganttkr-gantt
Gauges
ArcGaugekr-arcgauge
CircularGaugekr-circulargauge
LinearGaugekr-lineargauge
RadialGaugekr-radialgauge
Indicators
Badgekr-badge
Loaderkr-loader
Skeletonkr-skeleton
Inputs
CheckBoxkr-checkbox
ColorGradientkr-colorgradient
ColorPalettekr-colorpalette
ColorPickerkr-colorpicker
FlatColorPickerkr-flatcolorpicker
Inputkr-input
MaskedTextBoxkr-maskedtextbox
NumericTextBoxkr-numerictextbox
RadioButtonkr-radiobtn
RadioGroupkr-radiogroup
RangeSliderkr-rangeslider
Sliderkr-slider
Ratingkr-rating
Switchkr-switch
TextAreakr-textarea
Labels
Labelkr-label
FloatingLabelkr-floatinglabel
Hintkr-hint
Errorkr-error
Layout
AppBarkr-appbar
Avatarkr-avatar
BottomNavigationkr-bottomnavingation
Breadcrumbkr-breadcrumb
Cardkr-card
Drawerkr-drawer
ExpansionPanelkr-expansionpanel
GridLayoutkr-gridlayout
Menukr-menu
PanelBarkr-panelbar
Splitterkr-splitter
StackLayoutkr-stacklayout
TabStripkr-tabstrip
Stepperkr-stepper
TileLayoutkr-tilelayout
ListBox
ListBoxkr-listbox
ListView
ListViewkr-listview
Notification
Notificationkr-notification
PivotGrid
PivotGridkr-pivotgrid
Popup
Popupkr-popup
ProgressBar
ProgressBarkr-progressbar
Ripple
Ripplekr-ripple
Scheduler
Schedulerkr-scheduler
ScrollView
ScrollViewkr-scrollview
Sortable
Sortablekr-sortable
TaskBoard
TaskBoardkr-taskboard
Popover
Popoverkr-popover
Tooltip
Tooltipkr-tooltip
TreeList
TreeListkr-treeList
TreeView
TreeViewkr-treeView
Upload
Uploadkr-upload

In this article

Not finding the help you need?