# Welcome to Telerik UI for ASP.NET MVC Components

Thank you for choosing Progress<sup>®</sup> Telerik<sup>®</sup> UI for ASP.NET MVC!

[Telerik UI for ASP.NET MVC](https://www.telerik.com/aspnet-mvc) is a set of 110+ performance optimized components that allow you to deliver high-quality applications faster. These components come in the form of HTML helpers that wrap the [HTML/JavaScript Kendo UI widgets](https://docs.telerik.com/kendo-ui/introduction) and bring them to .NET MVC. From client-side perspective, the vanilla HTML/JavaScript Kendo UI widgets and their ASP.NET MVC server-side wrappers have the same functionality and provide the same capabilities.

The Telerik UI for ASP.NET MVC HTML helpers:

* Allow you to configure a Kendo UI widget through C# or VB.NET code—for example, to set its value, data source, and so on.
* Render the HTML and JavaScript that are needed to initialize a Kendo UI widget.
* Propagate the widget’s options to the client-side through its initialization script.

To read more about the benefits of using Telerik UI for ASP.NET MVC, visit the <a href="https://www.telerik.com/aspnet-mvc" target="_blank">product overview page</a>.

<CtaPanelIntroduction></CtaPanelIntroduction>

## List of Helpers

<IntroTable>
   <IntroTableColumn>
      <IntroTableSection title="Barcodes">
         <IntroTableAnchor title="BarCode" href="/html-helpers/barcodes/barcode/overview"></IntroTableAnchor>
         <IntroTableAnchor title="QRCode" href="/html-helpers/barcodes/qrcode/overview"></IntroTableAnchor>
      </IntroTableSection>
      <IntroTableSection title="Chart Wizard">
         <IntroTableAnchor title="Chart Wizard" href="/html-helpers/chartwizard/overview"></IntroTableAnchor>
      </IntroTableSection>
      <IntroTableSection title="Charts">
         <IntroTableAnchor title="Chart" href="/html-helpers/charts/overview"></IntroTableAnchor>
         <IntroTableAnchor title="HeatMap" href="/html-helpers/charts/heatmap/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Sparkline" href="/html-helpers/charts/sparkline/overview"></IntroTableAnchor>
         <IntroTableAnchor title="StockChart" href="/html-helpers/charts/stockchart/overview"></IntroTableAnchor>
         <IntroTableAnchor title="TreeMap" href="/html-helpers/charts/treemap/overview"></IntroTableAnchor>
      </IntroTableSection>
      <IntroTableSection title="Conversational UI">
         <IntroTableAnchor title="AIPrompt" href="/html-helpers/conversational-ui/aiprompt/overview"></IntroTableAnchor>
         <IntroTableAnchor title="ChainOfThought" href="/html-helpers/conversational-ui/llm-kit/chain-of-thought"></IntroTableAnchor>
         <IntroTableAnchor title="Checkpoint" href="/html-helpers/conversational-ui/llm-kit/checkpoint"></IntroTableAnchor>
         <IntroTableAnchor title="Chat" href="/html-helpers/conversational-ui/chat/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Citation" href="/html-helpers/conversational-ui/llm-kit/citation"></IntroTableAnchor>
         <IntroTableAnchor title="InlineAIPrompt" href="/html-helpers/conversational-ui/inline-aiprompt/overview"></IntroTableAnchor>
         <IntroTableAnchor title="LLM Kit" href="/html-helpers/conversational-ui/llm-kit/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Reasoning" href="/html-helpers/conversational-ui/llm-kit/reasoning"></IntroTableAnchor>
         <IntroTableAnchor title="ToolCall" href="/html-helpers/conversational-ui/llm-kit/tool-call"></IntroTableAnchor>
      </IntroTableSection>
      <IntroTableSection title="Data Source">
         <IntroTableAnchor title="DataSource" href="/html-helpers/datasource/overview"></IntroTableAnchor>
      </IntroTableSection>
      <IntroTableSection title="Data Management">
         <IntroTableAnchor title="FileManager" href="/html-helpers/data-management/filemanager/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Filter" href="/html-helpers/data-management/filter/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Grid" href="/html-helpers/data-management/grid/overview"></IntroTableAnchor>
         <IntroTableAnchor title="ListView" href="/html-helpers/data-management/listview/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Pager" href="/html-helpers/data-management/pager/overview"></IntroTableAnchor>
         <IntroTableAnchor title="PivotGrid" href="/html-helpers/data-management/pivotgrid/overview"></IntroTableAnchor>
         <IntroTableAnchor title="PivotGridV2" href="/html-helpers/data-management/pivotgridv2/overview"></IntroTableAnchor>
         <IntroTableAnchor title="PropertyGrid" href="/html-helpers/data-management/propertygrid/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Spreadsheet" href="/html-helpers/data-management/spreadsheet/overview"></IntroTableAnchor>
         <IntroTableAnchor title="TaskBoard" href="/html-helpers/data-management/taskboard/overview"></IntroTableAnchor>
         <IntroTableAnchor title="TreeList" href="/html-helpers/data-management/treelist/overview"></IntroTableAnchor>
      </IntroTableSection>
      <IntroTableSection title="Diagrams and Maps">
         <IntroTableAnchor title="Diagram" href="/html-helpers/diagrams-and-maps/diagram/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Map" href="/html-helpers/diagrams-and-maps/map/overview"></IntroTableAnchor>
         <IntroTableAnchor title="OrgChart" href="/html-helpers/diagrams-and-maps/orgchart/overview"></IntroTableAnchor>
      </IntroTableSection>
   </IntroTableColumn>
   <IntroTableColumn>
      <IntroTableSection title="Editors">
         <IntroTableAnchor title="AutoComplete" href="/html-helpers/editors/autocomplete/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Captcha" href="/html-helpers/editors/captcha/overview"></IntroTableAnchor>
         <IntroTableAnchor title="CheckBox" href="/html-helpers/editors/checkbox/overview"></IntroTableAnchor>
         <IntroTableAnchor title="CheckBoxGroup" href="/html-helpers/editors/checkboxgroup/overview"></IntroTableAnchor>
         <IntroTableAnchor title="ColorGradient" href="/html-helpers/editors/colorgradient/overview"></IntroTableAnchor>
         <IntroTableAnchor title="ColorPalette" href="/html-helpers/editors/colorpalette/overview"></IntroTableAnchor>
         <IntroTableAnchor title="ColorPicker" href="/html-helpers/editors/colorpicker/overview"></IntroTableAnchor>
         <IntroTableAnchor title="ComboBox" href="/html-helpers/editors/combobox/overview"></IntroTableAnchor>
         <IntroTableAnchor title="DateInput" href="/html-helpers/editors/dateinput/overview"></IntroTableAnchor>
         <IntroTableAnchor title="DatePicker" href="/html-helpers/editors/datepicker/overview"></IntroTableAnchor>
         <IntroTableAnchor title="DateRangePicker" href="/html-helpers/editors/daterangepicker/overview"></IntroTableAnchor>
         <IntroTableAnchor title="DateTimePicker" href="/html-helpers/editors/datetimepicker/overview"></IntroTableAnchor>
         <IntroTableAnchor title="DropDownList" href="/html-helpers/editors/dropdownlist/overview"></IntroTableAnchor>
         <IntroTableAnchor title="DropDownTree" href="/html-helpers/editors/dropdowntree/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Editor" href="/html-helpers/editors/editor/overview"></IntroTableAnchor>
         <IntroTableAnchor title="FlatColorPicker" href="/html-helpers/editors/flatcolorpicker/overview"></IntroTableAnchor>
         <IntroTableAnchor title="ImageEditor" href="/html-helpers/editors/imageeditor/overview"></IntroTableAnchor>
         <IntroTableAnchor title="ListBox" href="/html-helpers/editors/listbox/overview"></IntroTableAnchor>
         <IntroTableAnchor title="MaskedTextBox" href="/html-helpers/editors/maskedtextbox/overview"></IntroTableAnchor>
         <IntroTableAnchor title="MultiColumnComboBox" href="/html-helpers/editors/multicolumncombobox/overview"></IntroTableAnchor>
         <IntroTableAnchor title="MultiSelect" href="/html-helpers/editors/multiselect/overview"></IntroTableAnchor>
         <IntroTableAnchor title="NumericTextBox" href="/html-helpers/editors/numerictextbox/overview"></IntroTableAnchor>
         <IntroTableAnchor title="OTP Input" href="/html-helpers/editors/otpinput/overview"></IntroTableAnchor>
         <IntroTableAnchor title="RadioButton" href="/html-helpers/navigation/radiobutton/overview"></IntroTableAnchor>
         <IntroTableAnchor title="RadioGroup" href="/html-helpers/editors/radiogroup/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Rating" href="/html-helpers/editors/rating/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Signature" href="/html-helpers/editors/signature/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Slider" href="/html-helpers/editors/slider/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Switch" href="/html-helpers/editors/switch/overview"></IntroTableAnchor>
         <IntroTableAnchor title="TextArea" href="/html-helpers/editors/textarea/overview"></IntroTableAnchor>
         <IntroTableAnchor title="TextBox" href="/html-helpers/editors/textbox/overview"></IntroTableAnchor>
         <IntroTableAnchor title="TimeDurationPicker" href="/html-helpers/editors/timedurationpicker/overview"></IntroTableAnchor>
         <IntroTableAnchor title="TimePicker" href="/html-helpers/editors/timepicker/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Upload" href="/html-helpers/editors/upload/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Validator Demos" href="https://demos.telerik.com/aspnet-mvc/validator"></IntroTableAnchor>
      </IntroTableSection>
   </IntroTableColumn>
   <IntroTableColumn>
      <IntroTableSection title="Gauges">
         <IntroTableAnchor title="ArcGauge" href="/html-helpers/gauges/arcgauge/overview"></IntroTableAnchor>
         <IntroTableAnchor title="CircularGauge" href="/html-helpers/gauges/circulargauge/overview"></IntroTableAnchor>
         <IntroTableAnchor title="LinearGauge" href="/html-helpers/gauges/lineargauge/overview"></IntroTableAnchor>
         <IntroTableAnchor title="RadialGauge" href="/html-helpers/gauges/radialgauge/overview"></IntroTableAnchor>
      </IntroTableSection>
      <IntroTableSection title="Interactivity and UX">
         <IntroTableAnchor title="Circular ProgressBar" href="/html-helpers/interactivity/circularprogressbar/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Loader" href="/html-helpers/interactivity/loader/overview"></IntroTableAnchor>
         <IntroTableAnchor title="ProgressBar" href="/html-helpers/interactivity/progressbar/overview"></IntroTableAnchor>
         <IntroTableAnchor title="SkeletonContainer" href="/html-helpers/interactivity/skeletoncontainer/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Sortable" href="/html-helpers/interactivity/sortable/overview"></IntroTableAnchor>
      </IntroTableSection>
      <IntroTableSection title="Layout">
         <IntroTableAnchor title="Avatar" href="/html-helpers/layout/avatar/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Badge" href="/html-helpers/layout/badge/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Cards" href="/styles-and-layout/cards"></IntroTableAnchor>
         <IntroTableAnchor title="Dialog" href="/html-helpers/layout/dialog/overview"></IntroTableAnchor>
         <IntroTableAnchor title="DockManager" href="/html-helpers/layout/dockmanager/overview"></IntroTableAnchor>
         <IntroTableAnchor title="ExpansionPanel" href="/html-helpers/layout/expansionpanel/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Form" href="/html-helpers/layout/form/overview"></IntroTableAnchor>
         <IntroTableAnchor title="GridLayout" href="/html-helpers/layout/gridlayout/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Notification" href="/html-helpers/layout/notification/overview"></IntroTableAnchor>
         <IntroTableAnchor title="PopOver" href="/html-helpers/layout/popover/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Responsive Panel" href="/html-helpers/layout/responsivepanel/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Splitter" href="/html-helpers/layout/splitter/overview"></IntroTableAnchor>
         <IntroTableAnchor title="StackLayout" href="/html-helpers/layout/stacklayout/overview"></IntroTableAnchor>
         <IntroTableAnchor title="TileLayout" href="/html-helpers/layout/tilelayout/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Tooltip" href="/html-helpers/layout/tooltip/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Window" href="/html-helpers/layout/window/overview"></IntroTableAnchor>
      </IntroTableSection>
      <IntroTableSection title="Media">
         <IntroTableAnchor title="MediaPLayer" href="/html-helpers/media/mediaplayer/overview"></IntroTableAnchor>
         <IntroTableAnchor title="ScrollView" href="/html-helpers/media/scrollview/overview"></IntroTableAnchor>
      </IntroTableSection>
   </IntroTableColumn>
   <IntroTableColumn>
      <IntroTableSection title="Navigation">
         <IntroTableAnchor title="ActionSheet" href="/html-helpers/navigation/actionsheet/overview"></IntroTableAnchor>
         <IntroTableAnchor title="AppBar" href="/html-helpers/navigation/appbar/overview"></IntroTableAnchor>
         <IntroTableAnchor title="BottomNavigation" href="/html-helpers/navigation/bottomnavigation/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Breadcrumb" href="/html-helpers/navigation/breadcrumb/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Button" href="/html-helpers/navigation/button/overview"></IntroTableAnchor>
         <IntroTableAnchor title="ButtonGroup" href="/html-helpers/navigation/buttongroup/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Chip" href="/html-helpers/navigation/chip/overview"></IntroTableAnchor>
         <IntroTableAnchor title="ChipList" href="/html-helpers/navigation/chiplist/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Drawer" href="/html-helpers/navigation/drawer/overview"></IntroTableAnchor>
         <IntroTableAnchor title="DropDownButton" href="/html-helpers/navigation/dropdownbutton/overview"></IntroTableAnchor>
         <IntroTableAnchor title="FloatingActionButton" href="/html-helpers/navigation/floatingactionbutton/overview"></IntroTableAnchor>
         <IntroTableAnchor title="FloatingToolBar" href="/html-helpers/navigation/floatingtoolbar/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Menu" href="/html-helpers/navigation/menu/overview"></IntroTableAnchor>
         <IntroTableAnchor title="PanelBar" href="/html-helpers/navigation/panelbar/overview"></IntroTableAnchor>
         <IntroTableAnchor title="SmartPasteButton" href="/html-helpers/navigation/smartpastebutton/overview"></IntroTableAnchor>
         <IntroTableAnchor title="SpeechToTextButton" href="/html-helpers/navigation/speechtotextbutton/overview"></IntroTableAnchor>
         <IntroTableAnchor title="SplitButton" href="/html-helpers/navigation/splitbutton/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Stepper" href="/html-helpers/navigation/stepper/overview"></IntroTableAnchor>
         <IntroTableAnchor title="TabStrip" href="/html-helpers/navigation/tabstrip/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Timeline" href="/html-helpers/navigation/timeline/overview"></IntroTableAnchor>
         <IntroTableAnchor title="ToggleButton" href="/html-helpers/navigation/togglebutton/overview"></IntroTableAnchor>
         <IntroTableAnchor title="ToolBar" href="/html-helpers/navigation/toolbar/overview"></IntroTableAnchor>
         <IntroTableAnchor title="TreeView" href="/html-helpers/navigation/treeview/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Wizard" href="/html-helpers/navigation/wizard/overview"></IntroTableAnchor>
      </IntroTableSection>
      <IntroTableSection title="PDF">
         <IntroTableAnchor title="PDFViewer" href="/html-helpers/pdf/pdfviewer/overview"></IntroTableAnchor>
      </IntroTableSection>
      <IntroTableSection title="Scheduling">
         <IntroTableAnchor title="Calendar" href="/html-helpers/scheduling/calendar/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Gantt" href="/html-helpers/scheduling/gantt/overview"></IntroTableAnchor>
         <IntroTableAnchor title="MultiViewCalendar" href="/html-helpers/scheduling/multiviewcalendar/overview"></IntroTableAnchor>
         <IntroTableAnchor title="Scheduler" href="/html-helpers/scheduling/scheduler/overview"></IntroTableAnchor>
      </IntroTableSection>
      <IntroTableSection title="Template">
         <IntroTableAnchor title="Template" href="/html-helpers/template/overview"></IntroTableAnchor>
      </IntroTableSection>
   </IntroTableColumn>
   <IntroTableColumn>
      <IntroTableSection title="Document Processing">
         <IntroTableAnchor title="PdfProcessing" href="https://docs.telerik.com/devtools/document-processing/libraries/radpdfprocessing/overview"></IntroTableAnchor>
         <IntroTableAnchor title="SpreadProcessing" href="https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/overview"></IntroTableAnchor>
         <IntroTableAnchor title="SpreadStreamProcessing" href="https://docs.telerik.com/devtools/document-processing/libraries/radspreadstreamprocessing/overview"></IntroTableAnchor>
         <IntroTableAnchor title="WordsProcessing" href="https://docs.telerik.com/devtools/document-processing/libraries/radwordsprocessing/overview"></IntroTableAnchor>
         <IntroTableAnchor title="ZipLibrary" href="https://docs.telerik.com/devtools/document-processing/libraries/radziplibrary/overview"></IntroTableAnchor>
      </IntroTableSection>
   </IntroTableColumn>
 </IntroTable>

## Getting Started

To make your first steps with UI for ASP.NET MVC, you can <a href="https://www.telerik.com/aspnet-mvc" target="_blank">start a free trial</a> and check some of the getting started tutorials:

* [First Steps with UI for ASP.NET MVC](https://www.telerik.com/aspnet-mvc/documentation/getting-started-mvc/first-steps)—Create your first project with Telerik UI for ASP.NET MVC controls by using a project template.
* [Installing Telerik UI for ASP.NET MVC with NuGet](https://www.telerik.com/aspnet-mvc/documentation/installation/installation-options/nuget-install)—Learn how to add the Telerik NuGet server to Visual Studio and to install the Telerik UI for ASP.NET MVC controls in your project.
* [Scaffolding the Telerik UI for ASP.NET MVC project](https://www.telerik.com/aspnet-mvc/documentation/vs-integration/scaffolding)—Learn how to use standard scaffolding to generate MVC-helper declarations together with the related Controller action methods.
* [Telerik UI for ASP.NET MVC fundamentals](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/helper-basics/fundamentals-mvc)—Learn the basics about the Telerik UI for ASP.NET MVC HTML Helpers.
* [Integrating the Telerik UI for ASP.NET MVC project with Visual Studio](https://www.telerik.com/aspnet-mvc/documentation/vs-integration/introduction)—Take advantage of the Visual Studio extensions that help you with the project creation and configuration.
* [Video Onboarding](https://www.telerik.com/aspnet-mvc/documentation/getting-started/video-onboarding)—A free course developed to help you get started with the Telerik UI for ASP.NET MVC components and features

## Support Options

For any issues you may come across while working with UI for ASP.NET MVC, use any of the available support channels:

* UI for ASP.NET MVC license holders and active trialists can take advantage of the outstanding customer support delivered by the developers building the library. To submit a support ticket, use the [UI for ASP.NET MVC dedicated support](https://www.telerik.com/account/support-tickets/) system.
* [UI for ASP.NET MVC forums](https://www.telerik.com/forums/aspnet-mvc) are part of the free support you can get from the community and from the UI for ASP.NET MVC team on all kinds of general issues.
* [UI for ASP.NET MVC feedback portal](https://feedback.telerik.com/aspnet-mvc) and [UI for ASP.NET MVC roadmap](https://www.telerik.com/support/whats-new/kendo-ui/roadmap) provide information on the features in discussion and also the planned ones for release.
* In case you need a tailor-made solution for your project, go straight to [Progress Services](https://www.progress.com/services).

## Learning Resources

* [Online Demos](https://demos.telerik.com/aspnet-mvc/)
* [Tutorials](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/helper-basics/build-team-efficiency-dashboard/overview)
* [Support Resources Hub Page](https://www.telerik.com/support/aspnet-mvc)
* [Code Examples with Telerik UI for ASP.NET MVC](https://github.com/telerik/ui-for-aspnet-mvc-examples)
* [Code Examples with ASP.NET MVC](https://github.com/telerik/kendo-examples-asp-net-mvc)
* [Code Examples with ASP.NET Web Technologies](https://github.com/telerik/kendo-examples-asp-net)

> If you prefer videos, check out the free [Online Technical Training](https://docs.telerik.com/aspnet-mvc/virtual-classroom).

## Next Steps

* [Downloading and installing Telerik UI for ASP.NET MVC](https://www.telerik.com/aspnet-mvc/documentation/installation/installation-options/overview-download)
* [Exploring the Telerik UI for ASP.NET MVC fundamentals](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/helper-basics/fundamentals-mvc)
* [Integrating Telerik UI for ASP.NET MVC in Visual Studio](https://www.telerik.com/aspnet-mvc/documentation/vs-integration/introduction)
* [Upgrading Telerik UI for ASP.NET MVC](https://www.telerik.com/aspnet-mvc/documentation/installation/upgrading/upgrade)
