Progress Telerik is a shining example of quality. They consistently make high-quality components that make our web apps look better and work smarter. Progress Telerik UI for ASP.NET AJAX stands out among component libraries, giving us the best tools for creating dynamic and visually stunning web experiences.

Its components are sophisticated and reliable, with well-thought-out designs and robust functionality.

Image from Leonardo.ai

This post will look into the Map object for ASP.NET WebForms and analyze how to add labels to the map using custom data. We will use Kendo UI for jQuery in this sample.

Let’s Do It!

The map image below is the sample that we will demonstrate how to create.

RadMap image sample

We must configure the essential Telerik environment by adding the RadScriptManager, the RadMap component and the data source.

1. Create a new WebForm.aspx file. Add the RadScriptManager and others inside the form element.

1.<telerik:RadScriptManager LoadScriptsBeforeUI="true" ScriptMode="Release" EnableScriptCombine="false" ID="RadScriptManager1" runat="server" EnablePageMethods="true" EnableViewState="true" EnablePartialRendering="True" EnableScriptGlobalization="true" EnableTheming="True">
2.     <Scripts>
3.         <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
4.         <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
5.         <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
6.     </Scripts>
7. </telerik:RadScriptManager>

2. Add the RadMap component.

1.<telerik:RadMap Height="1000px" ID="RadMap1" runat="server" Zoom="5" LayersDataSourceID="RadClientDataSource1">
2.    <CenterSettings Latitude="43.2681" Longitude="-97.7448" />
3.    <ClientEvents OnShapeCreated="onShapeCreated" OnShapeFeatureCreated="onShapeFeatureCreated"
4.        OnShapeMouseEnter="onShapeMouseEnter" OnShapeMouseLeave="onShapeMouseLeave" />
5.    <LayersCollection>
6.        <telerik:MapLayer Type="Shape" ClientDataSourceID="RadClientDataSource1">
7.            <StyleSettings>
8.                <FillSettings Opacity= "0.7" />
9.            </StyleSettings>
10.        </telerik:MapLayer>
11.    </LayersCollection>
12.</telerik:RadMap>

We configure the ClientEvents we will use here and set the StyleSetting. We add an opacity of 0.7, so when we pass the mouse over, we change it to 1 to highlight the shape, like the state of Montana in the RadMap image sample.

3. Add the RadClientDataSource component.

1.<telerik:RadClientDataSource ID="RadClientDataSource1" runat="server">
2.    <DataSource>
3.        <WebServiceDataSourceSettings ServiceType="GeoJSON">
4.            <Select Url="states.json" DataType="JSON" />
5.        </WebServiceDataSourceSettings>
6.    </DataSource>
7.</telerik:RadClientDataSource>

In this code, the ServiceType= "GeoJSON" attribute of the WebServiceDataSourceSettings tag specifies the data format in which the web service is expected to return.

In this case, GeoJSON is a format for encoding various geographic data structures. It is built on JavaScript Object Notation (JSON), making it simple to work with in a web environment.

The Select Url="states.json" attribute specifies the URL for the web service. Tip: If you specify a URL outside your project, configure CORS.

The JavaScript for This RadMap

The state.json I provide in this sample has the density value for each U.S. state, but we can build our own data. For this sample, we created a const with values where the property name is the key:

1.const dataStates = [['Alabama', 141.972], ['Alaska', 1.896], ['Arizona', 85.57], ['Arkansas', 84.64], ['California', 362.54], ['Colorado', 73.99], ['Connecticut', 1108.65], ['Delaware', 696.45], ['District of Columbia', 15097.5], ['Florida', 530.09], ['Georgia', 254.25], ['Hawaii', 321.15], ['Hawaii', 321.15], ['Idaho', 28.72], ['Illinois', 347.25], ['Indiana', 272.54], ['Iowa', 82.215], ['Kansas', 52.63], ['Kentucky', 165], ['Louisiana', 157.5], ['Maine', 64.56], ['Maryland', 894.44], ['Maryland', 894.44], ['Massachusetts', 1260.30], ['Michigan', 260.85], ['Michigan', 260.85], ['Michigan', 260.85], ['Michigan', 260.85], ['Minnesota', 100.71], ['Mississippi', 95.25], ['Missouri', 130.89], ['Montana', 10.28], ['Nebraska', 35.95], ['Nevada', 37.2], ['New Hampshire', 220.5], ['New Jersey', 1783.5], ['New Mexico', 25.74], ['New York', 618.45], ['North Carolina', 297.29], ['North Dakota', 14.874], ['Ohio', 422.84], ['Oklahoma', 82.83], ['Oregon', 60.495], ['Pennsylvania', 426.45], ['Rhode Island', 1509], ['South Carolina', 233.10], ['South Dakota', 147.105], ['Tennessee', 132.12], ['Texas', 147.10], ['Utah', 51.44], ['Vermont', 1dw01.595], ['Virginia', 306.75], ['Virginia', 306.75], ['Virginia', 306.75], ['Washington', 153.89], ['Washington', 153.89], ['Washington', 153.89], ['West Virginia', 115.59], ['Wisconsin', 157.8], ['Wyoming', 8.7765], ['Puerto Rico', 16]];

For your implementation, this data can be in the state.json or you can build it yourself and load it from an endpoint.

Creating the Labels

On the client event onShapeCreated, we can create the bbox on the shape to hold the values we’d like to display.

1.function onShapeCreated(e) {
2.
3.var shape = e.shape;
4.var key = shape.dataItem.properties.name;
5.var valueArray = dataStates.find(function (item) {
6.    if (item[0] === key) return item;
7.});
8.
9.var customValue = parseFloat(valueArray[1]);
10.
11.if (customValue > 150) {
12.    shape.options.fill.set("color", "red"); // Red for values greater than 150
13.} else {
14.    shape.options.fill.set("color", "blue"); // Green otherwise
15.}
16.
17.var bbox = e.shape.bbox(); // Get the "box" of each of the states
18.
19.if (bbox.width() <= PMinWidthToDisplayLabel) {
20.    return;
21.}
22.
23.var options = { style: ‘currency’, currency: ‘USD’ };
24.var labelText = customValue.toLocaleString('en-US', options);
25.var center = bbox.center(); // We need the center to  display the label exactly on it later.
26.var label = new kendo.drawing.Text(labelText);
27.label.options.fill.color = "#DEDEDE"; // Set the color
28.var labelCenter = label.bbox().center();
29.
30.label.position([ // Position the label
31.    center.x - labelCenter.x,
32.    center.y - labelCenter.y
33.]);
34.
35.e.layer.surface.draw(label); // Render the label on the layer surface
36.
37.}

In line 4, we read the value from state.json for the current shape, shape.dataItem.properties.name, which is used as the key value for the dataStates var.

In line 11, we use an arbitrary value to change the shape’s colors. In this case, I choose 150.

In line 17, we create the object box to hold the label.

In line 19, we display the label using another arbitrary value. This is useful to avoid repeating the values in the islands of Alaska.

In lines 23 and 24, we transform the data into currency value.

From lines 26 to 27, we customize the content. In line 30, we centralize the position of the label. In line 35, we add the label to the layer.

Adding the Tooltip Content

We can add custom pieces of information on the tooltip when the mouse is over it.

The below image demonstrates what it looks like.

Mouse over Nevada

Here is the event onShapeFeatureCreated for the tooltip on the shape:

1.function onShapeFeatureCreated(e) {
2.
3.    var key = e.properties.name;
4.    var valueArray = dataStates.find(function (item) {
5.        if (item[0] === key) return item;
6.    });
7.
8.    var customValue = parseFloat(valueArray[1]);
9.
10.    var options = { style: ‘currency’, currency: ‘USD’ };
11.    var tooltipText = customValue.toLocaleString('en-US', options);
12.
13.    e.group.options.tooltip = {
14.        content: e.properties.name + " - " + tooltipText,
15.        position: “cursor”,
16.        offset: 10,
17.        width: 120
18.    };
19.}

In line 3, we retrieve the key. In line 4, we get the value.

Tip: If your JSON already has a property to display, load it from e.properties.MyCustomValueInJson, where MyCustomValueInJson is your property name.

In line 14, we pass the content for the tooltip.

Conclusion

Telerik UI for ASP.NET AJAX powered with Kendo UI for jQuery gives us a strong and dependable set of parts for making dynamic and visually stunning web experiences. This post showed how to use the Map object to add labels to a map based on custom data. We learned how to set up the Telerik environment, add the RadMap component and connect to a data source. We’ve also looked at how to make labels and give the tooltip our own information. With these tools and methods, developers can create rich and interactive maps for our web apps.

Download a Telerik DevCraft trial now. Even during the trial, you can call Progress support or contact me on LinkedIn to exchange ideas; I speak English and Portuguese.

References

• Source code
• Search the web for a GeoJSON that matches your requirements: https://www.bing.com/search?&q=download+GeoJSON
• Learn about GeoJSON: https://geojson.org/

Don’t forget: Telerik UI for ASP.NET AJAX comes with a free 30-day trial. Better yet, try the Telerik DevCraft bundle for free to see what other .NET or JavaScript component libraries plus reporting, testing and debugging tools Progress has to offer.

Try Telerik DevCraft

Announcing the much-awaited R2 2023 update of Telerik UI for Blazor, ASP.NET Core and MVC and ASP.NET AJAX!

In this blog post, we’ll delve into the exciting new features and enhancements that will elevate your web development projects to a whole new level. Get ready to unlock the full potential of the latest Telerik UI release.

Feel free to jump to your favorite section:

• Common Release Items
• Telerik UI for Blazor
• Telerik UI for ASP.NET Core/MVC
• Telerik UI for ASP.NET AJAX
• Webinar details for June 8

Common Release Items

Font Icons to SVG Icons

In the R2 2023 update, a significant change was introduced to the default icon type in Telerik and Kendo UI libraries and components. We have shifted from font icons to SVG icons as part of our continuous efforts to improve product quality  and theming mechanisms, and to ensure compliance with Content Security Policy (CSP). This transition allows us to enhance the visual experience and align with evolving web standards.

For more information, be sure to check out the dedicated icon blog post on this topic. It’s packed with valuable insights to help you learn more.

Compatibility with .NET 8 Preview 4

The Telerik UI for Blazor and UI ASP.NET Core libraries are now compatible with Microsoft’s .NET 8 preview 4, released in mid-March. This exciting development enables developers to leverage the cutting-edge features and performance enhancements of .NET 8 while harnessing the robust UI components offered by Telerik.

Design System Documentation

An exciting addition in R2 2023 is the launch of a design system documentation site dedicated to the Telerik and Kendo UI libraries. This site provides a comprehensive collection of design assets, frontend documentation and valuable resources. Initially, we have included documentation for nearly 20 essential components. Our goal is to continuously expand this site, empowering you with the necessary tools to create visually impressive digital experiences and design systems using the robust capabilities of Telerik and Kendo UI.

The design system documentation site now includes the initial version of the CSS Utils package, a convenient library of HTML classes tailored for CSS properties. This package allows you to effortlessly style page layouts without writing extensive CSS code. For example, adding a border radius is as simple as applying the .k-rounded-md class to the element.

The CSS Utils package is integrated within our Telerik and Kendo UI themes. When you install any of our themes, you automatically get the CSS Utils package. However, if you only require the Utils package for page layout styling, you can install it separately.

We have plans to expand the package’s capabilities, including adding a color system and typography options, and expanding the sizing map. Stay tuned for future updates!

LESS Themes Deprecation

In accordance with the previous announcement made in January 2022, starting from R1 2023, we will discontinue support for LESS themes in our Telerik and Kendo UI products. We recommend that any customers currently using LESS themes transition to an equivalent theme based on SASS. For detailed information on the reasons behind this change and its potential impact on you, please refer to titled “Future Plans for the Telerik and Kendo UI LESS Themes”.

ThemeBuilder Pro Support

ThemeBuilder Pro is here with exciting updates and new features for enhanced development. This release introduces full customization support for Kendo UI (jQuery) and Telerik UI (ASP.NET Core/MVC), giving you complete control over your web application’s appearance. You can now seamlessly integrate with Figma for smooth collaboration between design and development teams.

The automatic migration feature ensures a hassle-free transition to the latest theme version. Improved variable management, SSO support, and granular project permissions further empower developers and designers. ThemeBuilder Pro is dedicated to providing powerful tools and capabilities for an exceptional development experience.

Read more in the dedicated ThemeBuilder blog post.

Web Installer FIPS Compliance

Our recent upgrade to the Web installer (Telerik Control Panel), includes support for Federal Information Processing Standards (FIPS) compliance. This improvement is designed to provide our clients with enhanced security, meeting the high standards required by industries and government agencies.

By implementing specific cryptographic algorithms and security protocols approved by the National Institute of Standards and Technology (NIST), FIPS compliance ensures the protection, integrity and confidentiality of your valuable data. We can now deliver a more secure installation process, giving you peace of mind and confidence in the safety of your information.

Enhanced Forms Rendering

Telerik UI brings a fresh and modernized approach to forms rendering and layout. With this latest update, we have revamped the forms rendering and layout in multiple UI components, including the Data Grid, TreeList, Scheduler, DateTimePicker and more. 

The enhanced forms rendering delivers a seamless and visually appealing experience to your users. By incorporating modern design principles and best practices, we have focused on improving the overall aesthetics and usability of forms within these components.

Telerik UI for Blazor

Stay ahead of the curve with our latest release of Telerik UI for Blazor, empowering you to create robust and visually stunning applications.

Introducing Blazor Hybrid: Uniting Web and Native Client Development

We’re happy to announce the official support for Blazor Hybrid in our upcoming R2 2023 release. Now, you can effortlessly create mobile and desktop applications while incorporating Telerik UI for Blazor components into your hybrid apps. Blazor Hybrid apps utilize HTML, CSS, C# and JavaScript, allowing for code sharing between web, desktop and mobile clients. Additionally, Blazor applications can be adapted for use with .NET MAUI, enabling integration with desktop and mobile platforms.

Explore the following materials to learn how you can seamlessly integrate Telerik UI for Blazor into your hybrid apps and take your development to the next level:

• Telerik UI: Blazor Hybrid
• eBook: Blazor Hybrid and Web in One Solution
• Blazor Power Hour: A look at BlazorHybrid
• The Blazor Power Hour: Testing Blazor Hybrid
• Telerik Blazor UI in Native Apps

New Blazor PivotGrid Component

We’re excited to announce the Telerik UI for Blazor PivotGrid component—an Excel-like experience for effortlessly processing, aggregating, visualizing and analyzing tabular and multi-dimensional data. This feature-rich UI component supports both local and remote data binding, along with essential functionalities like filtering, sorting and a configuration panel. Let’s explore the key features:

Organize and Summarize Pivot Data:

• Deliver an Excel-like experience by processing and analyzing tabular and multi-dimensional data.
• Supports data binding to an OLAP service, enabling interactive analysis.
• Offers extensive customization options for a tailored user experience.

Local and Remote Binding to OLAP Data Sources:

• Bind data to a local source or remote OLAP service via HTTP.
• Access aggregated and organized data from multidimensional structures (cubes).

Configuration Panel:

• Intuitive and customizable configuration panel like Microsoft Excel.
• Allows users to modify fields, apply filters and define pivot fields.
• Highly adaptable to match design needs, including custom component integration.

Sorting:

• Enable single or multiple column sorting in ascending or descending order.
• Supports sorting various data types.

Filtering:

• Provide flexible data display by enabling filtering based on specific criteria.
• Swift response with various filtering options, operators and predefined fields.
• Supports filtering via XMLA access to the OLAP Cube service.

See a demo of the UI for Blazor PivotGrid component.

New Blazor DropZone Component

Introducing the addition of the DropZone component to our Blazor toolkit. This component offers a user-friendly way for file uploads in Blazor applications. Users can easily drag and drop files onto a designated area on their screen, and the files will be automatically transferred to the file select/upload feature. Say goodbye to complicated file uploads and enjoy the simplicity and convenience of our new DropZone component.

See a demo of the UI for Blazor DropZone component.

Right-to-Left Support

We are happy to announce that Telerik UI for Blazor components now support right-to-left (RTL) languages! This feature is available in the latest 4.2.0 release of Telerik UI for Blazor and brings a range of benefits to developers building applications for audiences that read and write in RTL languages.

With the new RTL support, developers can easily create applications that cater to the needs of RTL language users, without having to manually modify the layout or styles. This means that components like grids, charts and dropdowns will automatically adjust their layout to support RTL languages. Additionally, text alignment, text direction and other layout features will be optimized for RTL languages, making it easier for users to navigate and interact with the application.

The RTL support in UI for Blazor can be turned on with a single property EnableRtl once at the TelerikRootComponent and that will let all of the components take advantage of the feature. More details and specifics for popups can be found in the UI for Blazor RTL support documentation article.

Enhancements in the FileSelect & Upload UI Components

Built-in Drag and Drop
The FileSelect and Upload components now have built-in drag-and-drop file support, courtesy of the new DropZone component. Enjoy the convenience of seamlessly dragging and dropping files, right from the start.

See a demo of the UI for Blazor FileSelect drag and drop support.

Data Grid & TreeList Enhacements

The R2 2023 release of Telerik UI for Blazor brings exciting updates to the DataGrid and TreeList components. These enhancements include new customization options and expanded configuration capabilities. Let’s dive into the key highlights:

Pager Template
Customize the appearance of pagers with ease. Utilize the Pager Template to replace the default pager with your own custom markup, tailored to your clients’ needs.

See how to customize the UI for Blazor TreeList component pager.

Popup Edit Form Template
Elevate the data entry experience by leveraging the Popup Edit Form Template. Enable GridEditMode.Popup for the Data Grid and TreeListEditMode.Popup for the TreeList to create custom content within the edit form. Customize form fields, validation rules and more.

DataGrid, TreeList, TreeView Performance Bump

We are delighted to share that our Blazor Data Grid, TreeList and TreeView components have undergone a remarkable performance enhancement. In the latest release, we have significantly minimized the re-rendering of content cells, ensuring it occurs only when absolutely required. As a result, our tests have shown a significant 40% reduction in component refresh time.

Although template cells will continue to re-render since they can contain arbitrary markup, we are confident that this improvement will have a tangible impact on the overall performance of the Blazor component’s usability.

Chart Enhancements

The latest release of Telerik UI for Blazor brings exciting enhancements to the Charts component, offering improved customization options and new features. Let’s explore the key additions briefly.

Position Configuration
Users can now position the Stock Chart navigator on top, providing a fresh appearance option alongside the existing bottom position.

See the Telerik UI for Blazor StockChart navigator demo.

Chart and StockChart Subtitle
The new subtitle property enables developers to add secondary or explanatory subtitles below the main chart title and style them differently for enhanced customization.

See the Telerik UI for Blazor Subtitle Property in Charts demo.

Format and Template Parameters for Axes in Blazor StockChart
The introduction of format and template options allows effortless customization of labels for ValueAxis, CategoryAxis and NavigatorCategoryAxis in the Blazor StockChart.

These enhancements in Telerik UI for Blazor Charts offer developers greater control over the appearance and functionality of their charts, enabling them to create visually stunning and interactive experiences.

Globalization and Localization

As part of this update, we are adding a new label to the components, displaying the text: “Drag and drop files here to upload.” To support localization and globalization, two new resource keys have been introduced: Upload_DropZoneHint and FileSelect_DropZoneHint.

Custom Content in SelectFiles Button

In this release, we’ve added templating support for the SelectFiles button in FileSelect and Upload components. Now clients can fully customize the button’s appearance, including the option to render icons, providing more flexibility and visual appeal.

FileSelect New Methods

The latest release of the Blazor FileSelect component introduces two new methods: ClearFiles and OpenSelectFilesDialog. ClearFiles enables removing files from the list programmatically, providing more control over the selection process. OpenSelectFilesDialog allows for opening the browser file selection dialog with a single API call.

Exposing Selected Items in File Manager

We have enhanced the Telerik UI for Blazor File Manager component to provide you with more flexibility in customization. With the latest update, the Blazor FileManager component now supports two-way binding of the selected items.

See the Telerik UI for Blazor FileManager expose selected items demo.

Window: Support for Footer

The footer section of the Telerik UI for Blazor Window component can now be customized according to your needs. Take advantage of the following parameters to fully utilize the Window footer:

• The WindowFooter parameter adds a new section at the bottom of the window.
• The FooterLayoutAlign parameter allows you to apply different styles to the buttons in the footer. Select from the available options (Start, Center, End and Stretched) and observe how they enhance the appearance of your application.

Combine Autogenerated & Custom Fields in the Form Component

This enhanced feature within the UI for Blazor Form component enables the simultaneous utilization of autogenerated form items alongside manually defined ones. It allows developers to make use of the autogenerated fields for the majority of their model fields, while still providing the flexibility to customize specific fields as needed.

See a demo of autogenerated and custom fields in the UI for Blazor Form component.

Customize the Map Component Marker Appearance

The Blazor Map component’s user interface (UI) now includes a templating functionality that simplifies the process of customizing the appearance of markers on the map. Developers have the ability to define their own HTML markup to style the markers according to their preferences.

See how to customize the UI for Blazor Map component marker.

Visible Parameter TileLayout Component Items

We have exposed a new parameter named Visible to control whether a given TileLayout item is visible or not.

See a demo of the items visibility in the UI for Blazor TileLayout component.

Print Method in the PDF Viewer Component

The UI for Blazor PDFViewer component now provides the ability to print the current document programmatically. By introducing the Print() method, developers now have a straightforward means to incorporate printing functionality into their Blazor applications that utilize the PDF Viewer component.

Add ThemeColor Parameter for Window & Dialog

A new parameter named ThemeColor has been added to the UI for Blazor Window and Dialog components. This feature enables easy customization of the title bar color for both components. It provides a range of selectable values such as “Primary,” “Dark,” “Light” or even an empty option for no color.

See an example the UI for Blazor Dialog ThemeColor options.

Refresh Method for All Select-Type Components

In this latest release, we are introducing a new method called Refresh to enhance our select-type UI components, including AutoComplete, ComboBox, DropDownList, MultiColumnComboBox and MultiSelect. The method allows you to easily refresh the popup of the selects and comes in handy when the popup remains open, but changes need to be applied.

Deprecation of .NET 3 and .NET 5 in Telerik UI for Blazor

Starting from R1 2024, we will no longer provide support for .NET 3 and .NET 5 in Telerik UI for Blazor. To ensure uninterrupted support and leverage the latest advancements, we highly recommend planning and initiating the migration of your projects to .NET 6 or later.

This strategic decision allows us to stay ahead of the curve, providing you with a robust and future-proof component library that keeps pace with the rapid advancements in web application development. Stay tuned for exciting updates as we embark on this journey together!

Telerik UI for ASP.NET Core and MVC

Discover the latest features and elevate your development experience with Telerik UI for ASP.NET Core and MVC!

New Template Component (CSP-Compatible)

Introducing the Template component in the Telerik UI for ASP.NET Core and MVC UI libraries! This new feature can be incorporated it into UI controls, which require complex layout templates like the Grid or the TreeList. Deliver smooth integration and strengthen security of your applications.

HTML and Tag Helpers
The Telerik UI for ASP.NET Core Template component provides support for both HTML and Tag Helper modes. The HTML Helper Template introduces these two options:

• AddComponent(), which is a method accepting any Telerik UI for ASP.NET Core HTML Helper component declaration
• AddHtml(), which is a method that accepts HTML code

If you’re leveraging the Tag Helper mode, you can easily integrate the UI control and HTML code within the <{parentTagName}-{templateOption}> tag.

See the documentation for the Telerik UI for ASP.NET Core Template component or the Telerik UI for ASP.NET MVC Template component.

DataGrid Enhancements

The latest release of Telerik UI for ASP.NET Core and MVC brings exciting enhancements to the DataGrid component, offering improved usability options and new features.

New Row Resizing Feature
Introducing the highly anticipated feature in the latest release of our Data Grid component: row resizing! Now, end users can resize rows and adjust their heights effortlessly. This new functionality allows for better visibility of cells with larger values while maintaining the integrity of the remaining rows in the Data Grid. Stay in control of your data presentation and provide a seamless user experience with the row resizing feature.

Compact Data Grid Mode
Introducing the Compact Grid, a new feature in the Telerik UI for ASP.NET Core and MVC Grid components! By utilizing the Size parameter configuration, the Compact Grid optimizes screen space by reducing padding and margins, resulting in a condensed and efficient data table. Now you can display more information at once, maximizing productivity.

The Compact Grid seamlessly integrates with our Default, Bootstrap, Material and Fluent themes, providing flexibility in design choices. Experience the power of data density with the Compact Grid feature.

See the demo for Telerik UI for ASP.NET Core Compact Grid or Telerik UI for ASP.NET MVC Compact Grid demo.

Scheduler Enhancements

Highlight Ongoing Events
We are pleased to announce the addition of the “highlight current events” functionality to our Scheduler component! Elevate your application’s user experience by easily indicating ongoing events in a visually distinct manner. With the simple configuration method of OngoingEvents, enabling this feature and customizing the refresh interval is effortless.

See the Telerik UI for ASP.NET Core Scheduler highlight ongoing events demo or the Telerik UI for ASP.NET MVC Scheduler highlight ongoing events demo.

Google Calendar Integration Demo
Many of you have been curious about how to incorporate our Scheduler component into Google Calendar, so we have prepared a demonstration. To assist you in implementing this integration, we have created a comprehensive how-to article and a sample project.

DateTimePicker Enhancement: StartTime and EndTime Options

R2 2023 welcomes the enhanced DateTimePicker component in Telerik UI for ASP.NET Core and MVC! Effortlessly configure start and end date/time values and easily manage time ranges.

See the start and end times demo for Telerik UI for ASP.NET Core DateTimePicker or for Telerik UI for ASP.NET MVC DateTimePicker.

Data Editing UX: Enhancements

We are delighted to introduce improved date editing options in the Telerik UI for ASP.NET Core DateInput component. These options offer greater flexibility and control when configuring the behavior of the component during date editing. Take advantage of the following configuration options:

• AutoSwitchParts: Automatically moves to the next segment after entering a valid value.
• AutoSwitchKeys: Configures a custom key to trigger moving to the next segment.
• EnableMouseWheel: Increases or decreases segment values using the mouse wheel.
• AutoCorrect: Automatically corrects the value if it falls out of range.
• Steps: Defines the increment and decrement steps for each available date segment.

See the editing demo for Telerik UI for ASP.NET Core DateInput or for Telerik UI for ASP.NET MVC DateInput.

Gantt: Popup Edit Form Improvements

In our latest release, we’ve made several updates to enhance the editing and customization capabilities of our Gantt UI component. Now you can fine-tune every aspect of the Gantt to meet your users’ preferences. Notable changes include:

• Reorganized Gantt edit popup form with tabs for easier navigation and editing of different sections.
• Expanded capabilities to configure and edit all data fields present in the Gantt.
• Streamlined editing of parent tasks directly from the task’s edit form, eliminating the need for separate sections.
• Integrated dependencies editing into the edit form, eliminating the need for a separate popup window.
• A new “Other” tab in the Gantt edit popup for editing custom fields, providing a cleaner and more organized experience.

See an example of the improved Gantt editing experience:

• Telerik UI for ASP.NET Core Gantt component demo
• Telerik UI for ASP.NET MVC Gantt component demo

Enhanced Demos with Adaptive Behavior

In the R2 2023 release, we focused on improving the UI components for ASP.NET Core and MVC to be more adaptable and responsive. Along with introducing new built-in settings, we made sure to showcase the adaptiveness of the components through our demos.

Telerik UI for ASP.NET AJAX

We are thrilled to share the new components and enhancements in Telerik UI for ASP.NET AJAX R2 2023 release.

New ArcGauge and CircularGauge Components

Easily represent value ranges on an arc shape using the powerful Telerik UI for ASP.NET AJAX ArcGauge component. This data visualization tool allows you to showcase progress toward a goal by defining minimum and maximum angles, ranging from 0 to 360 degrees.

Or enhance your data visualization with the Telerik UI for ASP.NET AJAX CircularGauge component. This versatile AJAX control allows you to represent values within a full-scale, 360-degree arc. It offers a compact and intuitive solution that seamlessly integrates into any web application.

Explore the features of these component through these demos:

1. Center template: Customize the appearance and behavior of the center label within the arc/circle using templates.
2. Scale customization: Tailor the visual properties of the component to meet your specific application requirements.
3. Color ranges: Assign different fill colors to values based on their significance, enhancing the meaning of the visualization.

See the Telerik UI for ASP.NET AJAX ArcGauge and CircularGauge in action.

Fixes and Improvements

In this release, we have made several enhancements in the Ajax, AutoCompleteBox, Button, Calendar, Captcha, Combobox, Editor, ListView, Signature and Treeview components. These improvements include adding support for the latest Chrome browser on iOS mobile devices and updating the W3C validator in the XHTML Validator dialog of RadEditor to the latest version.

Single Line RadAutoCompleteBox
Responding to customer feedback, we have introduced an additional mode for the RadAutoComplete component. Alongside the multiline option, you can now utilize the SingleLineEntries property to configure the AutoComplete feature. This new setting enables the display of all input provided in a single line input field with a horizontal scroll.

See a demo of the single line mode of the UI for ASP.NET AJAX AutoComplete component.

Integration demo for RadEditor and RadSignature
Take a look at the Signature Dialog demo to understand how you can incorporate handwritten signatures into a WYSIWYG (what you see is what you get) editor. This demo presents a signature pad that allows users to draw their signatures. Once users finish creating their signature, they can click on the “Store on Server as PNG and Insert” button. This action saves the signature as a PNG file and seamlessly inserts the image into the editor.

End of .NET 3.5-4.0 Support

Please note that R2 2023 SP1 on March 15 is the last version to provide support and assemblies for .NET Framework 3.5 and 4.0.

As of R2 2023, we will continue shipping assemblies compatible with .NET 4.5-4.8 versions of the framework. You can read more at: End of .NET Framework 3.5 and 4.0 Support for Telerik UI for ASP.NET AJAX.

Progress Telerik .NET Web, Desktop & Mobile Products R2 2023 Release Webinar | June 8

Discover all updates across Telerik UI for Blazor, UI for ASP.NET Core, UI for ASP.NET MVC, UI for ASP.NET AJAX, UI for WPF, UI for WinForms, UI for WinUI, UI for .NET MAUI and UI for Xamarin and ThemeBuilder.

Save Your Seat

Join Us on Twitch

Join the  Livestream Release Party on release day, June 7, 11 a.m. – 12:30 p.m. ET to hear the release news and hang out with dev friends.

The live webinars and Twitch sessions are a great opportunity for you to ask questions before and during the webinars. We’ll be waiting to hear from you on Twitter—just use the #heyTelerik and #heyKendoUI hashtags. Another great option is the live chat during our release session on CodeItLive, our Twitch channel.

In today’s world, where digitization has taken over every aspect of our lives, the need for signatures has not been eliminated. However, now instead of physically signing a document, we can use an electronic signature, which is quick, easy and secure. One popular way of doing this is to use a handwritten signature, which gives the electronic document a personal touch.

Progress Telerik UI for ASP.NET AJAX provides two useful components, RadSignature and RadEditor, that can be integrated to facilitate the inclusion of handwritten signatures to an HTML editor.

The Solution

In this blog post, I will showcase how to build a custom Signature dialog application scenario that integrates RadSignature and RadEditor. The demo allows users to insert a handwritten signature into a content area of the RadEditor.

The WYSIWYG editor control has a custom button called “Insert Handwritten Signature.” When clicked upon, it opens a dialog box that displays a signature pad. The user can leverage the signature pad to draw their signature. Once done, they can click on the “Store on Server as PNG and Insert” button to store the signature on the server as a PNG file and insert the signature image into the editor.

Let’s take a look at the code that makes this possible.

The default.aspx page contains the RadEditor control with the custom button defined inside the tool groups.

ASPX code snippet (HTML)

<telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" Width="800px">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="InsertSignature" Text="Insert Handwritten Signature"></telerik:EditorTool>
        </telerik:EditorToolGroup>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Bold"></telerik:EditorTool>
            <telerik:EditorTool Name="Italic"></telerik:EditorTool>
            <telerik:EditorTool Name="Underline"></telerik:EditorTool>
        </telerik:EditorToolGroup>
    </Tools>
    <Content>
        To sign up, simply click on the pencil icon above and use your mouse to handwrite your signature and insert it here.
    </Content>
</telerik:RadEditor>
<script>
    // Add custom command to the RadEditor command list
    Telerik.Web.UI.Editor.CommandList['InsertSignature'] = function (commandName, editor, args) {

        // Callback function to handle signature insertion after the dialog is closed
        var myCallbackFunction = function (sender, args) {
            // Insert signature image HTML into the editor
            editor.pasteHtml(String.format('<img src=\'{0}\' border=\'0\' style=\'width:50%;height:50%;\'  /> ', args.src));
        };

        // Show signature dialog as an external dialog
        editor.showExternalDialog(
            'InsertSignature.aspx',
            null,
            540,
            450,
            myCallbackFunction,
            null,
            'Draw and Insert Signature',
            true,
            Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
            false,
            true);
    };
</script>

The script placed below the editor declaration adds a custom command to the RadEditor command list. It shows the signature dialog as an external dialog, loads it with the InsertSignature.aspx page, and handles the signature insertion after the dialog is closed.

To style the custom button and visualize a font-icon over it add the following CSS class:

CSS snippet

.reTool.reInsertSignature.reToolIcon:before {
    content: "\e10b";
}
The InsertSignature.aspx page contains a RadSignature control that provides the signature pad functionality. The RadButton1 button stores the signature on the server as a PNG file and inserts the signature image into the editor. The RadAjaxManager1 control handles the AJAX request and updates the RadSignature1 control.
ASPX (InsertSignature.aspx)
        <telerik:RadAjaxManager EnableAJAX="true" ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
            <ClientEvents OnResponseEnd="OnResponseEnd" />
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadButton1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadSignature1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
            <ClientEvents OnResponseEnd="insertEmoticon" />
        </telerik:RadAjaxManager>
        <telerik:RadButton runat="server" ID="RadButton1" Text="Store on Server as PNG and Insert" AutoPostBack="false" OnClientClicked="sendToServer" />
        <br />
        <br />

        <telerik:RadSignature runat="server" ID="RadSignature1" Height="270" Width="400">
            <ClientEvents OnLoad="signatureLoad" />
        </telerik:RadSignature>

        <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
            <script>
                var signature;
                var fileName = "signature.png";

                function signatureLoad(sender, args) {
                    signature = sender;
                }

                function sendToServer(sender, args) {
                    if (!signature.get_value()) return;
                    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                    ajaxManager.ajaxRequest(fileName + ";" + signature.get_value());
                }

                //called when the OnResponseEnd of RadAjaxManager fires
                function insertSignatureImage(sender, args) {
                    signature.set_value('');
                    var closeArgument = {};
                    //asign the imageSrc which comes from the server to the src argument
                    closeArgument.src = imageSrc;
                    //closes the dialog and submit the src to the myCallbackFunction function on the main page
                    getRadWindow().close(closeArgument);
                }
            </script>
        </telerik:RadScriptBlock>

In the section below, we continue discussing the code behind the signature dialog, and more specifically the server-side code that handles the AJAX request and saves the signature as a PNG file on the server.

C# (InsertSignature.aspx.cs)

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
    {
        // Split the argument received into two parts, separated by a semicolon.
        var args = e.Argument.Split(new[] { ';' }, 2);
        // Get the filename from the first part of the argument.
        var fileName = args[0];
        // Get the base64-encoded image data from the second part of the argument and extract the image string
        var base64raw = args[1];
        var base64data = base64raw.Split(',')[1];

        // Check if the size of the received data does not exceed 200KB and is a valid base64 image.
        var isSizeValid = (Encoding.UTF8.GetByteCount(base64raw) < 200000);
        var isImageString = base64raw.StartsWith("data:image/png;base64");

        // If the received data is a valid image string, save the image to disk.
        if (isImageString && isSizeValid)
        {
            // Generate a unique filename by appending a GUID to the original filename.
            var fileNameGuid = Guid.NewGuid() + "_" + fileName;

            // Get the full path to the images folder and append the unique filename to it.
            var path = Server.MapPath("~/Editor/Examples/SignatureDialog/Images") + "\\" + fileNameGuid;

            // Convert the base64 data to bytes and write it to the specified path.
            System.IO.File.WriteAllBytes(path, Convert.FromBase64String(base64data));


            // Create a script to be registered with the page that sets the image source to the saved image file.
            string script = string.Format("var imageSrc ='https://www.telerik.comImages/" + fileNameGuid + "';");

            // Register the script with the page so that the imageSrc gets available in the insertEmoticon client function
            ScriptManager.RegisterStartupScript(Page, typeof(Page), "myscript", script, true);
        }
    }

Let’s go through the code above.

The RadAjaxManager1_AjaxRequest event handler is where the magic happens. This handler is called when the “Store on Server as PNG and Insert” button is clicked. The e.Argument parameter tells us what the purpose of the AJAX request is. In this case, the value will be the image file name and the base64 data coming from the exported signature drawing.

We start by getting the signature image from the RadSignature control as a byte array. We then generate a random file name with a .png extension and save the signature image as a PNG file on the server. Note that we are saving the image to a folder called “Images” in the root of our application. You can change this folder to one of your preference.

Next, we construct a RegisterStartupScript response to return the path for the saved signature image to the main page. We use the ScriptManager.RegisterStartupScript method to add JavaScript code to the callback function on the main page. This code calls the insertSignatureImage function on the main page, passing the path to the saved signature image as a parameter.

The insertSignatureImage is also responsible for inserting the signature image into the RadEditor’s content area at cursor position.

Conclusion

In this blog post, we have showcased how to integrate the RadSignature and RadEditor for Telerik UI fo ASP.NET AJAX components to provide a signature pad dialog that allows users to insert a handwritten signature into a content area of the editor. We have discussed the code for the main page and the signature dialog, as well as the server-side code that handles the AJAX request and saves the signature as a PNG file on the server.

I hope you have found this blog post useful and informative. If you have any questions or feedback, please leave a comment below. Thank you for reading and happy coding!

Try out the Telerik UI for ASP.NET AJAX RadEditor and RadSignature Today

Want to start taking advantage of the ASP.NET AJAX RadEditor and RadSignature components, or any of the other 120+ ready-made controls, like the Grid or the Scheduler? Start a free trial today and experience for yourself that building Web Forms apps for any browser and device in half the time is a piece of cake.

Try Now

In the world of digital signatures, the ability to sign PDF documents is a game changer. And with the RadSignature component from Progress Telerik UI for ASP.NET AJAX, this process has never been easier!

Read on to find out how to effortlessly save a signature within a PDF file using the Telerik Document Processing Libraries (DPL) and to present the signed document in the RadPdfViewer control.

Whether you’re a developer wanting to integrate a digital signature into your project, or just looking to explore the world of digital signatures, this blog post is the perfect starting point.

Join us as we show you how to:

• Extract applied signature as PDF
• Create a new PDF document that includes your signature
• Load the signed document in a PdfViewer

With the help of Telerik UI for ASP.NET AJAX, we’ll demonstrate how to convert the signature content to PDF and base64 string representation. And the best part—you can preview the PDF file using the built-in RadPdfViewer, and even save the new document with the click of a button. So why wait? Let’s dive into the world of digital signatures and explore the possibilities with RadSignature for ASP.NET AJAX.

Prerequisites

Let’s start with declaring the needed controls on the page:

1. RadSignature is needed to apply the signature that we want to transfer to the PDF file.

ASPX

<telerik:RadSignature  runat="server"  ID="RadSignature1"  Maximizable="false"  Height="150"  Width="100%"  Rounded="None"></telerik:RadSignature>

2. RadPdfViewer is needed to display the PDF file that we are currently working on while exposing some of its useful built-in features such as zoom, download, print, search, toggle selection and paging.

ASPX

<telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" Height="700px">
    <PdfjsProcessingSettings>
        <FileSettings Url="Documents/Document.pdf" />
    </PdfjsProcessingSettings>
</telerik:RadPdfViewer>

In this sample, we are passing the unsigned PDF file by a relative path through the FileSettings of the PdfViewer. Yet, there are multiple other ways you can populate the Viewer. The most common ones you can find explained in the 5 Different Approaches of Setting up the Content in RadPdfViewer for ASP.NET AJAX blog post.

3. RadToolBar contains the needed buttons and color pickers which enable the users to customize the Signature appearance and align it to their personal preferences on their own.

ASPX

<telerik:RadToolBar runat="server" ID="RadToolBar1" AutoPostBack="false" OnClientButtonClicked="clientToolBarButtonClicked">
    <Items>
        ...
    </Items>
</telerik:RadToolBar>

The ToolBar is not under the spotlight now, so we will not dig into its details now. It is here just to sweeten the UX of the demo.

4. RadButton is needed to trigger the whole process prior to signing the document and previewing it.

ASPX

<telerik:RadButton  runat="server"  ID="RadButton1"  Text="Place Your Signature"  Icon-PrimaryIconCssClass="rbSave"  AutoPostBack="false"  Primary="true"  OnClientClicked="processSignature"  />

Not all heroes wear capes, right? Just like that, not all components are on the front stage—some stay behind the scenes but are still needed:

5. RadClientExportManager is required to export the applied signature into a PDF format and get its data as a base64 string.

ASPX

<telerik:RadClientExportManager  runat="server"  ID="RadClientExportManager1"  OnClientPdfExporting="clientPdfExporting"></telerik:RadClientExportManager>

6. RadAjaxManager is there to improve the user experience by performing AJAX requests for passing the signature to the server and the manipulated pdf back to the browser.

ASPX

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadPdfViewer1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

7. RadAjaxLoadingPanel is needed to display a progress indicator graphic while processing the data on the server-side.

ASPX

<telerik:RadAjaxLoadingPanel  runat="server"  ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>

Alongside all the above-mentioned components, we will also need to reference the Telerik Document Processing Libraries (DPL) and specifically the RadPdfProcessing library assemblies necessary for manipulating the content of a PDF file. Find the list of the .dll files required for the RadPdfProcessing in the dedicated documentation page.

Once we have the components defined, the DPL referenced and the unsigned PDF loaded in the view, we can go ahead with the logic.

I bet you’ve noticed that the event handlers we are going to use are already defined in the control snippets above. So, let’s go through the process after the user has applied their signature and clicks the blue “Place Your Signature” button.

Extract Applied Signature as PDF

The OnClientClicked event of the button fires upon clicking the blue button. In its listener, we can get the canvas element with the applied signature with a bit of jQuery help, and also get the ClientExportManager client-side control. Via the exportToPdf() method of the export manager we can trigger exporting the canvas to a pdf:

JavaScript

processSignature = function (sender, args) {
    //get the ClientExportManager client-side control object
    var clientExportManager = $telerik.findControl(document, "RadClientExportManager1");
    //get the canvas element holding the applied signature
    var signatureElement = $(".k-signature-canvas > canvas");
    //trigger exporting to pdf procedure via the built-in method of the ExportManager
    clientExportManager.exportPDF(signatureElement);
}

After that, the OnClientPdfExporting event of the export manager fires. Here we can get the PDF representation of the signature as a base64string directly from the event arguments (get_dataURI()). Get the AJAX manager and send an AJAX request to the server with the signature data optionally along with a custom file name:

JavaScript

clientPdfExporting = function (sender, args) {
    //get the base64string of the pdf passed for exporting
    var dataRaw = args.get_dataURI();
    //get the RadAjaxManager control object
    var ajaxManager = $telerik.findControl(document, "RadAjaxManager1");
    var fileName = "signature.png";
    //send an ajax request to the server with the signature data and the filename
    ajaxManager.ajaxRequest(fileName + ";" + dataRaw);

    //prevent further execution of the built-in exporting logic of the ExportManager
    args.set_cancel(true);
}

Once the request reaches the server, the AjaxRequest event of the RadAjaxManager fires. There we can get the base64 string of the signature and pass it to the function responsible for generating a signed PDF. Finally, pass the base64 string representation of the signed PDF as content of the PdfViewer.

C#

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    var base64 = e.Argument.Split(',')[1];

    RadPdfViewer1.PdfjsProcessingSettings.FileSettings.Data = PreparePdf(base64);
}

Create a New PDF Document That Includes Your Signature

Let’s explore the exact purpose of the PreparePdf() method.

With the help of the Document Processing Libraries (DPL), we can easily generate an all-new copy of the unsigned PDF document that we have. Then we can append the signature content we already extracted into the new Pdf document at a desired position.

C#

public string PreparePdf(string pdfData)
{
    byte[] resultingBytes = null;
    byte[] finalBytes = null;

    //initialize a PdfFormatProvider that will be used for processing the pdf conent
    PdfFormatProvider provider = new PdfFormatProvider();

    byte[] renderedBytes = Convert.FromBase64String(pdfData);

    RadFixedDocument document1 = null;
    //generate a RadFixedDocument object holding the signature data
    RadFixedDocument document2 = provider.Import(renderedBytes);

    //import the existing unsigned pdf file in another RadFixedDocument 
    string filePath = Server.MapPath("Documents/Document.pdf");
    using (FileStream input = new FileStream(filePath, FileMode.Open, FileAccess.Read))
    {
        document1 = provider.Import(input);
    }

    //export the unsigned pdf as byte array
    using (MemoryStream ms = new MemoryStream())
    {
        provider.Export(document1, ms);
        resultingBytes = ms.ToArray();
    }

    //pass the byte array of the unsigned pdf and the RadFixedDocument with the applied signature to method that will combine them in a single byte array
    finalBytes = AppendContent(resultingBytes, document2);

    //convert the result to a base64 string and return it so it can be passed as content of the PdfViewer
    string result = Convert.ToBase64String(finalBytes);
    return result;
}

The actual manipulation of the PDF content happens in the AppendContent() method. Its logic heavily relies on the functionalities exposed by the RadPdfProcessing library:

C#

private byte[] AppendContent(byte[] resultingBytes, RadFixedDocument document2)
{
    RadFixedPage foregroundContentOwner = document2.Pages[0];

    MemoryStream ms = new MemoryStream();
    byte[] renderedBytes = null;
    using (MemoryStream stream = new MemoryStream(resultingBytes))
    {
        using (PdfFileSource fileSource = new PdfFileSource(stream))
        {
            using (PdfStreamWriter fileWriter = new PdfStreamWriter(ms, true))
            {
                foreach (PdfPageSource pageSource in fileSource.Pages)
                {
                    using (PdfPageStreamWriter pageWriter = fileWriter.BeginPage(pageSource.Size, pageSource.Rotation))
                    {
                        pageWriter.WriteContent(pageSource);

                        using (pageWriter.SaveContentPosition())
                        {
                            double xCenteringTranslation = (pageSource.Size.Width - foregroundContentOwner.Size.Width) - 320;
                            double yCenteringTranslation = (pageSource.Size.Height - foregroundContentOwner.Size.Height) - 110;
                            pageWriter.ContentPosition.Translate(xCenteringTranslation, yCenteringTranslation);
                            pageWriter.WriteContent(foregroundContentOwner);
                        }
                    }
                }
            }
        }
    }
    renderedBytes = ms.ToArray();
    return renderedBytes;
}

We will not go through each separate class and method of the DPL that is used, but I highly recommend spending some time getting familiar with the RadPdfProcessing Model and Concepts.

Everything written here is live and accessible in this demo. Go on and give it a try right away!

If you like what you see, you can further play with the RadSignature in the online demos or download its absolutely free and fully functional trial and give it a spin.

We value any feedback and the community voice, which you can share at the Feedback Portal too.

Start a Free Trial

Common Release Items

Accessibility Improvements

Ensuring the accessibility (A11Y) of all user interface components has been a priority for Telerik in recent years. The R1 2023 release of Telerik UI libraries includes enhancements to attributes and keyboard navigation to meet compliance standards such as WAI-ARIA, Section 508 and WCAG 2.1.

Additionally, the release includes updated documentation and demos focused on accessibility, as well as updated VPAT templates. To learn more about the specific A11Y improvements in each of the Telerik UI libraries (UI for Blazor, UI for ASP.NET Core, UI for ASP.NET MVC, UI for ASP.NET AJAX) please refer to the relevant product section below.

CSP Compliance

Pursuing the goal to be Content Security Policy (CSP) compatible and ultimately ensure strict CSP compliance for all Telerik and Kendo UI products, we have taken the first step in R1 2023 by removing any “eval” and “new Function” usages within our Kendo UI for jQuery source code with dynamic functions that are CSP compatible. Additionally, we have rewritten internal usages within the Kendo UI Templates. To ensure your template and apps are CSP compatible, check out the updated articles:

• Kendo UI for jQuery CSP templates
• Telerik UI for ASP.NET Core CSP Compliance
• Telerik UI for ASP.NET MVC CSP Compliance

Telerik UI for Blazor also remains CSP compliant with minor exceptions that will be improved in a future version. Read more details in the dedicated CSP compliance article.

Day 0 Support for .NET 7

Earlier in November we announced Day-Zero support for .NET 7 for Telerik UI for Blazor and UI for ASP.NET Core with the goal to let all our customers upgrade and take immediate advantage of the new features and performance improvements.

ThemeBuilder Pro

Custom Fonts Support

ThemeBuilder allows you to upload, use and manage custom fonts and font icons. You can use custom fonts to match your company style guide and create a unified experience across the application. Using custom font icons comes with a visual icon picker that enables you to screen faster over all available icons and pick the correct one instead of remembering each by name or code.

New in Telerik Document Processing Library

As we do with every release, we added new features to Telerik Document Processing Library, and customers of all Telerik UI libraries (web, desktop and mobile) can use them in their applications.

New Search API in the RadPdfProcessing Library

The updated search API offers the capability to search for specific text within PDF files, utilizing various methods to tailor search criteria and even searching using regular expressions. The search results provide the page and location of the searched text. For more information on this feature, please refer to the Document Processing Search section in our documentation.

Table of Contents in RadWordsProcessing

The table of contents—TOC and TC—fields enable you to dynamically include a table of contents in your documents through the use of various switches. Additionally, the table of authorities—TOA and TA—fields now provide support for adding tables of authorities to your documents as well. All supported fields can be viewed in the RadWordsProcessing Fields Overview section of our documentation.

New Encryption Mode Is Supported in the RadPdfProcessing Library

We have included support for Encryption Algorithm 5 with AES 256, which is a highly requested feature. Below is the list of encryption algorithms currently supported:

• For import: RC4 (V2), AES-128 (AESV2), AES-256 (AESV3)
• For export: RC4 (V2), AES-256 (AESV3)

The encryption algorithm can be managed using the EncryptionType property. For more information, please refer to the PDF Processing Export Settings.

Telerik UI for Blazor

New Blazor Signature UI Component

The new Signature component in Telerik UI for Blazor enables end users to easily add signatures to forms or PDF documents in Blazor applications. Users can draw their signature using a mouse or touch device, and take advantage of built-in configuration options such as canvas options, stroke width, size, color, background configuration, and read-only state.

To see an example of how to place a signature in a Blazor form, or to try out the Signature component, check out Telerik REPL, our browser-based code runner.

New Blazor Avatar UI Component

The new UI for Blazor Avatar component is an ideal solution for displaying small photos, custom icons, avatars or initials for entities in your applications. It is widely used for building forms, profile pages, navbar menus and other similar scenarios.

With its exposed appearance configuration options, the Avatar component can be easily integrated and customized to fit any application design. You can change its size, roundness, fill mode and coloring to match the desired look and feel.

The component also provides built-in size options like small, medium and large and also allows custom width and height settings to accommodate any design requirements. The Rounded parameter gives flexibility to adjust the avatar shape from rectangular to a complete circle. Additionally, the ThemeColor parameter can be set to various options to match the color scheme of the page.

See the demo of the Telerik UI for Blazor Avatar component.

New Chip and ChipList UI Components

With this update, we are happy to introduce the UI for Blazor Chip and ChipList UI components.

The Chip component is a compact form of a complex piece of information, including text, avatars, images, letters and close icons that can be clicked or removed, and it offers various styling options.

The ChipList component is used to manage a collection of Blazor Chip components, with the ability to data bind and manipulate a list of Chip elements. These components are commonly used for tasks such as tagging contacts and mail inboxes, selecting single or multiple options, and providing input to an application.

Both components offer multiple appearance configuration options (FillMod, RemoveIcon, Rounded and Size) and built-in keyboard navigation support.

See example of UI for Blazor Chip and ChipList components.

New Font Icon Component

The new Telerik UI for Blazor Font Icon component allows for the display of either built-in Telerik Blazor font icons or custom font icons.

The configuration parameters include:

• The ability to set the flip direction of the icon
• The option to select from the built-in Telerik Blazor font icons or to provide a custom CSS class for a third-party icon
• The ability to set predefined icon sizes with the option to use raw strings or the properties of the static ThemeConstants.Icon.Size class
• The option to set predefined icon colors with the default being the inheritance of the current CSS text color using the properties of the static ThemeConstants.Icon.ThemeColor class

New SVG Icon Component

The Telerik UI for Blazor SvgIcon component allows the display of either built-in Telerik Blazor SVG icons or custom SVG icons.

The parameters available for customization include:

• The ability to set the flip direction of the icon
• The option to use a built-in Telerik Blazor font icon by assigning a property of the SvgIcon static class or by implementing a custom SVG Icon class
• The ability to set predefined icon sizes with the option to use raw strings or the properties of the static ThemeConstants.Icon.Size class
• The ability to provide the HTML markup for a custom SVG icon
• The option to set predefined icon colors using the properties of the static ThemeConstants.Icon.ThemeColor class.

Compact Data Grid and Sizing Options

The Data Grid in UI for Blazor allows for customization of its density to improve visibility on smaller devices or to show larger volume data via its new Size parameter which supports two values—Small and Medium.

To achieve a compact data grid appearance, you can change the Size parameter to Small. This will decrease the padding in cells and also affect the inner components such as the Toolbar, Pager and editors, making them smaller and consistent with the overall styling of the UI for Blazor Data Grid.

See an example of smaller size UI for Blazor (compact Data Grid).

Telerik REPL for Blazor: Saving Your Own List of Code Snippets

The browser-based code runner Telerik REPL for Blazor has been enhanced with a very handy feature which allows you to save code snippets and easily reference them for future usage.

In order to add a snippet to “User Snippets” list, you need to either login with your Telerik account (existing users) or register and create a new one. Saving a snippet to your list occurs automatically once you are finished creating it and hit the share button. You can then give it a meaningful name, search, sort or remove it from the list.

Adaptive Rendering in Multiple Components

The adaptive and responsive UX of the UI for Blazor library has always been a focus and in the R1 2023 we ensured mobile-friendly rendering of all Date and Time picker and select-type components. The adaptive behavior can be provided via the new AdaptiveMode parameter which was added to the DatePicker, DateTimePicker, TimePicker, DateRangePicker, AutoComplete, ComboBox, DropDownList, MultiColumnComboBox and MultiSelect components for Blazor.

When set to Auto, the components will adjust their rendering based on the current screen size. Additionally, when in auto-adaptive mode, the DateTime pickers and select-type components will allow you to specify the title text that appears in the header of their pop-up window.

New Features in Scheduler Component

Scheduler OnCellRender Event

The OnCellRender event in the Scheduler component allows you to dynamically customize the slot cells. It is activated when each cell is rendered, and it enables you to add a custom CSS class to specific slots based on the event arguments. You can use the OnCellRender event in all the Scheduler views, both in the horizontal and vertical orientation.

See an example of how to customize Scheduler component slots.

Custom Scheduler Slots

In addition to the customization capabilities of the OnCellRender event, we have also shipped a Scheduler SlotTemplate feature which allows you to add custom content including text and icons.

See how to render arbitrary content in Scheduler appointments using the slot template feature.

Pager Position in Multiple UI Components

The UI for Blazor Data Grid, TreeList and ListView components have been enhanced with a new PagerPosition parameter (e.g., <GridPagerSettings Position="@PagerPosition.Top"), which allows you to easily configure the location of the Pager component within them to top or bottom. The Pager customization feature within the data-bound components is added to the already existing options to define page numbers, page size and page input type.

Sizing Options for Multiple Components

You can now customize the appearance of the UI for Blazor Toolbar, Pager and Form components using the new Size parameter. It allows you to configure the dimensions to “Small,” “Medium” or “Large.”

See example of UI for Blazor Toolbar Sizing options.

Enhanced Date Editing UX

In R1 2023 we introduced multiple enhancements and features related to the date and time UI components for Blazor, namely the DateInput, DatePicker, DateRangePicker, DateTimePicker and TimePicker. In the section below we will review in detail what’s new on a per feature basis.

Auto-Tabbing Improvements

As user preferences and behavior differ when working with dates, we implemented a configuration option that controls the auto-tab behavior when editing year, month and date values. The configuration can be achieved using the two new properties:

• AutoSwitchParts – defines whether to switch to the next date segment when the current one is completed.
• AutoSwitchKeys – the default behavior for navigating with arrows remains, but the AutoSwitchKeys allows you to specify the keys/key codes which the end user should press in order to jump to the next date segment. The purpose of this property is mainly focused to allow users to type separators and dates with format “1/31/2022” instead of “1312022.”

The auto-tabbing configuration properties are available for the following list of UI for Blazor components: DateInput, DatePicker, DateRangePicker, DateTimePicker and TimePicker.

Support for Copy & Paste in DateTimePickers

The UX of the DateTime pickers has been further enhanced with a handy option to copy and paste date format into the components. The feature is available for the following list of UI for Blazor components: DateInput, DatePicker, DateRangePicker, DateTimePicker and TimePicker.

A note on supported scenarios: The date input and pickers support pasting of values that match the format and pasting of date segments that match the date segments of the format, but content that does not match the format will not be processed.

Two-Year Digit Format

The DateInput, DatePicker, DateRangePicker and DateTimePicker components have a new property called TwoDigitYearMax, which makes it easy for users to enter dates in two-digit year format. The value set for TwoDigitYearMax determines the highest year that will be assumed to be from the current century when a two-digit year is typed. The default setting is 68, meaning that any number less than 69 will be interpreted as 20xx, while numbers 69 or greater will be assumed to be from the 19xx century.

Auto-Correction of Invalid Dates

Until recently, the default behavior was when a user types in a date like “31/January/2023” and then changes the month to February, the day would automatically switch to 28 (since February only has 28 days). However, we received feedback from you that there are cases when you need to disable this automatic correction so that the user can continue editing the date and manually change the day part of February.

The new property AutoCorrectParts gives you control over the date auto-correction UX. Its value specifies whether the date parts should be automatically corrected to show a valid date or not. The default value is “true,” meaning that the automatic correction will occur. By setting it to “false,” you will allow users to be able to see “31/Feb/2023” in the input field, but the component value can not be set to this and will be either null or default to the value for the DateTime.

The new AutoCorrectParts feature is available for the following list of UI for Blazor components: DateInput, DatePicker, DateRangePicker and DateTimePicker.

Caret Mode

We have introduced one more property called AllowCaretMode which gives users more flexibility when working with dates. The AllowCaretMode allows users to input date and time using a caret to move through separate date segments (instead of selecting) and this property controls whether this is an option or not. It also specifies if a caret can be displayed during input for certain date segments—for example, if months are represented as words instead of numbers, it can’t be applied.

No Data Template in Multiple Components

Until now, if you needed to customize the content of an empty list in a select-type component you could only achieve change in the text via localization. With the new NoDataTemplate feature you can now display custom content in the Telerik UI for Blazor DropDownList, ComboBox, AutoComplete, MultiSelect and MultiColumnComboBox components.

See an example of the UI for Blazor ComboBox no data template.

Blazor TreeView OnItemRender Event

We exposed a new event called OnItemRender in the Blazor TreeView component, which is triggered when each of the cells are being rendered. The OnItemRender event allows you to have full control over what content and how you would like to be displayed in the tree view items including their read-only state.

See the complete list of the available events in the UI for Blazor TreeView component.

Accessibility Improvements

We continue our efforts for ensuring the highest level of accessibility compliance of the Telerik UI for Blazor library. In the current release we improved the WAI-ARIA attributes and keyboard navigation in the Data Grid filter and column menus, as well as the TreeList filter menu. We have also added an AriaLabel parameter across all input-based components.

To raise the level of AY11 compliance even higher, we shipped a new color swatch called Ocean Blue A11Y (an enhanced version of the already existing Ocean Blue) which addresses corner cases for color contrast in several UI components.

In addition to the A11Y features, we also provided detailed documentation for the WAI-ARIA attributes of each UI for Blazor component allowing you to easily reference the available attributes.

See an example of WAI-ARIA reference documentation article for the UI for Blazor AutoComplete component.

Form OnUpdate Event

The Blazor Form component now exposes OnUpdate event, which is triggered after a change in any of the editors is initiated. The new event further expands the existing ones, OnSubmit, OnValidSubmit and OnInvalidSubmit, which allow you to respond to user actions and provide custom logic.

Read more about the available events in the UI for Blazor Form component.

Week Number in DateTimePickers

The new property ShowWeekNumbers in the UI for Blazor Calendar, DatePicker and DateTimePicker components allows you to easily display to users the respective week number. By setting the ShowWeekNumbers property to true, a new column is added to the left-hand side of the calendar indicating the week number.

See how to add a week column in the UI for Blazor Calendar component.

Support for SVG icons

As of R1 2023, the Telerik UI for Blazor library offers a wide selection of Scalable Vector Graphics (SVG) icons in addition to the previously available font icons, giving developers more options to choose from.

SVG icons are vector images defined in an XML format, which allows for easy scalability and customization. They can be used in webpages to display vector graphics and offer advantages such as sharp rendering at all resolutions, flexibility in controlling individual parts with CSS, and accessibility through semantic elements and attributes.

Read the documentation article for more information about the available icon options in UI for Blazor.

RadioGroup New Item Template

Another component that now allows rendering of custom content instead of just text is the Telerik UI for Blazor RadioButtonGroup component. Using the new radio group ItemTemplate feature, you can add icons, styles and special formatting in the radio buttons of your Blazor apps.

Telerik UI for ASP.NET Core and MVC

TimeDurationPicker UI Component

The new Telerik UI TimeDurationPicker component for ASP.NET Core and ASP.NET MVC enables users to select a duration period. As a developer, you can determine the number of columns, specify the format for each of them, constrain the allowed selectable values and add shortcut buttons for repetitive durations.

The TimeDurationPicker component differs from the other time-based pickers that Telerik UI offers in that it does not care about what the current time is, and no date needs to be involved. Instead, the new ASP.NET Core/MVC TimeDurationPicker focuses just on a single time duration.

The Time Duration Picker comes also with built-in keyboard navigation support, multiple events that let you handle the business and UX logic, plus various appearance customization options such as size, fill mode and border radius.

See the UI for ASP.NET Core TimeDurationPicker component demo.
See the UI for ASP.NET MVC TimeDurationPicker component demo.

GridLayout & StackLayout UI Components

The new GridLayout and StackLayout UI components will help you easily arrange HTML elements in a grid or a horizontal/vertical stack.

These components simplify the creation of layouts in web applications and help developers migrate from desktop to the web since they mimic the GridPanel and StackPanel components used in Windows development.

The GridLayout allows you to lay components out on a grid consisting of rows and columns. The columns and rows of the grid serve as coordinates that are used for laying out components on the grid. Typically a component only occupies a single cell of the grid.

See a demo of UI for ASP.NET Core GridLayout component.
See a demo of UI for ASP.NET MVC GridLayout component.

The Telerik StackLayout component allows you to easily align vertically or horizontally multiple elements in a stack. It includes different orientations, alignments, spacings and other handy options.

See a demo of UI for ASP.NET Core StackLayout component.
See a demo of UI for ASP.NET MVC StackLayout component.

Chip and ChipList UI Components

The Chip and ChipList UI components are more new additions to the Telerik UI for ASP.NET Core and ASP.NET MVC libraries. Commonly, Chip and ChipList components are used as tags when adding/removing contacts and mail inbox, selecting single or multiple choices from available options, and providing input to an application.

The Chip component enables user input and verifies that input by converting text into chips. The Chip provides a compact way to display complex information, including text, avatars, images, letters and close icons. It is clickable and removable, and offers various styling options.

The ChipList component is also included in this update. It is used to manage a collection of Chip components, providing data binding and manipulation options for a list of Chip elements.

See an example of the Telerik UI for ASP.NET Core Chip and ChipList UI components.
See an example of the Telerik UI for ASP.NET MVC Chip and ChipList UI components.

Floating Label in Input and Select-Type Components

In the current update, we enhanced multiple select and editor-type UI components with a shiny new floating label property. By setting it to true, the label will “float” above the component when it is focused. The new floating label feature is available in the following list of components:

ASP.NET Core & MVC Select-Type UI Components:

• DropDownlist floating label demo
• ComboBox floating label demo
• MultiSelect floating label demo
• AutoComplete floating label demo
• DropDownTree floating label demo
• MultiColumnComboBox floating label demo

ASP.NET Core & MVC Date Inputs & Pickers

• DateInput floating label demo
• DatePicker floating label demo
• DateTimePicker floating label demo

Signing PDF File with Signature UI Component

We improved the demos for the Signature component in UI for ASP.NET Core and MVC to include the popular use case of signing PDF documents within web applications. Using the Telerik Document Processing Libraries, you can extract the PDF file to memory, add the signature and create a new PDF document. The Telerik UI for ASP.NET Core PDFViewer component allows you to easily display the final document to the user, including options to download and save the document with the added signature.

See examples of how to place a signature in a PDF File using the UI for ASP.NET Core Signature component and the UI for ASP.NET MVC Signature component.

ECMAScript Modules (ESM) Support

We transformed the source code from AMD to ECMAScript modules (ESM), bringing actual benefits from the ESM modules to Kendo UI for jQuery, Telerik UI for ASP.NET Core and MVC server wrappers as well.

If you are relying on the AMD modules, you can continue using them as we managed to come up with a solution that allows moving to the new ESM module system without breaking changes for anyone who might want to continue AMD/UMD modules with the Kendo UI bundles distributed.

You can learn why we transformed our own source code from AMD to ECMAScript modules and see how you can use dynamic script imports with modern browsers and get huge benefits in your applications.

Charts Enhancements

Label Support for Bullet Charts

You can now easily add labels to each of the data series within the Bullet Chart UI component. Furthermore, you can configure its visibility, apply background formatting and even render custom content by using templates.

Subtitle Support for All Charts

Another enhancement to the DataViz library is the ability to add an additional title (subtitle) below the chart title and apply individual style to it.

See how to configure the Chart Title and Subtitle properties.

Accessibility Improvements

The specific WAI-ARIA accessibility improvements in R1 2023 for Telerik UI for ASP.NET Core and MVC are numerous, so here are a few UI components: Menu, Context Menu, ListBox, Drawer, ScrollView, ListView and more.

Deprecation of LESS Themes

Last year with R1 2022 we announced that Kendo UI for jQuery, Telerik UI for ASP.NET MVC and Telerik UI for ASP.NET Core would be moving completely to the Sass-based Default, Bootstrap, Material and Fluent themes. This means that the LESS themes, created when LESS was the most popular CSS pre-compiler (this is no longer the case), are officially going to be deprecated.

Well, the day is here, and R1 2023 is the last version of Kendo UI for jQuery, Telerik UI for ASP.NET MVC and Telerik UI for ASP.NET Core will support the LESS-based themes.

Thanks to the hard work done over the last year or so, R1 2023 contains a lot of new features and components, and lots of improvements to the LESS themes. This should give teams that have been hesitant about the migration a stable release to hold out on until they can make the change to the Sass-based themes.

Telerik UI for ASP.NET Core Specific

New E-Shop Demo App

We have a brand-new e-shop demo app that illustrates the usage of Telerik UI components within a ASP.NET Core application. The app showcases the most common use cases related to e-shops—product list, product details, shopping basket, user profile, sophisticated product filters, and on top of that we have also included integration with Telerik Reporting to demonstrate how easy it is to generate order invoices or print product catalogs.

The application is built entirely with Telerik UI for ASP.NET Core components such as Data Grid, Scroll View (also known as Carousel), Slider, Rating, Card, Checkbox Group, Buttons and more. The styling is powered by the new built-in Fluent theme which is available for all Telerik and Kendo UI components.

See the new e-shop demo app with Telerik UI for ASP.NET Core components with Fluent theme.

Localization Configuration in Project Templates

As of the R3 2022 SP2 release, we have added localization capabilities to the Visual Studio Templates for Telerik UI for ASP.NET Core. This gives you an option to enable or disable the templates localization in the Telerik Visual Studio Extensions Project Wizard.

By default, the UI for ASP.NET Core components display their messages in English. If the localization is enabled in the Project Wizard, a dropdown is rendered in the respective Visual Studio Templates startup page.

You can use it to select a different language, which will convert the messages in the components to the selected language. This way your users will be able to understand them, since they are translated to their native (or preferred) language.

Localization Resource Files

This release includes translated messages for 96 cultures in the Telerik UI for ASP.NET Core and MVC libraries. These translations were taken from the Kendo UI for jQuery public localization repository and are now available as resource files. Users can use these translations as is or customize them to their liking.

To learn more about the localization updates, check out the dedicated documentation article.

UI for ASP.NET Core Code Snippets in Visual Studio and Visual Studio Code

This release includes new code snippets for Telerik UI for ASP.NET Core components to improve productivity when developing web applications in Visual Studio or Visual Studio Code. The 110+ components now have code snippets for both HTML and TAG helper flavors that can be easily accessed. To use these code snippets, download and install the extensions from the Visual Studio Marketplace.

• Visual Studio Productivity Pack
• Visual Studio Code Productivity Pack

Telerik UI for ASP.NET AJAX

New WebForms Signature UI component

UI for ASP.NET AJAX is another Telerik library that added the Signature UI component to its collection. The RadSignature allows users to easily add signatures to forms or even PDF documents (via integration Telerik Document Processing). They can use a mouse or touch device to create their signature and customize it using options like canvas settings, stroke width, size, color, background and read-only mode.

See a demo of the UI for ASP.NET AJAX Signature UI control.

Enhancements to UI Components

Based on a customer request in the UI for ASP.NET AJAX Feedback Portal, we added a DropDownAutoWidth property in the RadDropDownList component.

Another Feedback Portal request that was included in the release is the new client event ItemSelect for the SearchContex in the RadSearchBox. Using the ItemSelect event, you can easily change the DataSource for RadSearchBox according to which Item is selected.

Accessibility Improvements

In Telerik R1 2023, we continued adding accessibility improvements (Calendar, TreeView, Grid HeaderContext to name a few) and as we did so, we made sure that the Voluntary Product Accessibility Template (VPAT) is updated.

Other Enhancements

In the latest release of UI for ASP.NET AJAX you can also find improvements in the appearance of RadEditor and RadTreeView in the WebBlue, Windows 7 and Vista skins.

Join Us for the Webinar January 26 (Plus More)

Progress Telerik .NET Web, Desktop & Mobile Products R1 2023 Release Webinar | January 26

Discover all updates across Telerik UI for Blazor, UI for ASP.NET Core, UI for ASP.NET MVC, UI for ASP.NET AJAX, UI for WPF, UI for WinForms, UI for WinUI, UI for .NET MAUI and UI for Xamarin and ThemeBuilder.

Save Your Seat

Join Us on Twitch

If you can’t wait until the webinar to unpack the new release, join the Livestream Release Party on January 19, 10 a.m. – 11:30 a.m. ET to hear the release highlights across the entire Progress Developer Tools portfolio and hang out with friends.

Progress Kendo UI R1 2023 Release Webinar | January 31

Discover all updates across KendoReact and Kendo UI for Angular, Vue and jQuery, as well as ThemeBuilder.

Save Your Seat

Progress Telerik Reporting, Mocking and Debugging Tools R1 2023 Release Webinar | February 2

Discover all updates across Telerik Reporting, JustMock, Fiddler Everywhere and Fiddler Jam.

Save Your Seat

Right before Thanksgiving, Microsoft published a blog post written by the talented Rumen Zhekov—Manager, Software Engineering at Progress, responsible for the Telerik ASP.NET AJAX (Web Forms) suite. The blog post concentrates on everything new, cool, trendy, and useful around the integrated Web Live Preview tool in Visual Studio 2022 and the way it seamlessly works with Telerik UI for ASP.NET AJAX.

What’s so Cool About Web Live Preview?

Led by the spirit of Thanksgiving, the article gives a well-deserved appreciation to the good old Visual Studio Web Forms Designer and welcomes its modern successor—the Web Live Preview tool.

The new kid on the block inherits all the cool features of the Designer but introduces many more. It allows you to see in real-time the configuration changes you made to the design, layout and settings of the webpage and the UI components you are currently working on, incorporating built-in accessibility support, and getting frequent updates and improvements by Microsoft.

Web Live Preview and Telerik: Working Natively Together

Diving deeper into the capabilities of the powerful UX usability tool, the blog post focuses on the freedom it gives when it comes to components’ support—the Web Live Preview works with the native ASP.NET Web Forms components as well as with the third-party UI controls, including Telerik UI for ASP.NET AJAX.

To better visualize how the Web Live Preview and Telerik work seamlessly together, a sample Outlook-inspired Web Forms app created with the assistance of Visual Studio Extensions for Telerik UI for ASP.NET AJAX is used. The demo does its best to also showcase the great new features Web Live Preview brings to the table.

But … let’s not spoil everything. You can learn more about the installation, usage and the powerful new features in the blog post itself. ↓

Give It a Read and Share Your Thoughts

It’s time to stop talking about the blog post and finally give you the link to read it yourself, so here you are: Improve your productivity with Web Live Preview and Telerik - Visual Studio Blog (microsoft.com).

Give it a spin and thank us later in the comments section below or in the original blog post by pressing the like (♡) button. Feedback is also appreciated.

Welcome to the new Web Live Preview age and happy reading (coding)!

• Common Telerik Web R2 2022 Release Items
• Telerik UI for Blazor
• Telerik UI for ASP.NET Core and Telerik UI for ASP.NET MVC
• Telerik UI for ASP.NET AJAX

Common Telerik Web R3 2022 Release Items

New Fluent Theme Across Telerik and Kendo UI

With R3 2022 we are excited to announce that the new Fluent theme is officially available for Telerik and Kendo UI libraries and their web UI components! Just like our other themes, the new Fluent theme follows the guidelines of the official Fluent Design System to let all ASP.NET MVC, ASP.NET Core, Blazor, jQuery, Angular, React and Vue UI components immediately be styled with the Fluent Design System just by including the new theme.

If you are already using Fluent-themed components in your web applications today, with the Fluent theme added, any of the Telerik and Kendo UI components will seamlessly fit in.

Compatibility With .NET 7 Latest Preview Release

For those of you eager to try out the latest and greatest by Microsoft, we are happy to announce that the Telerik UI for Blazor and Telerik UI for ASP.NET Core libraries are compatible with the latest .NET 7 Preview 7. Our goal is to provide full support for .NET 7 as soon as Microsoft releases it this November.

Accessibility Enhancements

A major focus in R3 2022 for all Telerik Web UI components was further improving the accessibility compliance level and available documentation and demos that can be used for reference points or direct A11Y testing. For each of the Telerik UI products, we have added a dedicated section below which outlines the specific items in the release.

New Telerik Document Processing Features

With R3 2022, we’ve released new features across all Telerik Document Processing libraries to help you better navigate your document formats. The new features include:

Updates in WordProcessing Library

• Page Numbering fields: In addition to the filed codes support, we have now added a functionality that allows you to update the PAGE, PAGEREF, NUMPAGES and SECTIONPAGES fields and easily calculate their result.
• Shapes support: The shapes feature allows you to easily insert, style and interact with existing shapes like circles, boxes, arrows and many others directly in your documents.

Updates in SpreadProcessing Library

• Repeat specific rows or columns on every printed page: You can easily specify a row or a column that will be repeated on every printed page.

Updates in SpreadStreamProcessing Library

• SpreadStreamProcessing import: You can now read large XLSX or CSV files without loading the entire document in memory.

Updates in PdfProcessing Library:

• PdfProcessing Signature flags support: With this new functionality, you can specify that there is a signature, even if the signature itself does not have a visual representation.
• Export PDF pages to images: We have added the ability to convert the pages of a .pdf document to images. This feature will work with the .NET Standard version and does not depend on any Windows libraries.

Telerik UI for Blazor

Telerik UI for Blazor continues to grow and improve, and we are happy to share that we now offer 100 native Blazor components! The new additions in R3 2022 include PDFViewer, MultuColumnComboBox and Skeleton components; accessibility improvements; new scaffolding and code snippets and Visual Studio—plus dozens of advanced features across all UI for Blazor components.

New Blazor PDFViewer Component

The new UI for Blazor PDFViewer component is certainly one of the highlights of R3 2022 release. It allows users to view and interact with PDF files directly in the browser without the need to download the file or use third-party tools or browser extensions.

The PDF Viewer for Blazor comes with a toolbar with built-in features to open, view, and download PDF files, paging, PDF search options, zoom in/out, printing and more. You can further customize the built-in toolbar commands and add your own, such as including a watermark or sending via email.

See the UI for Blazor PDFViewer component demo.

New Blazor MultiColumnComboBox Component

The new UI for Blazor MultiColumnComboBox component comes with a rich set of built-in features and options to customize its look and feel, including data binding, filtering, grouping, rendering of custom content through templates, appearance configuration, input of custom values, validation, built-in localization of messages, accessibility and keyboard navigation. With the help of the MultiColumn ComboBox, users can easily choose values from a predefined list in a table-like structure and type input in it.

See the UI for Blazor MultiColumnComboBox component demo or try out the component in the Telerik Blazor REPL browser-based code runner.

New Blazor Skeleton Component

Skeletons are widely used as hints to the users that the page content is being loaded. With the Telerik UI for Blazor Skeleton component you can easily achieve such behavior and render a placeholder for each of the underlying HTML elements in a component or page. It includes customization options for its shape (text, circle or rectangle), height, width, animation type (pulse or wave), visibility and CSS class.

The UI for Blazor Skeleton allows seamless integration with other Blazor UI components, such as Data Grid. This allows you to easily mimic grid with rows while data loading takes place.

See a demo of the UI for Blazor Skeleton component or try it out in Telerik REPL for Blazor.

Accessibility Improvements in Telerik UI for Blazor

In Telerik UI for Blazor, we specifically addressed the WAI-ARIA best practices for implementing keyboard navigation for multiple components, tested against the popular screen readers, implemented the recommended rendering related to various WAI-ARIA attributes, and worked toward aligning with WCAG 2.1 AAA and Section 508 compliance standards.

The UI for Blazor components that received accessibility boost in R3 2022 include Blazor Data Grid, TreeList, TreeView, PanelBar, Stepper, Wizard, Pager, DateInput, Calendar, DateRangePicker, DatePicker, TimePicker, DateTimePicker, Drawer and Breadcrumb.

Accessibility-Focused Demos & Docs

In addition to updating our UI for Blazor components, with R3 2022 the Telerik Blazor team has created accessibility-specific demos that can be used to test any of our Blazor UI components with screen readers and other software used to test accessibility.

Previously, whenever teams needed to run accessibility tests on Telerik UI for Blazor components, they would have to do so locally, which required dedicated developers to set up the perfect configuration. Now, any team member who needs to run tests with screen readers or other software for accessibility testing can do so by visiting the respective online demo. Additionally, we have added a WAI-ARIA Support article for each of the components that lists the respective attributes and usage.

Enhancements to Blazor DataGrid and TreeList Components

The Blazor Grid and TreeList UI components come with the following new features:

Drag & drop between Data Grid, TreeList and TreeView
This allows users to drag items from any of these components to any other of them plus Gantt and Scheduler. That is—in addition to the option drag and drop of items between instances of the same component, which has been available for quite some time.

The existing Drop event will be triggered as the current one but with two additional event parameters (DestinationIndex(string) and DestinationComponentId(string)) and a new method called GetTimeSlotFromDropIndex. These updates will allow users to determine the drop destination inside any of the receiving components and ensure the corresponding item in the destination component can be returned.

HeaderClass parameter
This allows you to define custom CSS classes for the column header cells and easily bold their text, change their alignment or style them to make them stand out.

FilterOperators parameter
This parameter can be applied on a per column basis and lets you customize the list of filter operators within the filter row and menus.

FilterEditorFormat parameter
This one allows control over the format of the default filter and align the formatting of values in the column display and filter editor.

Enhancements to Blazor Gantt Component

Based on your feedback, we expanded the UI for Blazor Gantt component to give you greater flexibility and more customization options.

Blazor Gantt State Management

The Telerik UI for Blazor Gantt component now allows persisting its state between browsing sessions. You can save and load the Gantt layout so your users can continue where they left off. That includes all types of changes in the TreeList part of the Gantt component: extended items, edited items, column size and order, TreeList size (controlling the splitter position between the tree list and timeline parts), sorting and filtering. You can also control these elements programmatically by setting the desired state of the Gantt in your own code.

See how to save and load Blazor Gantt UI component state.

Blazor Gantt Rebind Method

The new Rebind method in the Telerik Blazor Gantt component allows you to easily trigger data processing logic in the TreeList and Timeline parts so that the UI reflects changes made in the data collection.

Blazor Gantt ToolTip Template Customization

The Blazor Gantt component tooltip template now includes StartDate and EndDate fields that include all relevant parts of a task’s date (year, month, day, hours, minutes, etc.). The new date parameters are formatted according to the ISO 8601 standard and can be easily parsed as C# DateTime objects. This will help you transform and format the task dates to any format that is required in your Blazor applications

Blazor Gantt New Parameters

The FilterEditorFormat parameter of the Blazor Gantt component allows control over the format of the default filter. That way you can align the formatting of values in the column display and filter editor.

With the FilterOperators parameter you can customize the list of filter operators within the filter row and menus of the TreeList part in the Gantt component.

Header Template in Multiple Blazor Components

Using the new header templating feature, you can customize the content rendered in the Blazor Calendar, DatePicker and DateRangePicker component’s header. Within the <HeaderTemplate> tag, you add render buttons, images or apply custom styling.

Customization of the Filter Default Operator

The new DefaultOperator parameter of the Blazor Filter component allows you to customize the default filter operator on a per-field basis (the filter that is preselected each time you add a new field). If it is left unassigned, the default operator will be set based on the data type.

Visual Studio Productivity Tools

R3 2022 brings a large set of developer productivity features for working within Visual Studio. You can now speed development, configuration and upgrades in applications built with UI for Blazor components. The latest release of Visual Studio Productivity Tools for Telerik UI for Blazor includes the following list of enhancements:

• UI for Blazor Visual Studio Scaffolder – brings quick scaffolding and data mocking for the most used data-bound components: the Data Grid, TreeList, Scheduler, Chart, ListView, Gantt, Form, Drawer, Menu, DropDownList, Upload, ComboBox and more.

• UI for Blazor Code Snippets Pack – boosts coding speed by allowing fast reference to UI components. You can type a shortcut (e.g., “tb” for Telerik Blazor) or directly the name of the component you need to plug. For example, typing “grid” or just “gr” will conveniently show a dropdown with the available snippet templates you can insert into your code.

• Visual Studio Upgrade Wizard – simplifies Telerik UI for Blazor version upgrades, includes updates to theme versions, and smooths transition from a trial to a license version of the product.

• Visual Studio Configuration of Projects – helps with the configuration of already existing Telerik UI for Blazor applications via a wizard, and includes settings like visual theme, use of CDN and localization.

New ThemeBuilder and ThemeBuilder Pro

Progress ThemeBuilder has long been a popular tool for developers using Telerik and Kendo UI to customize the style of their components without having to write CSS. It has now been rebuilt for better performance and other productivity features such as the ability to save work and reuse it for multiple projects. For those who want to take customization of the Telerik UI for Blazor components to the next level, we are also introducing ThemeBuilder Pro!

For a full breakdown in what’s new with the ThemeBuilder and what ThemeBuilder Pro includes, read the ThemeBuilder announcement blog post.

Native Blazor Report Viewer

We are happy to announce that those of you who use Telerik UI for Blazor and need to implement reporting in your Blazor applications, our friends from the Telerik Reporting team have just shipped a brand-new native Blazor Report Viewer control.

The native version of the report viewer component brings a fluent user experience that blends with the rest of your Blazor application by using the same input controls and styling mechanism.

The first version of the Telerik Blazor Report Viewer component includes all the core functionalities for previewing interactive reports which will be further developed to include features such as Search and navigating back from a drill-through action.

Telerik REPL for Blazor Updates

The Telerik REPL for Blazor received multiple updates and improvements—it now includes a new playful loading animation, adaptive layout and support for different version of Telerik UI for Blazor.

We ensured the REPL is responsive—you can now adapt, run and share code snippets seamlessly from smaller screen devices.

Users are now able to change the underlying version of Telerik UI for Blazor when using the REPL and compile and render code using the selected version. Each Telerik UI for Blazor version comes with its package and static asset dependencies, allowing the user to use currently available swatches for each of the versions.

Check out the latest updates in the Telerik REPL for Blazor now!

Multiple New Parameters in FileSelect and Upload Components

We exposed multiple parameters to enable further flexibility when working with the FileSelect and Upload components in Blazor applications. The new parameters include:

• Id – allows you to associate the component with <label> tags and perform further references and checks
• Accept – easily configure which files should be visible in the browser’s file select dialog
• Capture – renders as a capture HTML attribute of the <input type="file" /> and enables direct usage of the device camera instead of the file system

OnOpen and OnClose Events in Multiple Blazor Components

The following list of UI for Blazor components are expanded with OnOpen and OnClose events: AutoComplete, ColorPicker, ComboBox, DatePicker, DateRangePicker, DateTimePicker, DropDownList, MultiSelect and TimePicker.

The OnOpen/OnClose events are triggered right before the underlying popup component is shown or hidden regardless of how the open/close is initiated—keyboard, mouse click or value change.

Responsiveness and Adaptive Blazor Layout

Throughout 2022 we have added multiple responsive features to the components (responsive Pager, Toolbar and scrollable TabStrip) and added some additional resources to demonstrate how you can easily make Blazor components and apps responsive to different screen sizes using the UI for Blazor MediaQuery component:

• How to make responsive Menu components in Blazor Applications
• How to make responsive Forms in Blazor Applications
• How to make responsive Grid Layout in Blazor Applications

You can also review a dedicated blog post on the topic of Responsive Blazor Layouts, and in R1 2023 we further plan to develop more adaptiveness and updated design for UI for Blazor DatePicker and select UI components.

Updated Blazor Coffee Demo App

If you are in the beginning of your journey with Blazor and Telerik UI for Blazor, check out for ideas and inspiration the updated demo app Blazor Coffee Warehouse. We updated the already existing application and have included examples of some of the most popular UI for Blazor components such as the Data Grid, Drawer, Charts, Inputs, Form and more. The app also demonstrates how users can easily change the theming and apply localization in Blazor apps.

Telerik UI for ASP.NET Core and Telerik UI for ASP.NET MVC

CDN Licensing

The way Telerik UI for ASP.NET Core and UI for ASP.NET MVC are licensed undergoes an important change in this release. R3 2022 introduces the requirement to add a license key whenever using the CDN to reference any Kendo UI for jQuery JavaScript and CSS files. Although the license key mechanism will not break any builds, it serves as a verification step, acknowledging that you are a licensed user. Applying a license key will be as simple as adding a single line of code to your project(s) and you can reference the dedicated resources on how to quickly set it up in your code:

Adding license code in UI for ASP.NET Core
Adding license code in UI for ASP.NET MVC

Signature UI Component

The new Signature component in Telerik UI for ASP.NET Core and MVC enables end users to draw a signature using a mouse or touch device. The key features that users can take advantage of to customize their signatures and adapt them to their needs include different canvas options, stroke width, size, color, background configuration, read-only state and more.

As an alternative to drawing, the Signature component also allows uploading of existing image format. For completeness of the use case of placing a signature in web applications, we have also included handy “Save As” and “Clear” buttons.

See UI for ASP.NET Core Signature component demo.
See UI for ASP.NET MVC Signature component demo.

DropDownButton UI Component

The new DropDownButton component in Telerik UI for ASP.NET Core and MVC renders as a button that opens a popup list of action items. The DropDownButton component supports icons, images, data binding, keyboard navigation, accessibility and multiple appearance customization options.

See the UI for ASP.NET Core DropDownButton component demo.
See the UI for ASP.NET MVC DropDownButton UI component demo.

SplitButton UI Component

The new SplitButton in Telerik UI for ASP.NET Core and MVC gives users a choice to execute the default button action or choose a secondary command from a related dropdown list. The SplitButton eliminates the need for multiple adjacent buttons, simplifies the application UI and saves screen real estate. It comes with built-in support for icons, multiple sizes, fill mode, theme color, disabling items, RTL support, keyboard navigation, accessibility and multiple UI customization options.

See the UI for ASP.NET Core SplitButton component demo.
See the UI for ASP.NET MVC SplitButton UI component demo.

Accessibility Improvements

The list of the UI components that we enhanced in Telerik UI for ASP.NET Core and MVC is long so here we will mention just the highlights: Drawer, Breadcrumb, TabStrip, TreeView, Pager, Editor, Toolbar, DateTimePickers and more.

Beyond updating our UI components to comply with Section 508, WCAG 2.1, and WAI-ARIA standards, R3 2022 introduces accessibility-specific demos that can be used to test any of our ASP.NET Core & MVC components with screen readers and other software used to test accessibility. Anyone who needs to run accessibility tests on Telerik UI for ASP.NET Core components can do so by visiting a public URL. The same option is also available for MVC flavor of Telerik UI components.

DataGrid Features and Enhancements

R3 2022 includes several Data Grid UX improvements such as adding a configuration option for enabling/disabling column menu as well as grouping and sorting enhancements.

Enable/Disable Column Menu on a Per-Column Basis
Enabling and disabling the Data Grid’s column menu is now available out of the box on a per-column basis. With this new configuration option, developers have full control over which columns should display a column menu.

See how to configure the UI for ASP.NET Core Grid column menu.
See how to configure the UI for ASP.NET MVC Grid column menu.

Hide Currently Grouped Column
Another Data Grid feature added in R3 2022 is the option to hide the column or field which is currently being grouped. Previously, every time a column was grouped, the column would always be displayed, which was not ideal for all the Grid use cases. The new option to hide columns/fields that are being used for grouping ensures flexibility for the .NET developers and smoother experience for the end user.

See how to hide the currently grouped column in UI for ASP.NET Core Grid.
See how to hide the currently grouped column in UI for ASP.NET MVC Grid.

Fire Change Event Only When Row Select and Deselect Are Performed Within Multiple ASP.NET Core Components

In this release, we ship another improvement to anyone dealing with the onChange event when using the select functionality of the Telerik UI components. Previously, this event could be triggered when interacting with rows even when selecting or deselection did not occur. Now onChange event will only fire when a row is selected and deselected

The new behavior and change apply to following ASP.NET Core and MVC UI components—Grid, Calendar, MultiViewCalendar, Listbox, ListView, TreeList, FileManager, Gantt.

PivotGrid v2 Local Data Binding

The local binding feature allows you to populate the Telerik PivotGrid v2 for ASP.NET Core and MVC with local flat data. When the component is configured for local binding, it will serialize the data as part of its data source and perform all data operations on the client. Now you can choose the preferred way to bind data to the PivotGrid: data located on a server somewhere (remote using OLAP) or through local binding.

For those unfamiliar, earlier this year the Telerik UI team released the new and revamped PivotGrid v2 component with a better user experience and design, overall improved performance, and more. Since the new PivotGrid component is being built from the ground up and PivotGrids are quite complex, we wanted to offer both editions of the PivotGrid (old and new) while we build out features in the new PivotGrid v2.

See how to use local binding in the ASP.NET Core PivotGrid UI component.
See how to use local binding in the ASP.NET MVC PivotGrid UI component.

Telerik UI for ASP.NET MVC & Core API Improvements

We are undertaking the effort to make improvements to the product’s API in the next several releases. The goal is to address feedback we received regarding the level of details, descriptions and examples included in the API. With the current release, we have implemented improvements to several of the most used components—DataGrid, DropDownList, DatePicker, DateRangePicker, Data Source and Window. We will continue with the UI for ASP.NET Core and MVC API improvements throughout 2023.

UI for ASP.NET Core Visual Studio Productivity Tools

The latest release of Visual Studio Productivity Tools for Telerik UI for ASP.NET Core includes the following list of new productivity features:

• UI for ASP.NET Core Visual Studio Scaffolder – allows quick scaffolding and mocking of data for some the most used data-bound components, such as the ASP.NET Core Data Grid, TreeList, Scheduler, ListView, Gantt, Chart, Form and Editor.
• UI for ASP.NET Core Code Snippets Pack – boosts coding speed by allowing fast reference to UI components. By typing a shortcut (e.g., “tc” for Telerik ASP.NET Core) or directly the name of the component you need to plug. For example, typing “grid” or just “gr” will conveniently show a dropdown with the available snippet templates for both HTML and TagHelpers which you can insert into your code.

UI for ASP.NET Core TagHelper Snippets

Telerik UI for ASP.NET Core offers HTML and TAG helpers options for initializing and configuring the UI components. Based on your feedback regarding the need for more TAG Helper demos and documentation, we made sure that there is a complete parity between all examples of the HTML and TAG Helpers, and you can now easily switch the component demos and documentation between HTML and TAG Helper View.

Telerik UI for ASP.NET AJAX

Floating Action Button

UI for ASP.NET AJAX continues to grow, and in this release we included a brand-new Floating Action Button component (FAB). The FAB appears on top of all page content and presents the user with the primary action. When clicked, it either executes that action or shows additional action items. The UI for ASP.NET AJAX FloatingActionButton includes multiple configuration options for alignment, color, size and shape, plus the option to customize its content via templates.

See the UI for ASP.NET AJAX Floating Action Button Component.

Accessibility Improvements

With R3 2022, we’ve focused on further improving the components accessibility compliance. The release includes more than 30 accessibility fixes and improvements in multiple components— Calendar, Scheduler, ComboBox, DropDownList, Editor, FileExplorer, Input, DatePicker, DateRangePicker, Prompt, SearchBox, Spell, TabStrip, Window, Wizard, RadGrid, Filter, Splitter and more.

See the UI for ASP.NET AJAX Accessibility Compliance page for more details.

Updated VPAT Document

Along with the accessibility fixes and improvements, we have updated the existing Voluntary Product Accessibility Template (VPAT) for Telerik UI for ASP.NET AJAX. Now the document follows the latest version and include the latest accessibility improvements that have been made to our UI components. The latest version of the VPAT document is available here.

Release Webinar & Twitch Session

Telerik .NET Web, Desktop & Mobile Products Webinar

Wednesday, September 21, 2022 | 11:00 a.m. – 1:00 p.m. ET
Discover all updates across Telerik UI for Blazor, UI for ASP.NET Core, UI for ASP.NET MVC, UI for ASP.NET AJAX, UI for WPF, UI for WinForms, UI for WinUI, UI for Xamarin and UI for .NET MAUI.

Save Your Seat

Join Us on Twitch Today

Live from Devreach’22 @ Progress360: Join the live community session from the Progress360 Streaming Studio on September 14 from 10 a.m. – 11:30 a.m. ET to hear the release highlights and celebrate the DevReach spirit with us at our Livestream Release Party.

And the Best Part About the Release Webinars?

The live webinars and Twitch sessions are a great opportunity for you to ask questions before and during the webinars. We’ll be waiting to hear from you on Twitter—just use the #heyTelerik and #heyKendoUI hashtags. Another great option is the live chat during our release session on CodeItLive, our Twitch channel.

Let’s dive in and review what’s new across the board, plus product-specific release items for:

• Common Telerik Web R2 2022 Release Items
• Telerik UI for Blazor
• Telerik UI for ASP.NET Core and Telerik UI for ASP.NET MVC
• Telerik UI for ASP.NET AJAX

Common R2 2022 Items in Telerik UI for Web

Dark Mode for All Docs & Demos

Today we can announce an exciting update across several products that the Telerik and Kendo UI teams have worked hard on over the last couple of months—the ability to toggle between light and dark modes within our documentation and demos!

When navigating through any of our web-based UI component library resources, you will see a toggle switch in the top-right corner of your screen. Interacting with this element will let you switch between dark mode and light mode.

New Ocean Blue Swatch

With the latest update, the Telerik and Kendo UI teams researched how we could improve the accessibility of all our components out of the box by making changes to the look and feel of the components. Specifically, we looked at the Telerik and Kendo UI Default theme to see how we could improve accessibility levels by focusing on aspects like contrast, which are very important in accessibility scenarios.

This research effort led to the new Telerik and Kendo UI Default Ocean Blue swatch. Rather than the traditional orange color of the Default theme, the Ocean Blue swatch offers blue as the primary color.

The goal of this swatch is to let Telerik UI users immediately see a boost in accessibility compliance by using this swatch. While the Telerik and Kendo UI components already adhere to a high level of compliance, using this swatch will help improve accessibility compliance even further.

This update is available in all our Telerik and Kendo UI web components except ASP.NET AJAX. To see the new accessibility swatch in action, visit any of the online demos for the web-based UI component libraries.

Productivity Tools in Visual Studio Code

With the growing interest and usage of Visual Studio Code, we introduced the Telerik Visual Studio Code Extensions for Blazor and ASP.NET Core about a year ago, and we have continuously added new features and templates to it with the goal of helping web developers set up and build apps faster.

That led us to the natural next step to transform the initially simple project wizard into Progress® Telerik® UI for Blazor and Telerik® UI for ASP.NET Core Productivity Tools. For each of the Telerik products, there is a dedicated extension within VS Code that will include handy developer features for fast UI component reference, configuration and usage. At the time of the R2 2022 release, the productivity tools include: project templates with Telerik UI components, scaffolding, code snippets, convert command and a “share to REPL” feature.

Check out the Visual Studio Productivity Tools for Telerik UI for Blazor and UI for ASP.NET Core.

Compatibility With .NET 7 Preview 4

For those of you eager to try out the latest and greatest by Microsoft, we are happy to announce that the Telerik UI for Blazor & Telerik UI for ASP.NET Core libraries are compatible with the latest .NET 7 Preview 4.

New Features in Telerik Document Processing

In the R2 2022 release, we have something new for those of you who are using Telerik Document Processing within their Blazor, ASP.NET Core, MVC and WebForms apps!

In the latest distribution package, you will find several of the most-wanted items from our Feedback Portal, such as:

• Insertion and deletion of comments (SpreadProcessing): Allows adding rules used during cells visualization and applies formatting depending on their values.
• Implementing cell reference to whole columns (SpreadProcessing)
• Support for Type 3 fonts in PDFProcessing

Telerik UI for Blazor

Telerik UI for Blazor continues to grow and improve and we are happy to share that we now offer nearly 100 native Blazor components! The new additions in R2 2022 include FileManager, Filter, FloatingLabel and SplitButton components, plus dozens of advanced features and brand-new functionality within Visual Studio Code.

New Blazor FileManager UI Component

One of the release highlights of R2 2022 is the Telerik UI for Blazor FileManager component. It eases the process of managing files and folders, and most common folder/file operations. The File Manager (also known as File Explorer) provides easy navigation for browsing and selecting folders and files from the file system and managing them in your Blazor apps. The FileManager comes with a toolbar with predefined commands, three panes for viewing and previewing content, a context menu for the file list, and built-in localization.

New Blazor Filter UI Component

The new Blazor Filter component allows users to build filter expressions with multiple logical operators which can be applied to any data-bound component such as Grid, ListView and TreeList. Like the rest of Telerik Blazor UI components, the Filter comes with built-in accessibility, keyboard navigation, localization and professionally styled themes.

See how the Blazor Filter component works in Blazor REPL.

New Blazor FloatingLabel UI Component

The Telerik Blazor Floating Label component lets you take advantage of floating labels in focusable Telerik input components such as NumericTextBox, TextBox, TextArea, DateTime Inputs & Pickers, DropDownList, ComboBox, AutoComplete, MultiSelect and MaskedTextBox.

The Floating Label adds features on top of the HTML <label> element such as animation, association with non-form elements, and combination with the input’s placeholder.

See the Telerik Blazor FloatingLabel in Blazor REPL code runner.

New Blazor SplitButton UI Component

The Telerik UI for Blazor SplitButton allows users to execute a default action or to choose a predefined action from a dropdown list. The SplitButton comes with multiple out-of-the box configuration options for its visual appearance such as icons, custom colors, borders, share and size which eliminates the need for custom CSS.

Scaffolder and Code Snippets in Visual Studio Code

You can take advantage immediately and start scaffolding the top used data-bound Telerik Blazor components: Data Grid, TreeList, Scheduler, Chart, ListView, Gantt, Form, Drawer, Menu, DropDownList, Upload, ComboBox and more. The Visual Studio Code scaffolder will prompt you for input of the service name, model name and will allow you to configure in the UI multiple component specific properties—for example, if you scaffold a new page with Telerik Blazor Data Grid, you will be able to set its sorting, filtering, grouping, column resizing and more.

The productivity tools for Telerik Blazor within Visual Studio Code now include over 80 code snippets for speeding up your development with Telerik UI components. You can take advantage of the dozens of code snippets that can be easily invoked in the IDE by typing shortcut “tb” (short for Telerik Blazor) or directly the name of the component you need to plug.

New Blazor Data Grid & TreeList Features

As with every release, we have given a lot of love and attention to the Telerik Blazor Data Grid and TreeList components. In R2 2022, we focused on various areas of Grid and TreeList customization—you can tailor the default filters, editors, popup editing window, search box and take advantage of a new Rebind method.

• Customize the default filter – in addition to using the filter template, you can now configure the default filter operator and control whether the filter dropdown and clear buttons are visible.

• DebounceDelay FilterRow property – the time in milliseconds between the last typed symbol and firing the OnFilter event in the Grid & TreeList components.

• Custom filter editor – you can customize the filter editor rendered within the FilterRow, FilterMenu and ColumnMenu within Grid and TreeList components.

• Custom editors via EditorType parameter – provides a simple way to change the default field editors without using templates. You have the flexibility to choose between DatePicker or DateTimePicker for the DateTime type, and TextBox or TextArea for the string fields.

• Custom popup editing settings – we exposed multiple settings for the Grid and TreeList popup editors. You can set the (max) width, (max) height, CSS class and orientation of the window and customize the columns and column spacing layout parameters of the form, and the horizontal alignment of the Buttons in the form through ButtonsLayout.

• SearchBox Width & Placeholder parameters – you can now customize the SearchBox within the Blazor Data Grid and TreeList components by taking advantage of the two newly exposed Width and Placeholder parameters.

• Rebind method – you can invoke the processing of data and refreshed rendering with just one call. If you have manually defined the OnRead event, then the business logic defined in its event handler will be executed.

In addition to the listed common customization features, we added two new events specific to the Blazor TreeList: OnRowclick and OnRowDoubleClick, which enable you to handle logic when users click or double-click on the TreeList rows.

Multiple New Gantt Component Features

With R2 2022, we enhanced the Blazor Gantt component with multiple new features, including:

• PopUp and InLine Editing Modes – in the Gantt pop-up editing mode clicking a command button opens a popup with options to edit the starting task details, and in the in-line editing clicking a command button opens a popup with options to edit the starting task details.

• Custom Content in the Gantt TreeList and DateHeader – the templating options in the Blazor Gantt grew, and the component now allows the rendering of custom content and formatting within the TreeList and Timeline parts.

• Zoom to Fit – the feature provides greater control over the date range alignment in the Gantt timeline part.

• EditorType Parameter – provides a simple way to change the task default field editors. You have the flexibility to choose between DatePicker or DateTimePicker for the DateTime type, and TextBox or TextArea for the string fields.

• Custom Popup Editing Windows – exposes multiple settings for the Gantt popup editor. You can set the (max) width, (max) height, CSS class and orientation of the window and customize the built-in editing look of tasks.

• Custom Date Format of Timeline Headers – for each of the Blazor Gantt views (Day, Week, Month and Year) you can customize the date format of major and minor slot headers in the timeline part of the component.

• DebounceDelay FilterRow property – the time in milliseconds between the last typed symbol and the raising of the OnFilter event.

• OnEdit, OnExpand and OnCollapse events – as their names suggest, the new events are raised when a Gantt item is about to be edited, expanded or collapsed, respectively.

Responsive and Adaptive Blazor Components

In 2022 we are aiming to further improve the responsiveness of Telerik Blazor components and add features that allow them to have built-in adaptability for various screen sizes. With the current release, you can take advantage of the responsive Blazor Pager, Toolbar and TabStrip components.

New Pager Feature: Responsiveness and Adaptability
The Blazor Pager component now includes built-in responsive breakpoints and can be easily adapted to various screen sizes.

New Toolbar Feature: Responsiveness and Adaptability
The Blazor Toolbar is another UI component that received an Adaptive parameter. By setting it to true, the Toolbar container becomes adaptive and hides the overflowing items in a popup. You can also define the items that need to move to the overflow popup and remain visible via the Overflow parameter of the ToolBar items.

New TabStrip Feature: Scrollable Tabs
Another item from the responsive components epic we addressed in the release is the scrollable tabs feature in the Blazor TabStrip component. Now end users can seamlessly navigate a larger number of tabs in the component header.

See how the TabStrip scrollable tabs feature works in Telerik Blazor REPL.

Telerik REPL for Blazor

We continue adding new features in our browser-based code runner Telerik REPL for Blazor. With R2 2022, we’ve added two new cool productivity features—scaffolding of data-bound Telerik UI for Blazor components and over 80 code snippets. You can now choose a component from the side menu and drag and drop it onto the REPL code editor. The tool will generate the code on your behalf and, the best part, for the components with enabled scaffolding, you will be able to set a service and model name as well as properties such as sorting, paging, grouping and more.   

We also dedicated effort to improve the loading performance, the runner responsiveness and added a handy new feature that allows you to pin/unpin the side menu.

New Parameter EditorType in Multiple Components

We exposed an EditorType parameter in multiple Telerik Blazor components. The EditorType provides a simple way to change the default field editors in Grid, TreeList, Gantt and Form UI components. You have the flexibility to choose between DatePicker or DateTimePicker for the DateTime type and TextBox or TextArea for the string fields.

New Window Feature: Resizable

With the new  resizable feature in the Telerik Blazor Window component, we are responding to popular requests in the Telerik UI for Blazor Feedback Portal. By setting the new Resizable property of the Window to true, you can enable users to drag the Window component’s corners and resize it as needed.

New Editor Features: Table & Image Resizing, Video Nested Tags

With the latest release, the Telerik Blazor Editor component allows video nested tags and table and image resizing. The table resizing feature in the component is enabled by default and includes handles which are rendered on hovering the column and row borders. Analogically, the image resizing feature is enabled by handles positioned in every corner of an image.

Debounce Delay Parameter in Multiple UI Components

The DebounceDelay parameter is available in the multiple Telerik UI for Blazor components that adopt an input: AutoComplete, ComboBox, DateInput, DatePicker, DateRangePicker, DateTimePicker, MultiSelect, NumericTextBox, TimePicker. You will have greater control over the response to change of values, specifically when you need to add a predefined time delay before making a request or responding to a user action.

New Chart & Stock Chart Enhancements

The new features include plot bands, plot area customization and series gradient settings in the Telerik Blazor Chart and StockChart components.

The plot bands feature allows you to highlight a specific range of either category or value axis. Each plot band can be configured with color and opacity. The chart components now allow further customization of the plot area borders, margin, padding and gradient settings for the chart series. You can set the border color by passing a valid CSS color string, including HEX and RGB, set the position to top, right or left, and more.

NumericTextBox: InputMode & АutoComplete Parameters

Based on your feedback, we expanded the Blazor NumericTextBox with an InputMode and AutoComplete parameters:

• The InputMode param improves the user experience by showing numeric-only keypads on virtual keyboards.

• The AutoComplete parameter allows developers to disable browser suggestions of previous values provided by the user.

Localization Support in VS Project Templates

We extended the existing Telerik Visual Studio Extension with an option to configure the culture and localization of your Blazor apps during project creation. The language configuration is added as a step in the Create Project Wizard and allows you to easily choose from one of the Telerik Blazor Resource files as a starter for your project. The current options include sample translated messages in English, German, Spanish and Bulgarian, which you can later edit or add your own.

New Form & Button Parameters: Id & Form

One of the many items from the Telerik Blazor user voice portal we addressed is the Form parameter in the Telerik Button UI component. The new parameter allows linking a form to a submit button, when the button is rendered outside the form and ensures the same behavior as if the submit button is inside the form. We have also added a new Id parameter to the Form Component so that it can be linked to submit buttons outside it and assure integration with the new button parameters.

New Scheduler Feature: Custom Popup Editing Window

The Telerik Blazor Scheduler is another component exposes multiple settings for its popup editor. You can set the (max) width, (max) height and CSS class, configure the orientation of the form (either horizontal or vertical), the columns, and column spacing layout parameters of the form, and more.

Signed NuGet Packages

Starting with version 3.0.0 of Telerik UI for Blazor, we introduced signed NuGet packages, in addition to providing signed product DLL files for quite some time now. With this, we wanted to take security to the next level and give you the option to verify the signed publisher (using _dotnet nuget verify_) and ensure that the package was not replaced through the network while being downloaded.

Telerik UI for ASP.NET Core & UI for ASP.NET MVC

New CircularProgressBar UI Component

In addition to the existing linear ProgressBar component available in UI for ASP.NET Core and MVC, in R2 2022 we added a new CircularProgressBar. The new component allows developers to visualize the progress for a particular process as a circle. The Circular Progress Bar comes with the following set of features:

• Support for finite and infinite modes
• Center template – allows you to display custom text or HTML in the circle’s center
• Colors feature – allows rendering of different colors depending on the indicator’s value

See the UI for ASP.NET Core CircularProgressBar demo.
See the UI for ASP.NET MVC CircularProgressBar demo.

Multiple New ColorPickers

As the features and complexity of the existing ColorPicker component grew over time, we needed to break down the complexity and provide granular functionality in several standalone color picker UI components. You can now take advantage of a specific color picker depending on your use case:

• ColorPalette – renders a predefined list of palettes and provides the flexibility to define your own set of colors (any valid CSS color).

See the UI for ASP.NET Core ColorPalette demo.
See the UI for ASP.NET MVC ColorPalette demo.

• ColorGradient – when you need to show just a gradient view. The ColorGradient includes a slider for hue and alpha, manual HEX and RGB inputs for pinpointing a desired color, and a contrast tool that analyzes the contrast ratio between two colors, visualizes it and outputs a pass/fail report for WCAG standards.

See the UI for ASP.NET Core ColorGradient demo.
See the UI for ASP.NET MVC ColorGradient demo.

• FlatColorPicker – while it resembles the ColorPicker component, it comes in a simpler form without the typical popup present in the color picker.

See the UI for ASP.NET Core FlatColorPicker demo.
See the UI for ASP.NET MVC FlatColorPicker demo.

New Spreadsheet Feature: Dynamic Change of Size

The Spreadsheet UI component now has the capability to change the number of its rows and columns, and increase its size after loading. The new Resize method allows automatic sheet resizing on pasting more data than the current sheet size, plus flexible behavior when adding and deleting columns and rows from the toolbar.

See a demo of how the Telerik UI ASP.NET Core Spreadsheet resizes.

New Event in TreeView Component

In R2 2022 we also added a LoadCompleted event to the TreeView component. It allows you to trigger certain operations or define custom logic only when the complete data is loaded.

Accessibility Improvements

In addition to the high-contrast Ocean Blue theme, in R2 2022 we focused on further improving the components’ accessibility compliance levels and documentation. The Telerik UI for ASP.NET Core and MVC libraries are undergoing an accessibility review using the industry standard testing process. In the latest release, we have addressed and improved multiple items and will continue this effort throughout the year.

Updated VPAT Document

We have updated our existing Voluntary Product Accessibility Template (VPAT) for Telerik UI for ASP.NET Core and UI for ASP.NET MVC to follow the latest version of this document and have updated it according to the latest accessibility improvements that have been made to our UI components. The VPAT document is available on a per-request basis. Feel free to reach out to our support team, or one of our sales reps, to get ahold of the latest version.

Specific to Telerik UI for ASP.NET Core

ASP.NET Core Scaffolder in Visual Studio Code

One of the R2 2022 most wanted features for UI for ASP.NET Core is the new scaffolder. You can take advantage immediately and start scaffolding the top used data-bound Telerik UI for ASP.NET Core components: Data Grid, Chart, Form, ListView and Scheduler. The Visual Studio Code scaffolder will prompt you for input of the controller and model name and will allow you to configure in the UI multiple component specific properties. For example, if you scaffold a new page with UI for ASP.NET Core Grid, you will be able to set its sorting, filtering, grouping, column resizing and more.

ASP.NET Core Code Snippets in Visual Studio Code

Another productivity feature in the extension is the addition of code snippets for fast UI component reference and configuration. You can now take advantage of the dozens of code snippets that can be easily invoked in the IDE by typing shortcut “tc” (short for Telerik ASP.NET Core) or directly the name of the component you need to plug. For example, typing “grid” or just “gr” will conveniently show a dropdown with the available snippet templates you can insert in code. Then, using a tab sequence, you can fill out component properties, options, model and controller actions.

With the first release, we shipped code snippets for the majority of Telerik UI for ASP.NET Core components—the Data Grid, Autocomplete, Date and Time Pickers, Form, Textbox, Upload, Window and more. The good news is that the snippets are available for both flavors of the UI components for ASP.NET Core HTML and Tag Helpers. Our goal is to continue this effort and, with the next couple of product releases, to deliver 100% coverage for the snippets.

Menu Security Trimming

The UI for ASP.NET Core Menu component was enhanced with a much-requested feature related to hiding menu items from unauthorized access. The feature can be enabled through a single property called SecurityTrimming, but also relies heavily on ASP.NET Core Authorization.

See how menu security trimming can be configured.

Tag Helper Improvements in Docs & Demos

Based on your feedback, we are significantly improving the TagHelper code examples and documentation, so that you can easily reference them in your work. The effort will continue throughout 2022, but you can already take advantage of the easy switch between HTML and Tag Helper View in the component demos.

Additionally, we are expanding the available TagHelper code snippets in both component demos and documentation. In the current release, we managed to improve the examples in over 30 ASP.NET Core components and multiple documentation articles—DropDownList, DateTimePicker, Editor, TreeView and more. As promised, this effort will continue for a few more releases until we have complete parity between the HTML and TagHelpers examples.

Telerik UI for ASP.NET AJAX

Telerik UI for ASP.NET AJAX is our most mature, but still actively used and developed product and we are excited to announce that R2 2022 marks the 110th release of the product! This is really a great milestone that proves that when you love what you do time flies.

New Stepper UI Component

The Telerik UI for ASP.NET AJAX Stepper is the latest addition that helps you split complicated interactions into logical steps with visual progress. The Stepper includes horizontal and vertical modes, multiple customization options for each of the steps, validation, animations, built-in keyboard navigation and accessibility, and more.

DataViz Improvements

In the second major release of 2022, you we also implemented several of the most wanted chart features, enhancing the already robust DataViz library. These include:

• Enhanced appearance options for the tooltips in the RadHtmlChart
• Show chart shapes in legend
• New notes in RadHtmlChart
• Configuration options—highlight InactiveOpacity in RadHtmlChart
• Ability to modify the width of the range placeholder in radial RadGauge

PDF Export Enhancements

Again based on your feedback, we addressed several of the most voted features in our Feedback Portal related to PDF Export functionality:

• Ability to disable hyperlinks in the exported PDF via the RadClientExportManager
• Ability to scale the content when exporting PDF with the RadClientExportManager

Visual Indicator for Unsorted in RadGrid

With R2 2022, we’ve improved the sorting capabilities of the Grid and introduced the ability to show a NoSort icon, which indicates that an unsorted column can be sorted.

See how the RadGrid NoSort works.

Accessibility Improvements

Accessibility is a topic of ever-growing importance, and we are focusing on further improving the UI for ASP.NET AJAX components’ accessibility compliance levels. We’ve implemented several improvements in AsyncUpload, Dock, Window, Tooltip, Tile and Editor components, thus further enhancing the Section 508 support of the controls.

Download Telerik UI Components

Head over to the preferred Telerik UI library and download a free trial. Or, if you are an active license holder, you can grab the latest and greatest from the “Your Account” page, or update your NuGet package reference to the latest version.

Webinar & Dedicated Twitch Sessions

Be sure to sign up for the Telerik R2 2022 release webinar and live Twitch sessions to see the newly released components and features in action:

Twitch Session:
Mon, May 16 I 10:00 a.m. – 12 p.m. ET I Blazor & .NET MAUI

Add it to your calendar or save the link to our Twitch channel.

Webinar:
Tue, May 17 I 11:00 a.m. – 1:00 p.m. ET

Reserve Your Webinar Seat

Thank you for the continuous support!

Hey, developer folks! It’s Telerik R1 2022 release time and we’re excited to kick off 2022 with the introduction of SplitButton, Drag and Drop Manager, seamless integration with Web Live Preview, new demo showcase integration with Telerik Reporting, and more!

Split Button

The Telerik SplitButton for ASP.NET AJAX allows the user to choose a predefined action from a dropdown list or execute a default action. It is a lightweight version of the popular RadButton with enabled SplitButton and a built-in ContextMenu holding the set of alternative button options.

A handy property for scenarios when you want to avoid multiple postbacks to the server is the SingleClick. When enabled, the RadSplitButton control will be immediately disabled after the user clicks it. You can further configure the text you want to be displayed when the button is being clicked and SingleClick is turned on.

The control has a very customizable UI and you can take advantage of a large set of predefined built-in icons or apply custom ones to the button and its context menu.

For even further customization options, the Split Button offers ContentTemplate, which allows the rendering of complex content within the Button.

Drag & Drop Manager

With the help of the new Drag & Drop Manager for ASP.NET AJAX, you can easily add drag-and-drop functionality to any WebForms app with minimal code. The DragDropManager UI control combines the RadDraggable, RadDropTarget and RadDropTargetArea controls and simplifies declaration and reusability. The RadDraggable control enables an element to be moved by mouse or finger while the RadDropTarget & RadDropTargetArea controls help you define one or more drop areas.

The Telerik Drag and Drop component gives you complete control over the area and boundaries that an element can be moved, support for cursor offset, restriction of movements to only horizontal or vertical axes, and the option to easily show hints upon movement or drop of an element.

Support for Visual Studio 2022

As a leading provider of .NET UI components, we are glad to announce that all Telerik UI libraries (Telerik UI for ASP.NET AJAX included) are compatible with Visual Studio 2022 since November 2021, shortly after it was released by Microsoft. You can dive into seamless development with our web components, create new projects using our project templates and built-in layouts and take advantage of the extensive Telerik UI libraries.

Day-Zero Support for Web Live Preview With UI for ASP.NET AJAX

We have worked closely with Microsoft to ensure Day-Zero support for Web Live Preview. We are happy to provide compatibility with the Telerik UI for ASP.NET AJAX component suite the WLP official release, which enables real-time mapping between the source code in Visual Studio and the web app. As a developer, you no longer need to go back and forth between Visual Studio and the rendered HTML files to manually update them to see how the changes you made are reflected on the website.

Reporting Demo Integration

We included a standalone demo showing the interaction between the RadGrid UI component and Telerik Reporting, as well as how to pass and display ASP.NET AJAX Grid data in a WebForms Report Viewer.

New Telerik Document Processing Features

In the latest Telerik Document Processing distribution package in UI for ASP.NET AJAX, you will find several new document processing features: support for conditional formatting and export notes with a specific author in SpreadProcessing, as well as nested MailMerge in WordsProcessing.

Download Telerik UI for ASP.NET AJAX

We encourage you to download a trial version of Telerik UI for ASP.NET AJAX, or upgrade to the newest version from the “Your Account” page if you have an active license.

Keep helping us define the future of UI for ASP.NET AJAX by sharing your comments on our Feedback Portal.

Download Telerik UI for ASP.NET AJAX

Webinar & Dedicated Twitch Sessions

Be sure to sign up for the Telerik R1 2022 release webinar and live Twitch sessions to see the newly released components and features in action:

Twitch Sessions:
Mon, January 24 I 10:00 am ET – noon I Desktop & Mobile
Tue, January 25 I 10:00 am ET – noon I .NET Web

Webinar:
Wed, February 2 I 11:00 am – 1:00 pm ET

Reserve Your Webinar Seat

Thank you for your continuous support and happy coding!

If you are curious to learn, check out this blog post where we will take a tour in the following topics:

• What is Web Live Preview?
• How to try it out
  • Setup (Download and Install)
  • Using the extension
  • Integration with the Telerik AJAX controls
• Share what you think
• Find out more on WLP

What Is Web Live Preview?

Web Live Preview (WLP) is a Visual Studio (VS) add-on that enables real-time mapping between your source code and the rendered HTML in the browser. When viewing your web app, you can select elements in the browser just like in DevTools and the IDE will automatically show you the code that was executed to generate the element. And vice versa: If you edit the source in VS, the web app will automatically be updated. The idea of the tool is to be accessible (a trend across the whole Microsoft portfolio) and to follow the modern web standards.

That’s not all. WLP allows you to configure the settings (properties, databinding and so on) of the ASP.NET Web Forms components. This is applicable for the Telerik UI ASP.NET AJAX controls as well, allowing you to configure them directly from your browser via the provided Action Panel (Tasks menu with control’s properties—very similar to the smart tag we are already familiar with the VS Designer). Isn’t it great and time-saving?

It is also worth mentioning that, unlike the VS Designer which is heavily outdated, Web Live Preview will receive full support and updates in the future versions of Visual Studio. The community is already asking and hoping to get Web Live Preview enabled for other web project types like Blazor and ASP.NET Core, where the tool is not yet available and its potential and usability will be huge.

How To Try It Out

Follow the steps below to play with the tool:

Setup (Download and Install)

You can obtain and install the WLP add-on from the Visual Studio marketplace:

1. Use the web-based marketplace or the “Manage Extensions” marketplace integrated in Visual Studio -> go to Extensions -> Manage Extensions -> type “web live preview” in the Search box and hit Enter.
2. Install the tool.
   Tip 1: To complete the installation, you will be requested to restart Visual Studio.
   Tip 2: To ensure that the tool is installed and enabled, go to Tools -> Options -> type “web live preview” in the Search Options field -> press General -> make sure that the Enabled and Tools and Auto Sync Enabled features are turned on:
    
   General. Browser Link options: both CSS Auto Link Enabled and Enabled are set to true. Web Live Preview options: both Enabled and Tools and Auto Sync Enabled are set to true." title="Enable WLP from Visual Studio Options" sfref="[images|OpenAccessDataProvider]64d70f2b-e4b7-44dd-8fc6-80852569ea01">
   
   

Using the Extension

Once installed, the WLP give you a new “Edit in Browser” right-click option within the context menu of ASPX page in the Source mode as well as in the Solution Explorer:

This option will load the page in a special mode within your default browser, where you can select elements and Web UI controls with the mouse and modify their properties and text:

>'. Overlay text points to this tooltip and says, 'The selection tag menu gives you the ability to show the Action Panel (Smart tag) of the selected WebForms control. Just click on the >> symbols.' In the lower left, overlay text is point at the VS logo: 'You can enable/disable the inspector from here.' And lower right, pointing at div#ct100_Folder..., 'Use the Inspector to check and select the parent and child nodes of the currently selected HTML/control.'" title="Web Live Preview UI Structure" style="vertical-align: middle;" sfref="[images|OpenAccessDataProvider]a6a4d4cc-fda2-4fab-be08-95eb4785abc9">

The selection in the browser is automatically synchronized within your source code in Visual Studio. If you select a UI control in the page, for example RadGrid (more on it in the next section) or asp:DataGrid and change its properties from the WLP Action Panel, the properties will be reflected to the Source right away. The opposite is valid too—the changes in the source will be reflected in the browser too.

Integration With the Telerik ASP.NET AJAX Controls

It is a real honor for Telerik team at Progress to take part in this important and useful opportunity and be among the pioneers in introducing support for Web Live Preview for the Telerik UI for ASP.NET AJAX toolkit.

Let make a quick demo on the current level of support:

1. Start a new Telerik C# Web Forms Application and choose the Outlook-inspired template as a base (a prerequisite is to have installed the Telerik AJAX VSX Extensions).


2. Once you have the project created and loaded within Visual Studio, right-click over the Default.aspx page and choose the “Edit in Browser” (your default browser) option from the context menu. This will load the page along with Web Live Preview enabled in the browser.
   
   Tip: For better visibility on machines with a single screen, you can split the screen between Visual Studio and the browser by pressing Windows key + Left (for the IDE to get left-positioned) and Windows key + Right (for the browser to go to the right).


3. Example 1: Insert RadTextBox and RadButton in the source page, select them in the browser on the right and change some of their core properties from the Action Panel: Text and ButtonType. Notice how the properties get applied automatically in the source:
    
   
   

   Figure 1: Web Live Preview allows you to change the properties of Telerik components through the browser.
   

   Since it is a two-directional process, if you edit the property values in the source, they will be updated in the Action Panel too.

4. Example 2: Examine and play with the WLP Action Panel of RadGrid and the other databound components. Go to the browser, select the RadGrid control and press the >> button in the tag selector to show its Action Panel. Check the available configuration settings for the web control and try to change its DataSource. You’ll see that the databound option will appear in Visual Studio for further configuration.
    
   
   

   Figure 2: Bind RadGrid through the Web Live Preview Action Panel.

5. Example 3: CSS Auto-Sync feature—when WLP is enabled, if you change a CSS file that is being used, updates will be pushed automatically:
   
   
   

   Figure 3: CSS Auto-sync in action.

6. Something that I noticed during my tests was that the default behavior of the Designer to attach its default server-side handler when you double-click on a control is also supported by WLP.
   
   
   
   Example 4: Locate the RadButton control in the web page and double-click it. This will immediately create RadButton1_Click event and automatically show it in the codebehind page.
   
   Tip: The double-click on containers like div, span and paragraphs makes it editable and allows you to write and edit the text inside, which gets synced with the aspx page when you blur the editable field.

Try It Out and Let Us Know What You Think

While the WLP is currently in preview stage, Microsoft is devoted to its quality, and I can confirm that many reported bugs were fixed in a relatively short time during our collaboration with them. The tool already offers a good level of support for many Telerik UI for ASP.NET AJAX controls and allows configuring their settings directly from the browser. Some of the features like the custom editor for setting the Skins are currently in development and others still are not available or don’t yet work. This, of course, is temporary and about to change in the upcoming updates of the tool.

Here is the moment to invite everybody who’d like to take part in improving Web Live Preview to let us know by opening a General Feedback ticket from your Telerik.com account. The sole prerequisite is to have an existing ASP.NET Web Forms application with up-to-date Telerik ASP.NET AJAX components you’d like to share with us for testing purposes. Of course, we will be glad to receive any feedback you may have so that we can share it with WLP team and help them out making the tool usable for every developer in the Microsoft ecosystem.

Find More on WLP

Let me give you a few more resources for WLP that you might find useful:

• Introducing “Web Live Preview” (the official Microsoft blog)
• Download, Install and Release notes of the Web Live Preview extension (VS Marketplace)
• ASP.NET Community Standup—Web Live Preview (Video Presentation)

The purpose of this blog post is to reveal some known and unknown techniques of loading PDF files/content in RadPdfViewer for ASP.NET AJAX, explaining them with examples in order to help you incorporate the UI component in a more diverse set of applications and scenarios. Either on the server or on the client, via virtual or physical paths, from a file or a database, via local or remote file destinations, via URL, via memory streams and even via a Base64 string—this is all possible thanks to the advanced API of the component.

Let’s dive deeper and check out the possibilities to load a PDF file one by one:

• Accessible file on another domain
• File in the application folder—using local or relative path
• File stored on the host machine, out of the app folder
• File from FileStream (MemoryStream)
• File represented by a Base64 string on the client side

Accessible File on Another Domain

Loading a file via URL on another domain is simple and straightforward with RadPdfViewer. The File property of the component is exposed particularly to pass a path pointing to an existing PDF file.

The File property can be set in the PdfjsProcessingSettings inner tag of RadPdfViewer.

A common problem with presenting a file from an external domain is the cross-domain accessibility. So as long as the CORS policy of the server where the PDF file is located allows remote access, the RadPdfViewer should be able to display that document. Check out the following resources discussing this topic:

• Can I load a PDF from another server (cross domain request)?
• “No 'Access-Control-Allow-Origin' header is present on the requested resource” error

When the file is not accessible due to CORS policy, a JavaScript error indicating the problem is thrown on the browser’s console:

File in the Application Folder—Using Local or Relative Path

The approach for loading a locally positioned PDF file in the RadPdfViewer is the same as the one above. You should only set a relative path to the file property and, in this case, you should not worry about the cross-origin issue.

There are three ways to set the file path:

• Define the path in the declaration of the control:
  
  <telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" Height="550px" Width="100%" Scale="0.9">

  <PdfjsProcessingSettings File="Content/Document.pdf">

  </PdfjsProcessingSettings>

  </telerik:RadPdfViewer>
• Set the file path in the code-behind:
  
  <telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" Height="550px" Width="100%" Scale="0.9" OnLoad="RadPdfViewer1_Load">

  </telerik:RadPdfViewer>
  C#
  
  protected void RadPdfViewer1_Load(object sender, EventArgs e)

  {

  (sender as RadPdfViewer).PdfjsProcessingSettings.File = "Content/Document.pdf";

  }
  VB
  
  Protected Sub RadPdfViewer1_Load(ByVal sender As Object, ByVal e As EventArgs)

  (TryCast(sender, RadPdfViewer)).PdfjsProcessingSettings.File = "Content/Document.pdf"

  End Sub
• Set the path on the client side:
  
  <script>

  function pdfViewerLoad(sender, args) {

  var pdfViewer = sender;

  pdfViewer.fromFile("http://localhost:29842/Document.pdf");

  }

  </script>

  <telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" Height="550px" Width="100%" Scale="0.9">

  <ClientEvents OnLoad="pdfViewerLoad" />

  </telerik:RadPdfViewer>

Important note: The rendering engine of the RadPdfViewer operates completely on the client side; therefore, in all the cases where an absolute or relative path is passed to the control, an additional HTTP request is performed to fetch the file.

Information about the request for fetching the file from the server can be seen in the Network tab of the Browser’s DevTools as shown below:

File Stored on the Host Machine, Out of the App Folder

How to load a file from a local machine?

You can access any files located in a virtual folder that is a subfolder of the web application. This means that you can create a virtual directory that is a subdirectory of the web application folder pointing to a physical folder located on the machine. You also have to set the needed ASPNET/NETWORK SERVICE permissions to this virtual directory.

For more information, check out How to: Create a virtual directory with IIS Manager for an ASP.NET application.

File from FileStream (MemoryStream)

A common scenario is when the PDF file that is about to be loaded it in the PDF viewer is not yet an existing file. In cases when the PDF is generated programmatically, there are two main options to populate the file to the user:

Option 1: Save the file on the server and provide its path to the RadPdfViewer.

Option 2: Convert the file stream to a Base64 string and assign it as data of the RadPdfViewer.

Sample implementation of this approach is demonstrated in our live demo: Convert, View and Download Different Formats.

Note: Have in mind that the Base64 string may become too long depending on the content of the file and that could cause performance issues when transferring to the client side.

Below is sample code showing both options. To test Option 1, uncomment the relevant code and comment the piece related to Option 2. For generating the PDF file in the sample, we have used the Telerik Document Processing Libraries, so make sure all the required assemblies are referenced before testing the approach:

Note: In its essence, the approach in Option 1 shows how to save the programmatically generated file on the server. Once the file has a physical path, you can follow the same steps and notes as in the File in the application folder—using local or relative path section.

The same functionality can be achieved via Ajax Request (instead of PostBack) to improve the user experience. The code-behind, in this case, stays the same.

Here is the markup with the needed Ajax settings (the Submit button will not be needed in this approach):

File Represented by a Base64 String on the Client Side

You can populate a PDF file to the viewer entirely on the client side. With the help of the fromFile() client-side method, exposed by the RadPdfViewer client-side control object, you can set a Base64 string directly on the client.

Here is a sample scenario where a PDF generated by RadClientExportManager is passed to a RadPdfViewer using the client-side APIs of the controls:

The whole demo is accessible here, so go and give it a spin.

Wrap-up

Having the know-how shared across this blog post, you can now cover all scenarios related to loading PDF contents, files or streams into the RadPdfViewer component. If you stumble upon a different scenario, something useful or just want to share a tip of your own, do not hesitate to place it in the comments section below.

If you like the PdfViewer, you can further play with it at the online demos as well as download its absolutely free and fully functional trial and give it a spin. We value any feedback and the community voice, which you can share at the Feedback Portal too.

Start a Free Trial

Longing to travel again? I bet you are. We all are. Don't worry, we’ve got you covered with our improvised lucky wheel . And though now it's not the time to travel, we're looking forward to the exciting moments in the near future. So, have a spin and find out what’s your lucky destination. Don’t be shy and share your results in the comments.

The “lucky wheel” presented in this blog post is powered by the RadRotator and the RadCard components, part of the Telerik UI for ASP.NET AJAX suite. Find out how to easily leverage the predefined styles of our new Card component and integrate it with any template control with the integration demo revealed later on in the blog.

What we’re going to cover in this blog post:

• Card Component Overview
• Features and Functionality
• The “Lucky Wheel” Integration Demo
• Wrap Up

Card Component Overview

First introduced in R3 2020, the RadCard is one of our latest additions to the 120+ components (and even more to come soon) of our rich and mature Telerik UI for ASP.NET AJAX suite. So, make sure you upgrade to the latest version before you try it out yourself! Read the whole blog to get more familiar with it and utilize its full potential.

The Telerik UI for ASP.NET AJAX Card control Is designed to help you organize content when building catalogues, e-shops, dashboards or even blogs. It quickly grabs the user’s attention with its sleek layout, consisting of a title, image, some text as the body and perhaps a footer. Use cards to create beautiful UIs that enable your users to easily access the information they are most interested in.

The component itself is a very flexible web control inheriting the RadWebControl class and can contain plain HTML elements as well as other Web Forms controls. Allowing you to create the Card from the server side, add controls to it programmatically and access them at a later stage. You can achieve simplicity in your designs with as little code as possible, especially if you are not a huge fan of CSS. But even if you are—it will save you development time and give you a good kick-start.

Features and Functionality

The best part of the Card is that it is extremely customizable. Benefit from a limitless number of options and match the Card to the unique requirements of your application.

To easily achieve the desired appearance, you can choose from some of the predefined CardComponents, most of them inheriting the System.Web.UI.HtmlControls.HtmlContainerControl. The building blocks can be further customized with subcomponents as header, title & subtitle, body, footer, actions and more. Check out our documentation page for a full list of the available properties and their values. Depending on the CardComponent used, you will have some predefined properties that will set the necessary CSS classes for you. For fine-tuning, you can always add HTML attributes, custom classes, and inline styles to both the Card and its components.

Another strong trait of the RadCard component is its ability to seamlessly fit in an ItemTemplate. It allows you to not only to create the card structure by adding its card components, but also to add binding expressions or even other controls. With the assistance of a few helper CSS classes, the content of the card can be oriented vertically or horizontally, and the actions can be stretched, centered, aligned to the start or to the end, as demonstrated in the Card Orientation demo.

It is so flexible that you can easily customize the whole component to rotate on hover with just a couple of styles. Imagine what you can do with more styles and a tiny bit of JavaScript. Feel free to implement the code below on your page and enjoy the RadCard acrobatics.

<style>
    .RadCard {
        -webkit-transition: -webkit-transform .8s ease-in-out;
        transition: transform .8s ease-in-out;
    }

    .RadCard:hover {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
</style>

<telerik:RadCard runat="server" Width="150px" Skin="Material">
    <telerik:CardHeaderComponent runat="server">
        <telerik:CardTitleComponent runat="server">
            Hover me, I will do a barrel roll for you :)
        </telerik:CardTitleComponent>
    </telerik:CardHeaderComponent>
</telerik:RadCard>

The rich functionality of the Card allows it to be used in many app scenarios. Some examples are integration with other controls such as Repeater, ListView and DataGrid, where you can represent the data in a beautiful, consistent and structured way. The “Lucky wheel” demo shown in the next section of the blog demonstrates an integration with a RadRotator. The carousel-like wheel represents a section of rotating images, which when selected display detailed information for the specific card.

The “Lucky Wheel” Integration Demo

We are all dreaming about our next vacation and so badly need to get away. Whether you’re wishing for a sun-soaked beach vacation, safari in Africa or you simply can’t decide where to go next—spin the lucky wheel and see where the wind takes you.

A little walkthrough of what you will see in the Lucky wheel with RadRotator online demo—the landing page is a Rotator control featuring a number of travel destinations. Each destination is represented by a Card that consists of a title, image, description, a list of tourist attractions as well as a few action buttons. Select a destination by clicking on an image or just spin the wheel by clicking the “I am feeling lucky” button.

Once the destination is selected, you can check its details by clicking the “More Info” action. It will load our TripXpert sample application in a RadWindow. You didn’t forget our lovely travel planner sample application, right?

The “Attractions” action button on the other hand will open another RadWindow, this time with a local RadListView that uses a different RadCard layout for its ItemTemplate. There you can see the attractions you can visit for the destination you have selected.

Wrap Up

In this article we have covered the basics of the Card component, its functionality and integration with other controls as RadRotator. Whether you’re thinking of developing a travel app or simply want to have some fun—feel free to try out the “Lucky wheel” and share your thoughts in the comments section below.

In this post we will demonstrate how to use one of the most popular font icons library together with the components of Telerik UI for ASP.NET AJAX suite in Lightweight Render Mode. We'll answer the following questions:

• How to add third party font icons inside the Telerik Controls?
• How to replace the embedded icons with external ones?

Don’t worry, it is easy, and I will help you find these answers by demonstrating four different use cases with four different Telerik Web Forms controls.

The pallet of built-in styles coming with RadControls is rich and can satisfy almost every expectation for aesthetics. As it is expected font icons are part of all that.

Font Awesome is indeed Awesome! The popularity of the Font Awesome Icons is continuously increasing. Recently we have received several questions on how the awesome glyphs can be used in AJAX Controls. That prompted us to create this post.

To avoid making this post extremely long I have picked four scenarios with RadControls that we have been recently asked about. We will demonstrate the integration of Font Awesome in the Telerik AJAX components: Button, Label, Menu and Grid.

The plan:

1. Get ready by referencing Font Awesome on the page
2. Basic usage of FontAwesome inside a RadButton with content template
3. Leverage the CssClass property to bring in font icon in RadLabel
4. Introduce Font Awesome icon in RadMenu using the pseudo elements
5. Use the pseudo-elements to change the built-in icons in command buttons in RadGrid
6. Bonus case: Stacked Icons in RadButon

Get Ready

Include FontAwesome on the page. You can find a detailed explanation of how to do that in the following link: Get started with FontAwesome.

With all the samples below, we will take benefit of the easiest approach—a CDN powered kit code. So just get a personal kit and place it in the head tag.

<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://kit.fontawesome.com/xxxxxxxxxx.js"></script>
</head>

Quick check in the Network tab of the DevTools to see if the kit is working and we have Font Awesome loaded on the page.

In case you are not aware of how to use the Browser’s Developer Tools (F12) to inspect the HTML of the page, the applied styles, check out the Improve Your Debugging Skills with Chrome DevTools blog post before we go on.

Basic Usage of FontAwesome Inside a RadButton with Content Template

Let’s start with the most intuitive way to introduce the icons in generic HTML structure—the ‘Basic use.’ All you need to know about this approach is well described in Font Awesome - Basic Use. In summary, the Basic use of Font Awesome acts for assigning predefined CSS classes to HTML elements. Each font-icon can be placed by setting the respective CSS class:

<i class="fas fa-[Name]"></i>

As for the RadButton, the ContentTemplate allows us to include HTML elements inside the control, so it would let us take benefit from the Font Awesome basic usage.

Markup declaration of the RadButton:

<telerik:RadButton ID="RadButton1" runat="server" Text="RadButton">
    <ContentTemplate>
        <i class="fas fa-power-off"></i>
    </ContentTemplate>
</telerik:RadButton>

Result in the browser:

This is just one way to do it. You can find more details about the integration FontAwesome in RadButton in Using Font Awesome Icons with RadButton.

Leverage the CssClass Property to Bring in Font Icon in RadLabel

This is a pretty convenient way, but it is only applicable for some of the Telerik controls due to the fact that the CssClass property normally applies to the wrapper element of the control.

Note: Have in mind that by default the embedded Telerik skins will be loaded as last references in the <head> tag and will override the font-family coming with the Font Awesome kit. As a result the desired font icon will not be applied. To avoid that we can set the EnableEmbeddedSkins property of the RadControl to false and let Font Awesome styles take effect.

Alternatively, you can keep the embedded skins but ensure the Font Awesome styles are loaded after the Telerik ones by placing the script tag with the kit code in the end of the <body> instead of in the <head>.

Markup:

<telerik:RadLabel ID="RadLabel2" runat="server" Text="RadLabel" EnableEmbeddedSkins="false" CssClass="fas fa-smile-wink"></telerik:RadLabel>

Result:

Introduce Font Awesome Icon in RadMenu Using the Pseudo Elements

In some scenarios the basic approach is not applicable due to the HTML structure rendered by some of the more complex Telerik Controls. Then the advanced approach for including Font Awesome comes in handy. It is well described here: Font Awesome - CSS Pseudo-elements.

Note: Both basic and advanced approaches practically lead to the same result—CSS applying font settings and content value.

With the basic approach the font icons are loaded as Font Awesome resources and we only need to use the correct predefined Class name. In the Advanced approach we need to write our CSS rules. Check out the styles applied automatically to the RadLabel in the screenshot from the previous section.

Let’s bring in a font-icon in one MenuItem inside a RadMenu.

We can use the CssClass property to set a custom class name which will help us apply the icon to the desired item only.

Declaration:

<telerik:RadMenu ID="RadMenu1" runat="server">
    <Items>
        <telerik:RadMenuItem Text=" bag" CssClass="shoppingBag" />
        <telerik:RadMenuItem Text="Item 2" CssClass="item2" />
        <telerik:RadMenuItem Text="Item 3" CssClass="item3" />
    </Items>
</telerik:RadMenu>

In the browser, use the DevTools to define which DOM element needs to be styled. We would need a specific enough selector to ensure that our custom CSS will take effect and will apply on the desired items only.

CSS to bring in the font-icon:

.RadMenu .shoppingBag > .rmLink.rmRootLink {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.RadMenu .shoppingBag > .rmLink.rmRootLink:before {
    content: "\f290";
}

Achieved appearance:

Use the pseudo-elements to Change the Built-in Icons in Command Buttons in RadGrid

The embedded font-icons in Telerik controls are placed in the ::before pseudo element. In order to replace them with Font Awesome icons we need to ensure that we apply custom CSS with selectors ‘strong’ enough to override the built-in icon.

First, we need to define the HTML element containing the embedded icon and then to use proper CSS selectors to overrule the default appearance.

Inspect the Embedded icon and define the selectors:

We can perform a live change using the Developer Tools to find the best fit:

Once we know it, we can apply it on the page with a few lines of CSS:

.RadGrid .t-font-icon.rgIcon.rgDelIcon:before {
    font-family: "Font Awesome 5 Free";
    content: "\f044";
}

Result:

By using the pseudo-elements and the approach above we can style embedded font icons in any Telerik control. You can find more about styling RadGrid buttons in Using Font Awesome in RadGrid buttons.

Note: The font-icons are part of the font family so we can modify their font-size and color just like it is done with the regular text.

Stacked Icons in RadButton

Font Awesome is awesome and provides a nice way to place one icon over another to achieve a more complex meaningful icon.

We use the stacked icons inside a RadButton:

Here is how we achieved the Button demonstrated above:

<style>
    .hidden{
        display:none;
    }
 
    .fa-stack .cornered-tr {
        position: absolute;
        top: 0px !important;
        text-align: right;
        line-height: 1em;
        text-shadow: 1px 1px 1px #000;
    }
</style>
 
<script>
    function onClientClicked(sender, args) {
        var checkIcon = $('.checkIcon');
        checkIcon.toggleClass("hidden");
    }
</script>
 
<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="onClientClicked">
    <ContentTemplate>
        <span class="fa-stack fa-lg">
            <i class="far fa-user fa-stack-2x"></i>
            <i class="fas fa-check fa-stack-1x cornered-tr checkIcon hidden" style="color: lightgreen"></i>
       </span>
    </ContentTemplate>
</telerik:RadButton>

Find more about Stacked Icons in the following link: Font Awesome - Stacked Icons

If this is not enough for you, check out what can be achieved with SVG + JS version of Font Awesome: Layering, Text and Counters.

We have picked some of the most common scenarios for integrating Font Awesome in Telerik AJAX Controls. However, the AJAX suite contains of more than 120 different controls. So if you want to use font-icons with an AJAX control which is not mentioned in the blog post, use the comments section below or submit a ticket to the Telerik Support Team!

If you're interested in trying out Telerik UI for ASP.NET AJAX, you can download its fully functional trial from the link below:

I bet that some of you will find the subject catchy, while others worn-out.

You may also wonder, what do billionaire habits and the Telerik UI for ASP.NET AJAX new Timeline component have in common?

Don’t worry, it is just a way to share with you what I have learned from some popular books, tutorials and videos about self-motivation, time management, work-life blend and personal growth in an illustrative way using our brand new component—the Timeline for ASP.NET Web Forms.

Its amazing capabilities for visualizing dates, events and stories will help me summarize and present the wisdom gained during the past few years that may improve your life and career, or at least make you to become a bit more self-confident.

I am thrilled to kick this off, so let’s go: There will always be a first step and it is to build your own Life-changing daily habits. The question is how to do that without a plan, without a schedule, without some guidance. For the purposes of the blog post and to visualize for you some of the most popular daily routines and habits of the highly successful and, of course, richest people . I created a Web Forms timeline example named Day-Plan (click here) which automatically scrolls to the most suitable routine for the current time of the day.

Here is a short animation of how it looks and behaves:

As you can see everything begins early-early in the morning when everybody else still sleeps. There is nobody else around . Right, only me and it is so quiet, and I can concentrate on the important stuff for me and for the day! The time is mine!

I started to practice the early rising routine two months ago and slowly but surely, I broke the habit to go late to bed, to not sleep enough and to wake up tired. Right now, at this moment, I am feeling great (it’s 5 am) and I can work on the blog super concentrated, creative and productive! I became a morning person!

If you examine a bit more carefully the Day Plan sample, you will count more than 10-15 daily routines, but don’t get anxious, try them out and see which work for you and make your life better. Personally, I am a huge fan of two of them:

• Time Management—This skill is not about adding more and more into your schedule. It is about making smarter, more purposeful choices with the hours you have.
  
  Let me share with you some on my favorite ideas for organizing and saving time:
  • Prioritize your goals when managing your time
  • Identify when you are at your sharpest, and use this time effectively (for example in the morning)
  • Recognize what distracts you and refocus quickly
  • Take regular short breaks for a quick stretch and eye training. Use your lunch time!
  • Switch to another task to clear your mind after some amount of time (you can use a timer)
  • Self-audit—track time for each task you do and identify bottlenecks
  • Set Away status on your online communicator after worktime ends if you are still logged in (be sure to restore it in the morning)
  • Set Busy status when needing no-distractions focused time
  • Set clear deadlines and reminders for upcoming deadlines
  • Request tips, second opinions from your colleagues on tasks you work on for more than usual
  • Share and ask for feedback and general tips and tricks
  • Last but not least drink plenty of water since this will keep your brain fresh and productive
• Long walk/run in the nature—usually this is our neighbor South park (the picture in the demo is from it) or the near Vitosha Mountain. Both of them offer a lot of trees, rivers and make me happy and full of positive energy, and I am also able to achieve my 10,000 steps everyday goal effortlessly and pleasantly.

Just before jumping into the tech specifics of the sample, let’s make a quick overview of RadTimeline features. It displays a collection of events and their data in a chronological succession for each year, month or a day (as in the example). You can scroll through the events and collapse/expand them. The events order can be vertical or horizontal, and you can customize their templates, as well as respond to events and use API control the widget behavior. Other useful features are the out-of-the-box mobile and responsive behavior, flexible client-side and server-side binding mechanism, sorting of items, built-in actions and images support.

Here we go! Here is the desert explaining how the Day Plan example works:

The auto-scroll and expand event functionality is achieved by attaching the JavaScript function below to the OnDataBound client-event of RadTimeLine:

<script>                                                                              
    function onDataBound(timeline, args) {
        var events = timeline.get_dataItems();
        currentDate = new Date();
                  
        for (var i = events.length - 1; i >= 0; i--) {
            if (events[i].date < currentDate) {
                setTimeout(function () {
                    var timeEvent = timeline.get_items()[i];
                    var yOffset = -10;
                    var y = timeEvent.getBoundingClientRect().top + window.pageYOffset + yOffset;
                    //performs a smooth scrolling with a small negative top offset to the most suitable daily event for the current time 
                    window.scrollTo({ top: y, behavior: 'smooth' });
  
                    //expands the routine event for the current time
                    timeline.expand(timeline.get_items()[i]);
                }, 500);
                break;
            }
        }
    }
</script>
<telerik:RadTimeline runat="server" CollapsibleEvents="true" DateFormat="HH:mm"AlternatingMode="true" Skin="Bootstrap" Height="3000px" EventHeight="50">
    <ClientEvents OnDataBound="onDataBound" />
...

If you’d like to make the current event more shining, you can highlight it in the desired color with this line:

//style the header background
$telerik.$(timeEvent).find(".k-card-header").css("background-color", "#ebf5eb");
//apply background to the card body
$telerik.$(timeEvent).find(".k-card").css("background-color", "#ebf5eb");

The default larger padding between the vertical events is also reduced by the following CSS class override:

Here is the difference with the original padding:

<style>
.RadTimeline.k-timeline-vertical .k-timeline-event {
    padding: 0px 0px;
}
</style>

Another interesting thing to note is that the timeline usually displays events spread across one or more years. The current sample is special since it showcases the events in the scope of time for the current day. This is easily achieved via the DateFormat="HH:mm" server property of the control. Using this approach, you can display hours, months and years in it.

Of course, you can find more on RadTimeline for ASP.NET AJAX in its live demos and documentation.

Summary

As you can see, you should be fully devoted to the cause, you will need to sacrifice some of your bad habits and incorporate some new ones, but the end results will be worth it. It may be hard to wake up early and get to bed before 11 PM for many of us, but this is highly recommended since it supports the brain regeneration and boosts its activity and learning in the small hours of the morning.

Let me know in the comments what are your habits, your rules and whether they changed your life for good! Maybe there are some real billionaires among the readers so it will be amazing to get some useful tips from them too. Enjoy!

Last but not least if you like the Timeline Web Forms control used in the demo, you can download its absolutely free and fully functional trial and give it a spin.

The attack often uses the known vulnerabilities CVE-2017-11317 and CVE-2019-18935 to upload and execute the malicious software to versions that have not been upgraded to the latest version of the Telerik UI for ASP.NET AJAX (also known as RadControls for ASP.NET AJAX).

Both of the vulnerabilities are already fixed, and, when they were found, Progress notified all of our active and inactive customers with instructions and mitigation steps so they could secure their apps. See the following blog posts:

• First 5 Tips for Building Secure (Web) Apps
• Security Alert for Telerik UI for ASP.NET AJAX and Progress Sitefinity

Am I Vulnerable?

You can see whether your app is vulnerable by opening its web.config and looking for the type="Telerik.Web.UI.WebResource" handler.

If you have either of the handlers below registered (make sure to look for the type attribute), you are using the Telerik UI for ASP.NET AJAX (Telerik.Web.UI.dll) suite and your app might be vulnerable to CVE-2017-11317 and/or CVE-2019-18935, and you should keep reading.

  <system.web>
    <httpHandlers>
      <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false"/>
    </httpHandlers>
  </system.web>

  <system.webServer>
    <handlers>
      <add name="Telerik_Web_UI_WebResource_axd" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" preCondition="integratedMode"/>
    </handlers>
  </system.webServer>

How to Prevent the Vulnerability?

To make sure you are not vulnerable we recommend that you upgrade to R1 2020 or later, as shown in the diagram below:

You can find more information in the following dedicated articles:

• CVE-2019-18935 - Allows JavaScriptSerializer Deserialization
• CVE-2017-11317 - Unrestricted File Upload

Which Telerik Version am I Using?

There are three easy ways to check the version of the Telerik.Web.UI.dll assembly, which is the main file of the Telerik ASP.NET AJAX suite:

• For ASP.NET WebApplication types of projects, open the csproj file and search for “Telerik.Web.UI” - the path in the HintPath will show you the location of the Telerik.Web.UI.dll file
  

  <Reference Include="Telerik.Web.UI">
            <HintPath>\bin\Telerik.Web.UI.dll</HintPath>
           …
         </Reference>

  Once you have the path from the HintPath, navigate to the Telerik.Web.UI.dll in Windows Explorer, right click, choose Properties -> Description tab and find out the version in the File Version row:

   
  
  

• For ASP.NET WebSite types of projects, go to the bin folder of the web project and right click on the Telerik.Web.UI.dll -> Properties -> Description -> see the version in the File version line.
• Inspect the version in the GAC as explained in the Referencing Assemblies from the GAC article

Feedback and Questions

If you have any questions you can reach out the Telerik support via the public Telerik ASP.NET AJAX forum, by opening a General Feedback ticket or via the support ticketing system (for everyone with an active subscription).