Hello Kendo UI community – I’ve got some really good news to share about the Kendo UI team: we have a new addition to the family with Carl Bergenhem joining as Product Manager!

Who is Carl and why should you care?

Carl joined Telerik in 2009 shortly after graduating from the University of Connecticut with a Computer Science & Engineering degree. During his time with Telerik he held a lot of different technical positions including support, developer relations and sales engineering. During this time he had a chance to be deeply involved on a technical level with every product in the Telerik portfolio, and when Telerik was acquired by Progress he spent two years covering the entire Progress portfolio.

Even with balancing all of these products, Kendo UI has always been the main focus for Carl. In fact, he was a part of the original pre-launch events team for Kendo UI, and really proved that he was willing to do whatever was required when he dressed up in the full Kendoka outfit while manning a booth. Fortunately for him, I don’t have any pictures of this to share with you.

He's served as one of the main technical resources for Kendo UI throughout his time in developer relations and sales engineering, conducting technical presentations and deep-dive trainings on the product, including our recent DevChat.

Carl has a long background in web development (hence the love for Kendo UI) and is constantly tinkering and developing with the latest and greatest tools and technologies including Angular, React and Vue. He's spoken at events and conferences across the globe on web development and is a passionate evangelist about the awesome world of web development.

Amazingly, with all of this going on Carl actually does have a personal life as well. In his free time Carl tries to stay as active as possible and can often be found in the gym or, weather permitting, hitting the slopes to get a snowboarding session in. While his original goal as a professional FPS player didn't quite pan out, he still is an avid gamer, having slayed countless virtual monsters and players alike throughout his career.

Carl loves nothing better than talking with people from the web developer community. Feel free to reach out to him via twitter (@carlbergenhem) or email bergenhem@progress.com. 

Welcome to the team Carl!

Learn about two powerful open source tools you can use to build your UWP apps—UWP Community Toolkit and Telerik UI for UWP.

As a UWP developer, you have many options to help build your application quickly and reliably. In fact, there are so many options that you may feel like you can choose only one. Luckily, that’s not the case, and many toolkits complement each other in various ways.

Today, we’ll talk about two open source toolkits:

• UWP Community Toolkit
• Telerik UI for UWP

Both are open source, but each has different strengths. These two particular toolkits can bring tools and controls for a variety of application scenarios. Let’s start by introducing the toolkits and how they can help.

UWP Community Toolkit

The UWP Community Toolkit is the ultimate collaboration between Microsoft and the UWP developer community. With dozens of features such as helper functions, custom UI components, animations and app services, the UWP Community toolkit is a great time saver and can bring your application to the next level.

The toolkit has had 12 releases so far and is currently on v 1.4 (released on April 3, 2017). It has more than 80 contributors, with thousands of commits, and the community is constantly working on improvements. Conveniently, it’s broken up into several nuget packages so you can pick and choose exactly what you need.

Examples of this toolkit’s power can be found in the Services namespace, where you can easily interact with social media services with as little as two lines of code.

Here’s an example of getting a Twitter user’s timeline:

TwitterService.Instance.Initialize("consumer-key", "consumer-secret", "callback-uri");
ListView.ItemsSource = await TwitterService.Instance.GetUserTimeLineAsync("user-screenname", 50);

You can find a full demo application here in the source code or here in the Windows Store. Go here to see a full list of the available features (controls, helpers, etc.) and go here to find the documentation.

Telerik UI for UWP

Telerik UI for UWP, from Progress Software, is a recently open sourced toolkit that contains an amazing set of Line of Business (LOB) controls with which you can create native, business-focused, UWP applications. With controls such as DataGrid and RadListView, the Telerik UI provides the powerful sorting, grouping and editing experiences you might expect from a desktop application, as well as rich data visualization experiences with controls such as Charts, Gauges and BulletGraphs.

We recommend you check out the Customer Database Example application here on GitHub to see the DataGrid in action, as well as the SDK Examples app here. You can see a full list of available controls here and find the documentation here (if you’re looking for a little extra help, Progress Software also offers professional support in the premium package).

An example of this toolkit’s power is the RadDataGrid. With one line of code you get a bunch of out-of-the-box features like grouping, sorting and filtering.

You can install UI for UWP in your application using the nuget package or build from the source directly. If you would like to read more about why Progress Software open sourced Telerik UI for UWP, we recommend you check out this great article.

Contributing

If you’re a developer who likes contributing to GitHub repos and giving back to the community, or if you have ideas to make things better for other developers, both toolkits accept pull requests and each has its own contribution guidelines (here for UWP community toolkit and here for Telerik UI for UWP).

Wrapping up

Both toolkits complement each other. You can use them side by side in your application to bring the user a delightful, yet powerful, experience in your UWP application. With dozens of UI controls, helpers, services and more, you can get your UWP app to market faster and with more confidence than ever. We look forward to seeing your UWP Community Toolkit and UI for UWP powered applications in the Windows Store!

Resources

• UWP Community Toolkit GitHub Home
• UWP Community Toolkit documentation
• Telerik UI for UWP GitHub Home
• Telerik UI for UWP documentation
• Get started with the UWP SDK
• Windows Template Studio 1.1 released!

This week on our "Kendo UI DevChat" series on web development, we built dashboards with Angular and Bootstrap 4. If you missed it, check out the replay as we answer questions we couldn't get to live.

The fun never ends with the Kendo UI DevChat webinar series! This time we covered how to build responsive dashboards with Angular and Bootstrap 4. The session was jam-packed with content and we had a very active group of attendees! As promised during the webinar I wanted to follow-up with the recording, sample project, some helpful links, and of course an extended Q&A section!

Webinar Recording

If you were unable to join in or if you want to watch the webinar for a second, third, fourth, maybe or even fifth time () then you can find the recording on our YouTube channel.

You can also find the completed GitHub project right here.

Additional Resources

As mentioned I wanted to add in a few resources for everyone to read to understand more about the changes in Bootstrap for v4. Here's a quick list that should help you get up to speed pretty quickly.

• What's New and What's Changed in Bootstrap 4
• What's New in Boostrap 4
• Bootstrap 4: What's New (A Visual Guide)
• Bootstrap official site

Questions and Answers

Throughout the webinar we had quite a few questions come through about Bootstrap, Angular, and Kendo UI! So, I tried to organize the questions below to have them be grouped together a bit logically.

Isn't Bootstrap v4 still in alpha? How safe is it to use it in production-type projects?
Actually, as of the day after this webinar the beta of Bootstrap v4 was released! So, the team keeps on trucking with releasing new versions. Yes, Bootstrap v4 was in alpha 6 during the webinar, but with the recent switch to beta we are getting closer and closer to the actual release. According to this issue on Bootstrap's GitHub repo the team has stopped work on Bootstrap v3 in order to get Bootstrap v4 out there and this beta release continues the march towards the initial release.

Would it make sense to organise widgets/components in a subfolder of the "app" folder, or is there a preferred folder structure you've worked with?
For the sake of brevity during the webinar I was just adding in components and widgets in to the app folder, but making sub-folders are definitely a good idea. I recommend looking at the official Angular styleguide for help on how to structure applications.

What is the unit of width? Is it number of pixel?
The main CSS unit has switched from px (used in v3 and lower) to rem. So, whenever we talk about a unit of measurement we are referring to rem. If you're interested in what rem is versus em, something you may be more familiar with, then I recommend reading this blog post. Also, for more information on what is new you can refer to the Bootstrap v4 migration guide.

What is "my-3" that you add on your classes?
So, with Bootstrap the team has set up some spacing utilities that one can use on any Bootstrap element (and it should work with other elements as well). This documentation section goes into more detail, but what "my-3" specifically does is apply a margin (hence the "m") on the y-axis (adding in "y") and we're using "3" here which is tied to the $spacer variable (not "3 units" as I mentioned in the webinar - my bad!).

Is Bootstrap v4 backward compatible?
While there are many familiar aspects of Bootstrap v4 compared to other versions, due to this being a major rewrite of the project I wouldn't call it a safe backwards compatibility. There are things like browser support (IE10+ and iOS 7+ for Bootstrap v4) and other items that add to this as well, not just new conventions. So, for now I would treat this as something that needs migration and rework in your projects. Luckily this Migrating to v4 document is helpful and continues to be updated to help with this process.

Is there a built in support for breadcrumb nav?
Yes indeed! This Bootstrap component called "Breadcrumb" should help with this requirement. You may need some more advanced routing set up in Angular, but the same idea of using routerLinks and routerLinkActive should work with this component as well.

What is the main advantage to migrate from Bootstrap 3.x.x to Bootstrap v4?
I discussed this a bit during the webinar as well, but overall I think the main advantage of upgrading to Bootstrap v4 is to keep up with the latest and greatest. Under the hood you have things like dropping support for older browsers (read: getting rid of superfluous code) and using newer CSS features (generally performance and productivity enhancers), but also streamlining features like the new Card (replacing many components from Boostrap v3). You also get to start using Sass rather than Less, which is where the CSS community is trending.

Could you show the Kendo UI Charts integraded as widget?
You're in luck! The GitHub project actually has a chart added, I just didn't have time during the webinar. Download it and try it out!

Is media attribute for the Grid available with the Kendo UI Default theme?
Yes indeed it is! However, when you're not working with the Bootstrap theme (which I was using in the webinar) you have to work with the matchMedia browser API like we do in this sample. The benefit of working with our Bootstrap theme is that you can use the breakpoint conventions from Bootstrap. The good news is that if you don't want to stick with the same set of colors as we offer out-of-the-box you can use our Sass Theme Builder to customize the Bootstrap theme colors with ease!

Is Kendo UI using only Bootstrap's CSS rules or does it carry its own?
With the Bootstrap theme we tend to use Bootstrap's CSS rules, but of course one can tweak and customize this from both a Bootstrap and Kendo UI point of view. If you're using the Default theme then you could also work with the matchMedia setting like I mentioned above.

Why do you set height like [height]="410" instead of height="410"?
So, setting the height like height="410" will work just fine as well. However, when you start doing down routes like binding this to an object or anything but a static height like this you'll have to start using [height]="x", so I tend to just stay on the safe side and work with the brackets here.

Is there a "fluid" component that will allow the grid to resize vertically as the windows resizes vertically?
This is a bit trickier than dealing with the width. While I do not have a great sample of this using Angular, we do touch upon the topic and how it can be addressed in this documentation article for the jQuery and AngularJS (1.x.x) version of the Kendo UI Grid. The tl;dr is that it's not as easy as setting a height of the Grid as a percentage due to how the web requires elements to work. I recommend reading the article I just linked to get a deeper understanding of how this can be implemented.

We’re pleased to announce that the Progress Telerik UI for UWP project will be joining the .NET Foundation. The .NET Foundation is an open source organization dedicated to guiding the development of the .NET ecosystem, based on principles of openness, rapid innovation and community participation. As a huge investor in the .NET ecosystem, we’re excited to begin contributing our code and expertise to this project.

Why We are Joining the .NET Foundation

Simple—we want to support the community. It’s you who have made us what we are today, and this is one way we can give back (we have other open source projects too). Our goal as always is to make your lives as developers easier. It’s important to us to contribute to a strong .NET ecosystem, and when you’re getting work done better and faster, we know we’re doing our own jobs well.

What this Means for You

The Telerik UI for UWP suite was released to the community as open source earlier this year, and the code will now be contributed to the .NET Foundation, to make it even more accessible and visible to the worldwide .NET Community.

Telerik UI for UWP components can be used for both personal and commercial Windows 10 applications, and includes complex controls such as Grid and Chart. Rather than reinventing the wheel, you can save time and take advantage of our open source solution completely for free. Not only that, but the full source code is available for you to review. We’ve been developing .NET controls for a long time, and we hope that we can help the community learn the best practices that our developers have to offer.

The community of developers targeting Windows 10 and building UWP apps is constantly growing. One of the main advantages of open source projects has always been the ability to talk and discuss roadblocks with other professionals around the globe. Additionally, if you have any ideas and suggestions, feel free to contribute directly to the project on GitHub, guiding the future of the toolkit.

As a matter of fact, the first 20 top contributors will be getting a special surprise by the .NET Foundation and Telerik teams—a limited edition T-shirt.

To qualify as a top contributor, you must either:

• Fix a bug
• Add new functionality
• Solve an issue that has already been submitted

Afterwards, just tweet the link to your commit with #TelerikUIforUWP and @Telerik. We will review it and notify you over Twitter/GitHub if you scored one of the sweet shirts. Hurry up!

For those who need a more formal level of assistance, enterprise-class support is available as well, guaranteeing you rapid and professional support directly from the developers who built the project. Anyone can get a free trial of our full support by simply downloading the trial from our website.

Learn More

We’re thrilled to join the .NET Foundation and to formalize our commitment to the open source future of .NET in this way. It’s a future we strongly believe in, and one which we think will be awesome for developers, so we want to do our part.

Curious to learn more about the .NET Foundation, or even to get involved yourself? Check out their site or dive into the community forum.

To find out more about UI for UWP, you can check it out and contribute on GitHub, or learn all about it here. Lastly, if you want to start a new UWP project, check out this great tutorial by John Bristowe on Getting Started with Telerik UI for UWP.

We can’t wait to see all the great apps that will start popping up in the Windows Store!

Happy coding!

Data display has advanced from simple HTML to advanced JavaScript-based Grid components. Learn about this evolution and how to build a modern grid today.

Displaying Data—HTML Tables

The language of the web, HTML, was originally conceived in 1980 (although not fully developed until 1990) as a document markup language, as its name states. One of the critical elements that needs to be displayed in documents, of course, is tabular data. A core element of HTML is the table. Tables allow the user to easily specify rows and columns and makes sure that all the data lines up and is easy to view and understand. Tables allow basic control like alignment, cell color, padding, borders, etc. Enough to create a basic table. If you just want to display a simple, small table, then HTML tables are probably enough for you.

Fig.1 – basic HTML table

From Documents to Apps—Enter CSS JavaScript

The next major expansion came with the development of CSS (Cascading Style Sheets) in 1994, which added a wealth of style control and also allowed the separation of style and content. Linked documents were great, but the need to have some sort of functionality built in quickly arose. In 1995 JavaScript was developed as a way to make the growing web more dynamic. Web pages had more and more functionality added and what started out as documents evolved over time to become full featured applications. Libraries making use of CSS and enhancing the basic functionality of JavaScript proliferated, with one of the most common today being Bootstrap. Bootstrap was originally developed by Twitter and was released as an open source library in 2011.

Making the Tables Pretty—Bootstrap Tables

Tables are useful, but not particularly interesting. One way to make an HTML table more useful and visually appealing is to use Bootstrap table additions. These allow the user to add a variety of graphical items to the table by specifying alternate striping, hover behavior, enhanced colors, more complex borders, etc. This makes the tables easier to view and more attractive, but they are still just basically dressed-up tables. Still, if you are using simple tables then the Bootstrap Table features are an easy way to enhance the look and feel of your data that is displayed in a table. 

Fig. 2 – Bootstrap-styled table

Tables vs Grids

One point of terminology that should be mentioned is that the terms grid and table are sometimes used interchangeably, but also often used to describe similar—yet different—things. A Bootstrap grid, for example, is used mostly for page element layouts. A Bootstrap grid can be used to display tabular data, but has many limitations. These include its limitation of 12 columns, as well as its responsive handling of columns which is great for graphic elements and text blocks but not so helpful for table data. The Bootstrap table support is geared more at the display of tabular data than the Bootstrap grid. However, the most recent components aimed at displaying tabular data are generally called grids and not tables.

Turbocharging the Web—jQuery

Many libraries have been developed to enhance JavaScript, and one of the most popular today is jQuery. First released in 2006, jQuery provides features that help programmers control and interact with the web page (technically with the DOM, or Document Object Model) with full cross-browser compatibility. jQuery is widely used and forms the foundation of many other tools and libraries that are built with JavaScript. This helped speed the migration from static web pages to dynamic applications, and allowed for the development of tools to make web-based apps rival the features of native applications.

Specialty Grids

With the rise of online apps implemented as single web pages, the need for more advanced data functionality grew. Grids (or Tables) made a quantum leap and now became available with features that compared to stand-alone spreadsheet tools like Excel. Users were familiar with the features available on Excel and other tools for the grouping, sorting, and organizing of data tables, and they expected them to be available in the new web-based apps as well. UI components like the Grid component from the Kendo UI library delivered on these features and gave users a rich assortment of data manipulation features. These include functions like grouping, sorting, advanced data binding, exporting to popular formats like PDF and Excel, editing, and many many more.

Fig. 3 – Kendo UI Grid, sorting

In the example above (fig 3) we see that the column “Quantity” has been sorted ascending, which we can tell from the data itself and also by the “up arrow” next to the “Quantity” header. In the example below (fig 4), we see a filter form that has been opened by clicking on the funnel icon in the “item” column.  This dialogue lets us define one or two filters of different types (equal, not equal, begins with, ends with, etc.) and then define a Boolean relationship (and, or) between the two. Once applied, this will filter the data that is displayed. There are many other advanced features available, and this is just an example of two of them.

Fig. 4 – Kendo UI Grid, filtering

Conclusion

As the use of the web proliferated, the options for data display evolved from basic document markup to interactive tools. The most popular format for data display is in tabular format. Basic table features are included in HTML, with enhancements added by libraries such as Bootstrap. But as new tools took advantage of libraries like jQuery, a whole new class of Table, or Grid, became available with UI components like the Grid from the Kendo UI library.

Not everyone is developing complex web-based apps, and for people who are really just displaying static information with small tables, basic HTML tables are fine, especially when dressed up by Bootstrap or other table features. For users that do need to provide users with a way of viewing and manipulating tabular data, modern grids are an easy way to drop in advanced functionality and eliminate the distinction between native apps and web-based apps.

Want to Learn More about Grids?

Sign up for a free trial of Kendo UI and experiment with full-featured Grid (and other jQuery/Angular) components for yourself right now. 

Try Kendo UI

For more information:

• HTML: https://www.w3.org/html/
• CSS: https://www.w3.org/Style/CSS/Overview.en.html
• jQuery: http://jquery.com/
• Bootstrap: http://getbootstrap.com/
• Kendo UI for jQuery Grid Demo: http://demos.telerik.com/kendo-ui/grid/

Our second installation of “Kendo UI DevChat” has come and gone! Time flies when you are having fun. This second session was about the Kendo UI DataSource and how it makes it dead simple to connect Kendo UI Widgets to both local and online data sources. In particular, we had the chance to take a look at a Kendo UI Grid and a Kendo UI Chart both bound to the same data array. Any methods invoked on the DataSource would graphically be reflected on the UI widgets bound to it. Furthermore, we had the chance to implement full CRUD operations on the Kendo UI Grid via a ASP.NET CORE backend.

Here you can find the online dojo we worked on for the first part and here’s the Github project with the asp.net core website we used as backend for the second half of the demo. And you can check out the recording of the whole chat below.

As usual we received great feedback from you in the form of interesting, thought-provoking questions!

Questions and Answers

Can I bind a DataSource to a local array?
Certainly! Please see our demo on Local Data Operations on the Kendo UI DataSource.

Is there a limit of maximum data that the DataSource can hold?
There is no set limit. The DataSource has a first-class concept of Pagination, which is the recommended approach to take when you are expecting to deal with large amounts of data.

How can I handle Master-Detail Scenarios?
Since these scenarios usually require that the Child Grid display different (although related) data from the initial DataSource, it is recommended that the child Grid have its own DataSource filtered by a key value from the parent. Please see our Kendo UI Grid hierarchy sample for an example of this.

Can I change the data in the DataSource programatically?
Definitely, the Kendo UI DataSource has a sync method that will push/confirm any changes to the underlying data in the DataSource.

I have a local array -> I bind 2 grids to it -> I change the array -> will the grids get notified about the change?
The grids will not be notified. The recommended approach is to use the DataSource API to make the changes to the data. Please see this sample

What is @section <scripts>
This is a Razor feature that allows a razor file specify the place where the body of the section should be put when merging with the Layout file.

If you set up pagination for your DataSource and you have a chart sharing that DataSource, will the chart only show information relevant to that current page of data?
Correct, with this set-up the chart will always remain in sync with the current view of the DataSource.

We've assembled our top tips on grids in one place to help you get the most out of the grids in your web applications. Check it out.

Grids (or grid views or datagrids) are a simple and effective way to display tables of data on a page. Lots of devs use them all the time, and they have a long history in web development. However, it's easy to use them poorly, resulting in a less than optimal user experience. As part of our mission to make the lives of developers easier, we've put together a list of tips that will help you achieve the full potential of the grids you use in your web applications.

Check out all our top 17 tips below, or head right to your favorite with our handy Table of Contents.

Table of Contents

Tip #1. Use the Right Data Format

Data comes in a wide variety of formats, including XML, YAML, JSON, CSV and more. Each data format has its advantages and disadvantages. A robust grid should be able to bind to data in these formats. As a side note, the task of converting data from one format to another should be avoided since it can impose a performance penalty when binding data to a grid. Therefore, it is best to bind a grid to the data in its original format if the grid supports it.

Tip #2. Support Caching for Offline Applications

It’s important to utilize caching of data that is bound to grids whenever possible. Caching can reduce or eliminate the need to issue HTTP requests and can greatly improve the overall performance and scalability of your web apps. Most of the time, HTTP caching will help as well through the response headers returned by the web server when data is requested. However, there are scenarios in which it’s useful to have grids support a local cache of data on the client itself. Offline application support is one such scenario where local caching can greatly improve the overall user experience.

Tip #3. Enable Data Virtualization

When working with a large amount of data in the grid, the task of fetching and processing this data can impose a significant runtime performance penalty due to limited browser resources. Virtualization, a technique used to mitigate slowdown stemming from operating with huge volumes of data, will display the data in the grid as it’s needed. It achieves this by displaying the items for the current page index and retrieving items on-demand. In the case of a grid being bound to data from a remote location, this includes automatically requesting data from the endpoint.

Figure 1: Grid bound to 10 million rows in less than a second (through virtualization)

Tip #4. Support Multi-Column Sorting

The ability to sort data is a core feature of grids. It enables users to quickly organize data to discover patterns and gain insights. Most grids provide primitive sorting mechanisms that operate against columns of data. Ideally, a grid should also include features like sorting against non-string types such as numeric values and dates as well as sorting across multiple columns.

Figure 2: Sorting with multiple sort orders enabled

Tip #5. Leverage Extensible Paging

Paging is another core feature of grids. It enables users to quickly navigate data through pages (or indexes). Most grids provide this capability but few go beyond the fundamentals of paging to include features like extensibility to support custom paging. When selecting a grid, it is important that paging is not only supported, but that it works in conjunction with other features like sorting and filtering. For example, if I sort the contents of a grid then I should be able to navigate the sorted contents through its paging functionality.

Figure 3: Paging with indexes, an option for items per page, and textual feedback on page location

Tip #6. Utilize Effective Databinding to Remote Data

A grid is meaningless without data. And while binding a grid to data may be a typical exercise, it’s often the task of retrieving the data that poses the greatest challenge. That's why it's important for a grid to support binding to both local and remote data sources. While most grids support binding to local data sources like an in-memory object or collection of objects, few grids support conducting CRUD operations against remote data sources. That’s because they impose challenging requirements such as network latency, data formats, security constraints and messaging protocols. When choosing a grid, it’s important that it provides support for binding to remote endpoints that expose data.

Tip #7. Take Advantage of Push Notifications

Webpages are often viewed as static resources; after a webpage is requested, the data it contains does not change. This is not optimal for situations where updates to the data occur behind the scenes. Ideally, these updates should propagate to the grids that display this data without the need for issuing new requests. Fortunately, protocols such as SignalR and WebSockets facilitate the ability for grids to receive real-time push notifications from endpoints. Supporting protocols such as these in grids provides a vastly improved user experience and should be taken advantage of whenever possible.

Tip #8. Support the Exporting of Data to Multiple Formats

Once a grid is loaded with data, users may wish to export the data to popular file formats like Word or PDF. Many grids don’t provide this functionality out of the box. Instead, it’s a task that’s left to the developer through third-party libraries. A grid should support exporting bound data to these popular file formats as well as simpler representations like JSON or XML.

Figure 4: Exporting data in a grid to PDF and Excel

Tip #9. Support Both Batch-Based and Inline Editing of Data

Grids are effective at displaying large amounts of data. However, to be useful, they should allow users to modify the data contained within them. Grids should support the creation of new data, the modifying of existing data and the deletion of entire rows. For a better user experience, grids should support operations either through inline form inputs or external dialogs. Furthermore, the edits made to grids that are bound to remote data sources should support propagating updates either as a batch operation or as single operations performed one at a time on a row-by-row basis.

Figure 5: Inline editing of data in a grid

Tip #10. Provide Type-Aware Filtering

A grid can be a highly effective tool for analysing data. However, grids can become overpopulated, making it more difficult for users to gain insights from the data being displayed. That’s why it’s important for grids to apply filters on the data. This capability should be provided for individual columns by type-aware operators like “greater than” or “less than” for numeric values and by Boolean expressions for string-based values. Furthermore, these type-aware filters must work in conjunction with features such as paging and sorting in order to be effective for users.

Figure 6: Type-aware filtering on grid columns

Tip #11. Leverage Templates for Data Layout and Appearance

Templates provide the ability to control the layout and appearance of data contained in grids. For example, they can be defined to control the overall output of rows and columns. They can also be defined for peripheral elements like an embedded pager or toolbar. Templates are sometimes overlooked by developers when choosing a grid because they appear simple. However, they are a powerful extensibility mechanism that should be prioritised when evaluating grids.

Figure 7: Custom template used in a grid

Tip #12. Utilize Frozen Columns for Data Navigation

It’s not unusual for the data bound to a grid to exceed the boundaries defined to contain it. This happens frequently with data that has a large number of rows. In the case where the data has a large number of columns, it’s useful for grids to support frozen columns. These are columns that remain displayed in the grid when the user moves from side-to-side when navigating the data horizontally. It’s a feature that’s useful when correlating values against the data that’s found in these frozen columns.

Figure 8: Frozen columns displayed in grid (note the scrollbar at the bottom)

Tip #13. Utilize Themes

Themes are important because they provide a consistent experience for the user. It is important that grids provide the ability to customize their appearance and behavior. Grids should provide a set of themes that match popular user experiences like Google’s Material Design. Furthermore, these themes should be documented and easily modified to suit a range of requirements. When targeting grids, it is important that you utilize the themes provided. They also provide the added advantage of being able to swap them out for alternatives should the need arise.

Figure 9: Grid theme support (example: Progress Sass ThemeBuilder)

Tip #14. Support for Responsive Design

Responsive design is facilitated through media queries and layout grids via CSS. However, in the case of grids that are used to display data, more work is needed in order to support a design that’s responsive. The web isn’t just isolated to the desktop browser anymore, it’s available on a wide range of devices with different resolutions. A grid must be able to support a responsive design out of the box in order to provide a good user experience. It is important to think about the common scenarios for grids used to display data. Most grids support responsive design by hiding the right-most column for each display breakpoint that’s encountered for the variety of screen resolutions that exist. This is a good solution for most general cases. However, it may be worth preserving the visibility of these columns, especially if they contain important values such as a total sum. These scenarios must be considered carefully.

Figure 10 Left: Grid with 1280 pixel width, Right: Grid with 566 pixel width

Tip #15. Use Embedded Data Visualizations

Data can be hard to understand—that’s why we use charts and graphs to visualize it. This helps spot trends and gain insights. In many circumstances, it’s useful to have a visualization in close proximity to the data in a grid. A grid should support this capability through sparklines and/or embedded charts.

Figure 11: Grid with embedded charts

Tip #16. Support Detail Templates

The structure of data is often hierarchical. Therefore, it should be represented as such in grids. Providing a detail template for data helps users to gain more insight by allowing them to drill into related rows. Grids should provide the ability to support hierarchical data and enable users to see the related items when expanded inside the display itself.

Figure 12: Grid with details provided through a tab strip

Tip #17. Use Aggregates to Provide Insights into Data

Aggregates are calculations based on the grouped data that they contain. They are often found at the bottom of grid groups or columns. They are useful because they provide insights into grouped data without the need for additional columns. An effective use of aggregates in grids provides these summaries whenever they are available to be displayed.

Figure 13: Grid with aggregates provided for grouped data

Wrapping Up

As you can see, grids provide a powerful control for encapsulating data. Use them effectively and you can provide users with lots of insights into data. We hope these tips help ensure that you get the most out of the grids you use in your web applications.

Learn More: Kendo UI and the Kendo UI Grid

We've used our own Kendo UI Grid in the examples shown above. If you're not familiar with it, this grid, like the other components in the Kendo UI library, provide users with a rich set of features and easy integration with any environment. Now that you’ve seen some of the features you should be looking for in a grid component, feel free to take a look at how that works with a real life example. Kendo UI is available for a free trial and comes with examples and extensive documentation. Head to the Kendo UI website to find out more.

In this guest post from the Windows Developers Blog, learn what's new in UI for UWP and check out some powerful ways to put the controls to work for you.

In case you missed it, Progress Telerik UI for Universal Windows Platform by Progress was released as free and open-source earlier this year. With more than 22 XAML controls, this news has made it easier than ever before to start building UWP apps. Rather than needing to rewrite many complex XAML controls spanning user scenarios across data management, data visualization, navigation and more, you can use Telerik’s controls for free. To get right to it, check out the Downloading and Using the Controls section in this blog post . Not only that, if you need to make modifications to the code, you can simply fork their GitHub repository and work independently.

Telerik has recently demonstrated their continued investment in providing the best possible UWP developer experience by updating their controls packages to opt into the new Visual Studio 2017 design-time experiences for XAML controls from NuGet packages. Read below to see what’s new and to learn how to try out the controls.

Design Time Tooling for XAML Controls in NuGet Packages

In the past, developers who consumed XAML controls from NuGet packages had limited design time tooling. To successfully use and discover the controls required hand editing the XAML file. With the latest version of Visual Studio 2017, we have introduced new features that controls authors can leverage to improve the design time experience for developers using their controls. Progress has partnered with us to update their Telerik UI for UWP controls packages to add Toolbox support to easily view and categorize their controls.

As soon as you reference the NuGet package in your UWP application, these new controls will appear in the Toolbox for you to use in your application. You can use these controls just like any other Toolbox control, with drag and drop support on the design surface.

Controls in Action

If you want to learn how to use Telerik UI for UWP controls in your application, download and try out their sample application. Not only is this a good way to see what the controls are capable of, but it acts as a learning tool with the code snippets available in the app itself.

Downloading and Using the Controls

If you want to use Progress’ Telerik UI for UWP controls in your next UWP application, you can do the following to get the controls in your app.

1. Make sure you are on the latest version of Visual Studio 2017 for optimal design-time experiences: https://www.visualstudio.com/
2. In your UWP app, right click on the project’s “References” node in the Solution Explorer and select “Manage NuGet Packages…”
3. Search for “Telerik.UI.for.UniversalWindowsPlatform”
4. Install the latest version of the package to get Toolbox support, and future updates
5. Open a .xaml file and observe all the controls available in your Toolbox

Feedback!

We’re constantly trying to improve the developer experience for UWP developers. If you have any feedback for us as you build UWP applications in Visual Studio, please let us know by using the Visual Studio Report a Problem feature found in the top right corner of the Visual Studio Installer, or Visual Studio itself. You can track your feedback on the developer community portal. If you’d like to provide a feature suggestion to the Visual Studio team, you can use the Visual Studio User Voice.

If you have any feedback specific to the Telerik controls, you can file an issue on their GitHub repository.

Note: This article was originally published on the Windows Developer Blog and is republished with permission.

We are announcing official support for React and Vue, and are supporting a pre-release program for customers who want advanced access to the React library.

We're please to announce that Kendo UI, the premiere UI component library for web development, is gaining support for the React and Vue frameworks. This expands our current technology support that already includes jQuery and Angular versions.

These React components are wrapped around the jQuery edition of our components and will serve as a way for fans of Kendo UI to also quickly enhance their React apps with the large set of components already offered with Kendo UI. Our support for React is currently in pre-release availability, with Vue pre-release coming shortly and the official release for both coming in September. We are now making the React components available for developers that are interested participating in our pre-release program.

Pre-release customers will receive a longer duration free trial period, gain advanced access to the new technology as it becomes available, and will receive advanced support during the pre-release period.

If you are interested in participating in our program, please contact me at carl.bergenhem@progress.com. Otherwise, stay tuned in September for more information about this new release!

The R3 2017 release of Kendo UI is with huge updates—like support for React and Vue.js—plus new components and features across the board.

Do you feel it? That special kind of feeling that only comes around three times a year. That's right, it's time for a new release! Today I am thrilled to announce the R3 2017 release of Kendo UI! We have an enormous set of enhancements for Kendo UI coming at you, including support for two of the most popular JavaScript frameworks out there: React and Vue.js. On top of that existing flavors of Kendo UI have had new components and features added to them—so no matter what frameworks you're developing with there will be something new for you to add to your apps.

Continue to read the highlights below and see how the Kendo UI components will unleash the JavaScript warrior within you!

There's a lot of content in this blog post so here's a table of contents for you to navigate through everything a little easier.

Table of Contents

1. React and Vue.js support comes to Kendo UI
2. Kendo UI for Angular gets even better
3. ASP.NET Core 2.0 Support Added
4. More enhancements to the jQuery edition
5. New and improved support packages
6. A brand new bundle: DevCraft UI
7. Want to see more?
8. Is something missing?

React and Vue.js support comes to Kendo UI

You've asked for it, and here it is! As of R3 2017 Kendo UI adds support for both React and Vue.js, adding to the impressive list of JavaScript frameworks that we support.

This means that as a Kendo UI developer you can now write applications using:

• jQuery
• AngularJS
• Angular
• React
• Vue.js
• Aurelia (through the Aurelia-Kendo Bridge)

This initial release of React and Vue support are an official set of wrappers around Kendo UI that gives immediate support for the large set of Kendo UI components that already exists. The Grid, Scheduler, and many of your favorite widgets are all available with this release. Of course, this also means that you can submit support tickets on any issue you run in to with these widgets. There are some widgets that are still being worked on, but these will be rolled out as they are ready within the next couple of months.

These components are taken to the next level with support common framework integrations with React and Vue (like Redux) so they offer several improvements on top of the Kendo UI framework to ensure that developers can continue to utilize all of their favorite utilities and toolkits. We will cover this more in our sample resources but the initial feedback that we've had on the React side when showcasing this architecture of the components has been very positive!

As for native components for each of these libraries, you should stay tuned for updates to the Kendo UI roadmap. There are too many goodies in this release to cover the specifics right here.

Rather than go through each component and specific implementation details here I encourage everyone to view our getting started materials and documentation for each of these frameworks. To get access to the demos you can simply click on your favorite component and find either "React" or "Vue" in the left-hand side menu.

React

• Getting started with Kendo UI & React
• Demos for Kendo UI & React

Vue

• Getting started with Kendo UI & Vue
• Demos for Kendo UI & Vue

With the R3 2017 release of Kendo UI you can truly have it your way with your JavaScript development. Stay with a framework, jump from framework-to-framework, or just experiment with what else is out there! No matter the choice of framework Kendo UI has got your back.

Kendo UI for Angular Gets Even Better

Continuing to add more and more functionality to Kendo UI for Angular, our native set of Angular UI components, we have added more functionality to our already powerful Grid and ever-expanding list of form elements. Additionally, we've brought initial support for the Material theme, and we've brought our PDF rendering library to Angular.

Material theme support

Angular Material is a very popular set of components and guidelines around the design of your application offered by the official Angular team. Since Kendo UI for Angular is a native set of components it makes a lot of sense for us to offer support for the most popular design methodology that goes hand-in-hand with the Angular framework.

This release brings our first set of components that can be styled with the Material theme. This is currently a subset of the Kendo UI for Angular components but we're going to steadily be adding supported components with this theme.

This is a very deep integration with a theme by the way - no shortcuts are being taken. We've even gone as far as providing custom directives for common features of Material, like the Material ink ripple effect.

Figure 1: Material theme on some Kendo UI for Angular Components

Figure 2: Material ink ripple effect at work

Always be on time with the TimePicker component

R3 2017 brings out the new TimePicker component. As the name kind of gives away, this new widget is designed to give users an intuitive way to select a time slot within a dropdown. Our design team knocked this user experience out of the park if you ask me!

Figure 3: New TimePicker component

Grid updates

The Grid has a whole slew of new features added to it with R3 2017.

One of the most requested features was selection and we brought that with plenty of gusto! Not only do we offer traditional selection through single and multiple options, but we added support for checkbox only selection for scenarios where you only want checkbox interaction to select or deselect a row.

Figure 4: Grid row selection

We also added in-cell editing with this release. Not everyone wants to put entire rows in edit mode, or work with a bulky external form, just to update single cells here and there. So, now you can offer editing on a cell-by-cell level and your users can now become data-editing wizards!

Figure 5: The in-cell editing mode of the Grid

For the folks using the Grid with large data sets (which seems to be all of you!) we also introduced the ability to use grouping together with virtualization. These two features have traditionally not been able to be combined, but thanks to some magic from the Kendo UI engineering team you can now have grouping enabled in even the most data-intensive scenarios.

New chart type

You can never get enough charts! Based on feedback from you we continue to implement more and more chart types. This release introduces the RangeArea Chart type to the already extensive list of chart types that we offer in Angular.

What is a RangeArea chart? Well, you're probably familiar with an Area chart that fills in itself from the value to the applicable axis. The Range Area takes this approach but allows you to determine a minimum and maximum value that gets filled in. This is extremely useful in cases where you want to graphically showcase mins and maxes for a particular point.

Figure 6: The new RangeArea chart type

PDF exportation comes to Angular

One of our more popular features in the jQuery edition Kendo UI is the ability to export components, and generic HTML, to a PDF file. Adding to growing list of helper libraries in Angular, in this release we've now brought PDF exportation to Kendo UI for Angular with the PDF Export library.

This works both by itself on generic HTML and is also integrated in to our other components like the Grid.

ASP.NET Core 2.0 Support Added

I'm probably not the first to tell you this, but ASP.NET Core 2.0 was released a month ago. As a part of our commitment to the ASP.NET developer landscape we have worked to ensure that our ASP.NET Core UI components (based on Kendo UI) now support ASP.NET Core 2.0!

Of course, the JavaScript flavors of Kendo UI will have no problem working with ASP.NET Core 2.0.

More Enhancements to the jQuery Edition

The jQuery flavor of Kendo UI has of course received a ton of updates as well. While this release includes a lot of hype for React, Vue.js, and Angular, we wanted to deliver a solid set of features for our jQuery widgets.

Grid improvements

Virtual Scrolling is a pretty common implementation scenario for the Kendo UI Grid. You have tons of data but you don't necessarily want your users to use the pager that comes out-of-the-box with the Grid. Virtualization has traditionally not been able to be used together with some other features, but as a part of R3 2017 we've tried to take care of that for you.

With this release you can now work with full CRUD operations while using virtualization which has been a large sticking point for some of you.

Virtualization sometimes can't be combined with other features, specifically grouping and hierarchy. However, to mitigate this and allow you as developers to combine all of these features we have now introduced a new scrolling method: Infinite Scrolling. Much like virtualization, this allows you to serve tons of data without a pager, plus you can use CRUD operations, grouping, and hierarchy functionalities all within one Grid.

Figure 7: Infinite scrolling mode in action

We have also improved the user experience for multi-column sorting, providing a simple interface to showcase exactly in what order the columns have been sorted in.

Figure 8: The new multi-column sorting improvements

Scheduler and Calendar improvements

The Timeline view is an extremely popular view of the Kendo UI Scheduler. However, it has been a bit limited in how it shows multi-day events. As a part of this release we have now improved how these kind of events are displayed in the Scheduler.

Figure 9: The "Product Planning" event started is an event that started the day before

The Calendar also received an update with handling multiple day selection. Previously this was unsupported, but today we're bringing this support with all the accoutrements (programmatic selection etc.) that you have been asking for.

Figure 10: Multiple days have been selected (shift + click). Note that Wednesdays are disabled days and the 6th is not selected!

Bootstrap v4 support

Bootstrap continues to evolve and just a few weeks ago the library went from Alpha to Beta. Kendo UI has been an early adopter of Bootstrap v4 with our Sass-based Bootstrap theme. As a part of our adoption of this framework we now support the latest version (v4.0.0-beta as of this blog post) of this extremely useful and popular toolkit.

Accessiblity updates

Accessibility in web applications is an extremely important part of how we develop for the web today, yet it's also a neglected part of the process. Kendo UI has always been on the forefront of accessibility across our components and we constantly strive to improve the accessibility within our widgets. This allows you as a developer to focus on what makes your application tick while Kendo UI helps take care of accessibility for you.

As a part of this release we did a lot of behind the scenes work on improving accessibility, including:

• Adding true navigation to the TreeList component
• Improved keyboard navigation in the Grid
• WAI-ARIA and WCAG 2.0 improvements done across the board for many of the available components

Kinvey integration

Kinvey is a Backend-as-a-Service (BaaS) that is a part of the Progress family. It's designed to help get your backend up and running faster while having important features like HIPAA compliance at your disposal. If you haven't heard of Kinvey I recommend that you check out this page for more information.

As a part of this release we now have resources around integrating data-bound widgets to a Kinvey backend. For more information you can refer to this documentation article that takes you through this process step-by-step.

New and Improved Support Packages

Up until now Kendo UI has always come with one form of support that gave you access to our legendary support through our ticketing system: Priority support. Throughout the years we've received feedback on our support packages and have decided to provide more options to our users.

As of the R3 2017 release most of our individual products can be purchased with three options for technical support - Lite, Priority, and Ultimate. This gives you as a developer the ability to choose the appropriate level of support for you and your team. Don't need as much help? Maybe "Lite" is the way to go. Want some more help through phone assistance? "Ultimate" is there to help you out.

To compare all of the support packages check out this page.

A Brand New Bundle: DevCraft UI

Based on your feedback we have simplified our offering by introducing a new bundle that includes all of our UI components. This means that UI for Xamarin, which previously was only available in DevCraft Ultimate, is now available in a lower-priced bundle! This new bundle, DevCraft UI, includes everything that a .NET developer may need (including Kendo UI!) and should be a very interesting bundle for many of you. For more information you can check out this overview page.

Want to See More?

If you want to see all of these highlights in action then I recommend signing up for our upcoming webinar on September 28th, at 11 AM ET. The Kendo UI Dev Rel team will be taking everyone through the new and improved Kendo UI bits so don't miss out on that action! Seats are limited so be sure to sign up!

Is Something Missing?

Did one of your favorite components not get an update, or did a new widget not get added? Feel free to provide any and all feedback in the comments below. Additionally, you can feel free to submit feedback in our UserVoice portals for consideration in future releases.

• Kendo UI (jQuery, React, Vue) feedback portal
• Kendo UI for Angular feedback portal

Whether you use Kendo UI, a DevCraft bundle or other Telerik products, and no matter the support you need, we have great new options for you.

Some months ago, we set out on a journey to review our bundles and the way in which our products are offered. Through this process, we have spoken with and read feedback from so many of our customers. The applications you are building with our products spread the gamut from custom and niche to mission-critical enterprise; from line-of-business to consumer facing. Our developer community is helping to make the world better through technology and innovation – and we are inspired.

Through these conversations, we developed a rich understanding of the frameworks you are using today, and the technologies you may use in the future. Beyond products and technology, we discussed what you expect from our technical support – and of course we discussed the overall value you place on out products and service.

Thank you for the overwhelming response we received to our reach-out – the changes described below are a direct result of the process so many of you were involved in.

Changes to Technical Support

Most of our individual products can now be configured with one of three options for technical support – this gives you the ability to choose the appropriate level of support for you and your team. If you ever need a higher level of support, your subscription can always be upgraded.

• Lite - 72-hour response time (10 ticket limit) – This option allows you to purchase our products at an incredible value and provides just enough support for small projects that are not on tight timelines.
• Priority - 24-hour response time (unlimited tickets) – Perfect for professional developers with typical deadlines.
• Ultimate – Ideal for professional developers with tight deadlines. Phone support can provide immediate or same-day solutions to commonly encountered issues, remote web assistance can be used to observe issues in your own environment, and issue escalation allows the most critical issues to be escalated directly to product developers.

For more information and a complete side-by-side comparison of the support plans, click here.

DevCraft Bundles

Our DevCraft bundles offer .NET developers the most cost effective way to futureproof their toolbox, and streamline beautiful UI across a variety of technologies and frameworks. Effective today, we are introducing a new ‘DevCraft UI’ bundle that includes all the Telerik UI products that a .NET developer could ever need at an incredible price of $1299. DevCraft UI joins DevCraft Complete and DevCraft Ultimate, which have also been updated. To learn more about our new line-up of DevCraft bundles, click here.

Changes to Kendo UI

We believe that the biggest changes for our Kendo UI product is the introduction of React and Vue support. React and Vue support join existing support for jQuery and Angular, creating the industry’s most complete UI toolbox for JavaScript developers. You may also notice that we have simplified the product names into a single offer called Kendo UI that comes complete with jQuery, AngularJS, Angular, React, and Vue support. Additional server-side wrappers for ASP.NET MVC, ASP.NET Core, PHP, and JSP can be added as needed, and like our other UI products, Kendo UI can be configured with Lite, Priority, or Ultimate support. To learn more about pricing and what is included in Kendo UI, click here.

I own a license of Telerik, DevCraft, or Kendo UI – what does this mean for me?

While full details can be found here , we are pleased to inform you that you will have access to all the great products and support you initially purchased – and in some cases even more. Additionally, you will maintain the same level of support and the same renewal prices.

Thanks again to our amazing community of developers – we love you and hope you love the new R3 bits and bundles.

It's here—the Telerik R3 2017 release has landed, packed with new features and updates for your favorite UI tools and components. Read on to see what's new.

We are closing off our last release of the year with a big bang. To make you more productive, we are shipping 10 new controls across all UI frameworks. We've enhanced Document Processing Library with advanced PDF manipulation options, introducing new themes and various analytics integration capabilities. In addition, we've expanded our existing components with more features and customization options. Most of all, we are further enhancing product support to allow for your specific needs.

You are probably interested in seeing all the features we are shipping for each individual platform. Dig into the specific team blogs and product pages to learn more:

• Full support of ASP.NET Core 2.0
• Theming support in Xamarin, in addition to a brand-new Grid CTP component
• New RadVirtualGrid from for WPF
• New Spreadsheet component from our WinForms
• RowDetails support in RadDataGrid on UWP
• Reporting gets boosted performance & accessibility (WCAG 2.0 support)
• And our brethren Kendo UI gets support for React and Vue

If all you want is the hardcore product facts, you can stop reading right here. But there is more!

We are investing heavily across the board and we believe it shows—just glance at our what’s new page or download the latest bits. We are also “shipping” a new look for the .NET Ninja mascot! A substantial product release like R3 2017 and the ongoing investment had to be paired with a new look. The new .NET Ninja exemplifies the ongoing commitment we have for all our fellow .NET developers. The .NET Ninja is also in better shape than ever and ready for action. This is what you can expect from us: the modern UI, fast releases, awesome support, productivity and ease of use you’re already used to—just better. Hold me accountable to it!

En route to making you a better .NET Ninja, we are also making all the UI tooling available to you via a single UI bundle, called DevCraft UI for just $1299.  It now includes our UI for Xamarin controls, which was previously available only in DevCraft Ultimate. Now you have all the tools at your disposal when developing striking apps for Web, Desktop or Mobile. Moreover, you now have multiple technical support options (Lite, Priority, and Ultimate) to suit your specific needs.

And what would a product release be without a flashy webinar—right? Here are two webinars to check out:

• Telerik: October 11^th. Register here.
• Kendo UI: September 28^th. Register here.
• Don’t have time to attend—why not take the tools for a spin now then at the link below?

We've collected a list of our favorite tips for you, showing how to use some of the best built-in features of the Kendo UI grid in Angular.

Grids have a long history in web development, and this isn't the first time we've shared or top tips with you to help make your lives easier. Today however, we want to focus specifically on the Kendo UI Grid for Angular and give you some tips on how you can use it optimally in your apps.

Use Data-Binding Directives 

The Grid makes very limited assumptions on how you retrieve and process data. But flexibility inevitably brings complexity. The state of the Grid must be tracked externally for the Paging, Sorting and Grouping features to work. 

All of this boilerplate code can be eliminated by encapsulating the state tracking into a reusable component. This is exactly what the [kendoGridBinding] directive does. The default implementation serves the data from memory, but it can also be extended to query a remote service. See Custom Remote Directives for an example on how to implement such a directive. 

Another built-in directive is the specialized [kendoGridGroupBinding] directive. It adds support for Virtual Scrolling of grouped data. This particular combination requires maintaining a very complex state and demands that all the data is available in memory. 

Use Editing Directives 

Configuring Editing is usually quite involved due to the sheer number of possible configurations.

The built-in Editing directives take care of the boilerplate code in most common scenarios, leaving you more time to work on your business problems. 

Expand Content to Span Multiple Columns 

You can use Spanned Columns to combine multiple cells, similar to how a colspan works on a regular table. A little extra space can go a long way in making tables less boring. 

Hide Non-Essential Columns on Small Screens 

The modern device landscape means that your application needs to adapt to many different screen sizes. The Grid comes with a set of Responsive Features to help you deliver the best possible experience to everyone.  Columns can be configured to be visible only at certain display sizes by using a common CSS Media Query syntax. For example, <kendo-grid-column media="(min-width: 680px)"> will only display a column on devices with large screens. 

Try it Out

Curious to try this out on Kendo UI for yourself? You can get started with a free trial today.

Try Kendo UI

After reviewing demos and documentation (and scouring the forums for threads relating to your issue) you’re still unable to implement an app requirement, or determine if you’re dealing with a bug, don’t despair! If you’re a licensed developer covered by a valid support contract, or within the evaluation period, you have the option to work directly with knowledgeable Progress staff by submitting a support ticket.

What You’ll Need

Prior to submitting the ticket, you should gather the specifics of your development environment. These will be needed for our developers to better understand the context of your issue. Depending on the platform, this usually includes the following:

• Full version number of the Telerik control or product being used
• Operating system details of your development machine/server
• Browser type and version number (when applicable)
• .NET Framework version (when applicable)
• Visual Studio (or other IDE) edition (including Service Packs)
• Preferred coding language (C#, VB.NET, Java, PHP, etc.)

Identify all applicable code that is required to clarify the issue. We strongly recommend that, whenever possible, you take the time to isolate the problem in a sample project. A simplified, runnable, standalone application that demonstrates the issue allows our developers to immediately focus on resolving your issue and saves the time needed to first reproduce it. This helps avoid excessive back and forth correspondence, which extends the time required to resolve the issue, and improves the chance of solving it immediately.

Finally, you should prepare a clear written overview of the issue, and create applicable screenshots or video captures that visualize hard-to-describe behaviors or layouts.

Creating the Ticket

Log in to your Telerik Account and using the dropdown menu provided, click on "Support Tickets".

Then, click the "Contact Support Team" button and choose the product for which you need support.

If, after reviewing the most popular support resources for the given product, you still have a support question, you may start typing it in using the dialog provided:

After submitting this form, you'll see that we do a quick search to find any relevant support resources for you. Assuming there are no matches (be sure to look closely!) you can click the "Submit Support Ticket" button to proceed.

At this stage, you can classify your ticket as a Support Ticket, Bug Report, or Feature Request:

Don’t forget to use the “Attach files” button to upload your supporting files which should include your code and/or screen captures. The allowed extensions are .zip, .rar, .jpg, .png, and .gif, and the total combined size of the upload cannot exceed 20MB (feel free to contact us for help in uploading larger files). Finally, users holding our DevCraft Ultimate License have the option to “submit ticket for pre-screening” which means that we’ll do a quick check and tell you if you've provided sufficient information for the developers to understand your issue and provide helpful insights.

Once you've double-checked that all is in order, simply click the “Submit Ticket” button to initiate the ticket.

Follow Up

You should receive an immediate email confirmation of the ticket in the inbox of the registered email account, featuring a copy of the ticket details. Then, you can monitor your inbox for an email notification of the reply that has been added directly in the ticket by the Telerik support team. This can be expected within the ticket’s time frame as specified in your support contract (typically 24 hours), or evaluation agreement (typically 72 hours). You can reference the time frames offered by the various support plans here.

In the response to your ticket, you may be asked to provide additional insights or supporting files. You can reply to the ticket accordingly. If the response provided does not solve the issue, you can continue the thread until a resolution is found. Any new, unrelated issue should be logged in a separate ticket. Once you've resolved the issue, please use the “Mark as Resolved” button/link to close the thread.   

Editor's note: This post was originally written by Georgi Tunev in 2013, and has been updated for completeness and accuracy.

We've collected a list of our favorite tips for you, showing how to use some of the best built-in features of the Kendo UI grid in Angular.

Grids have a long history in web development, and this isn't the first time we've shared or top tips with you to help make your lives easier. Today however, we want to focus specifically on the Kendo UI Grid for Angular and give you some tips on how you can use it optimally in your apps.

Use Data-Binding Directives 

The Grid makes very limited assumptions on how you retrieve and process data. But flexibility inevitably brings complexity. The state of the Grid must be tracked externally for the Paging, Sorting and Grouping features to work. 

All of this boilerplate code can be eliminated by encapsulating the state tracking into a reusable component. This is exactly what the [kendoGridBinding] directive does. The default implementation serves the data from memory, but it can also be extended to query a remote service. See Custom Remote Directives for an example on how to implement such a directive. 

Another built-in directive is the specialized [kendoGridGroupBinding] directive. It adds support for Virtual Scrolling of grouped data. This particular combination requires maintaining a very complex state and demands that all the data is available in memory. 

Use Editing Directives 

Configuring Editing is usually quite involved due to the sheer number of possible configurations.

The built-in Editing directives take care of the boilerplate code in most common scenarios, leaving you more time to work on your business problems. 

Expand Content to Span Multiple Columns 

You can use Spanned Columns to combine multiple cells, similar to how a colspan works on a regular table. A little extra space can go a long way in making tables less boring. 

Hide Non-Essential Columns on Small Screens 

The modern device landscape means that your application needs to adapt to many different screen sizes. The Grid comes with a set of Responsive Features to help you deliver the best possible experience to everyone.  Columns can be configured to be visible only at certain display sizes by using a common CSS Media Query syntax. For example, <kendo-grid-column media="(min-width: 680px)"> will only display a column on devices with large screens. 

Try it Out

Curious to try this out on Kendo UI for yourself? You can get started with a free trial today.

Try Kendo UI

This post is part of a series featuring our Developer Experts—community members who represent the best of our products. Feel free to read about our other featured experts and meet more DEs.

Jorge Cano is our latest interviewee. Based in Argentina, Jorge is a Google Developer Expert in Web Technologies skilled in JavaScript Architecture and well-versed in writing, speaking and teaching.

Jorge Cano

What is your background, professionally?

I'm a self-taught JavaScript Architect.

Where are you based and why?

I live in Buenos Aires in Argentina, my home country.

With whom are you working?

I work at a company called ByteDefult as a Full Stack Developer. I'm lucky to work with several other terrific, skilled colleagues.

What projects are you working on now?

ByteDefult is a startup, and we're creating a super secret video-based product yet to be released. We look forward to its release, and I think you will, too!

What’s the most interesting project you’ve done recently?

I'm writing a module for Angular to use drag, drop and upload, coming soon to npm. I'm also mentoring a large team of Spanish-speaking NativeScript Ambassadors, younger developers who are learning NativeScript this summer. In addition, I've written a book on Angular (Entendiendo Angular) and am considering writing a book on NativeScript. Finally, I'm working on a project called 30 days with RxJS in Spanish.

Which of our products do you use and why?

NativeScript! I love its simplicity and its use of Angular. When I read the code behind NativeScript, I found it was amazing. I'm excited to write a book about NativeScript, and I've also use Kendo UI many times for web development.

What are some challenges you are encountering now in your work?

When you are in a professional environment with amazing, interesting and intelligent colleagues, the architecture and ideology of a product becomes something incredible. You are challenged to always get better and push technologies to create even more interesting products. That's a good kind of challenge—a tougher challenge is to write your own Open Source project and maintain it, but you need to do this to keep moving forward and surmount difficulties.

From your experience, what’s the biggest software pain point that your partners/clients encounter?

After reviewing demos and documentation (and scouring the forums for threads relating to your issue) you’re still unable to implement an app requirement, or determine if you’re dealing with a bug, don’t despair! If you’re a licensed developer covered by a valid support contract, or within the evaluation period, you have the option to work directly with knowledgeable Progress staff by submitting a support ticket.

What You’ll Need

Prior to submitting the ticket, you should gather the specifics of your development environment. These will be needed for our developers to better understand the context of your issue. Depending on the platform, this usually includes the following:

• Full version number of the Telerik control or product being used
• Operating system details of your development machine/server
• Browser type and version number (when applicable)
• .NET Framework version (when applicable)
• Visual Studio (or other IDE) edition (including Service Packs)
• Preferred coding language (C#, VB.NET, Java, PHP, etc.)

Identify all applicable code that is required to clarify the issue. We strongly recommend that, whenever possible, you take the time to isolate the problem in a sample project. A simplified, runnable, standalone application that demonstrates the issue allows our developers to immediately focus on resolving your issue and saves the time needed to first reproduce it. This helps avoid excessive back and forth correspondence, which extends the time required to resolve the issue, and improves the chance of solving it immediately.

Finally, you should prepare a clear written overview of the issue, and create applicable screenshots or video captures that visualize hard-to-describe behaviors or layouts.

Creating the Ticket

Log in to your Telerik Account and using the dropdown menu provided, click on "Support Tickets".

Then, click the "Contact Support Team" button and choose the product for which you need support.

If, after reviewing the most popular support resources for the given product, you still have a support question, you may start typing it in using the dialog provided:

After submitting this form, you'll see that we do a quick search to find any relevant support resources for you. Assuming there are no matches (be sure to look closely!) you can click the "Submit Support Ticket" button to proceed.

At this stage, you can classify your ticket as a Support Ticket, Bug Report, or Feature Request:

Don’t forget to use the “Attach files” button to upload your supporting files which should include your code and/or screen captures. The allowed extensions are .zip, .rar, .jpg, .png, and .gif, and the total combined size of the upload cannot exceed 20MB (feel free to contact us for help in uploading larger files). Finally, users holding our DevCraft Ultimate License have the option to “submit ticket for pre-screening” which means that we’ll do a quick check and tell you if you've provided sufficient information for the developers to understand your issue and provide helpful insights.

Once you've double-checked that all is in order, simply click the “Submit Ticket” button to initiate the ticket.

Follow Up

You should receive an immediate email confirmation of the ticket in the inbox of the registered email account, featuring a copy of the ticket details. Then, you can monitor your inbox for an email notification of the reply that has been added directly in the ticket by the Telerik support team. This can be expected within the ticket’s time frame as specified in your support contract (typically 24 hours), or evaluation agreement (typically 72 hours). You can reference the time frames offered by the various support plans here.

In the response to your ticket, you may be asked to provide additional insights or supporting files. You can reply to the ticket accordingly. If the response provided does not solve the issue, you can continue the thread until a resolution is found. Any new, unrelated issue should be logged in a separate ticket. Once you've resolved the issue, please use the “Mark as Resolved” button/link to close the thread.   

Editor's note: This post was originally written by Georgi Tunev in 2013, and has been updated for completeness and accuracy.

DevIntersection is going on from October 31 – November 2, 2017 at the MGM Grand in Las Vegas. We'll be waiting for you there at Booth 111.

Looking forward to DEVintersection 2017? So are we! There about bound to be some amazing announcements. We will be there too (booth #111), so make sure to stop by, meet the team and discuss the latest trends in tech, including our Telerik UI for Xamarin, Telerik UI for UWP, Kendo UI and Telerik Reporting. We have some cool SWAG too.

DEVintersection starts in just a few days and the excitement around the event is growing by the minute. As usual, there are high expectations for the conference with various sessions and talks by some of the biggest names in the industry.

Progress @ DEVintersection: Booth and Sessions

We wouldn’t miss the conference for the world and as usual the cool guys from the Product and Developer Relations teams will be present there. Head over and meet us at Booth 111, where we will have some great product demos, theater sessions and prize giveaways. We'll also be giving out our epic Telerik and Kendo UI T-shirts and a big prize: MICROSOFT XBOX ONE X.

Sessions at Booth 111

Let me reveal a little secret about our product sessions at the booth: We're coming with the very people who personally developed the great advancements in our Telerik and Kendo UI products.

Telerik UI for Xamarin: We are excited to show you our Xamarin UI suite. It is all about beautiful, polished and elegant UI widgets for building cross-platform Xamarin applications. Telerik UI for Xamarin comes complete with predefined item templates for Visual Studio. They are included by default when you install the products. You can directly include them in your Xamarin.Forms project and use them as footprints for similar scenarios in your application.

Kendo UI: We are proud to present the most complete UI library for data-rich web applications with support for your favorite JavaScript technologies – jQuery, Angular, React and Vue. We are pleased to announce new support for React and Vue with our Kendo UI wrappers for these frameworks. You get the same great Kendo UI component features that you have come to rely on, now provided via a wrapper interface for the React and Vue frameworks. 

Telerik UI for UWP– Open Sourced! We are thrilled to provide you with UI for Universal Windows Platform - a complete UI suite for building amazing Windows 10 applications with a single code base. Completely Open Sourced!

Telerik Reporting:We are excited to present you our complete and mature reporting solution. You'll see how to build, style, view and export elegant reports seamlessly and very quickly.

Sessions and Workshops

Meet our visionaries and trend-setters @ DEVintersection:

• Thanks to Xamarin and Microsoft you will fly high with Sam Basu.
• Todd Anglin will guide you to the world of NativeScript and will show you how to make CSS fun with SaaS.

We'll be There @ DEVintersection!

Looking for us at the conference? Just hunt down our Ninja and Kendoka and our smiling faces will greet you.

In this .NET DevChat recap, we talk about building responsive web applications with UI for ASP.NET MVC and Bootstrap 4. Dive into the source code and Q&A below.

Bootstrap 4 is great, and it’s even greater when used in conjunction with Telerik UI for ASP.NET MVC.

In this .NET DevChat, we covered the basics of Bootstrap, its NavBar component, the Grid layout system as well as the new and shiny Bootstrap 4 Cards!

We dived right in and added all of these to an ASP.NET MVC application that uses Razor-based Layouts and Views.

We also covered how Telerik’s UI for ASP.NET MVC comes with an out-of-the-box Bootstrap 4-inspired theme so that all the widgets will look as any other Bootstrap styled UI element. In particular, we worked with the Telerik MVC Button, Grid, and Chart.

As promised, here’s the source code for the sample application that we developed during the live webinar.

As usual, we were thrilled to have received great feedback from you in the form of interesting questions!

Questions and Answers

What is the current status on Bootstrap 4?

As of the writing of this post, Bootstrap 4 is on its first Beta release. It had been in alpha for a few months now, but back in August Bootstrap 4 beta came out.

Can I modify the Kendo UI themes to match my company’s branding?

Yes, you can. You can use our Sass ThemeBuilder tool to generate a new theme. You can use the Bootstrap 4 theme as a base and modify from it.

If you are comfortable with Sass you can also modify scss variables to compile a new Kendo theme to use within your MVC application.

What is this Deferred functionality that was used in the demo?

This is a personal preference, and it’s not a requirement.

The reason to use the Kendo MVC Deferred initialization functionality is so that the JavaScript code to initialize the widgets can all go in the same place. Normally, you would put this at the bottom of the page.

Will this work with Telerik UI for ASP.NET Core?

Yes! Since Bootstrap 4 is just CSS, it can be used no matter the server side technology.

In the case of Telerik UI for ASP.NET Core (which supports ASP.NET Core 1 and 2), Razor is also used to generate the MVC widgets, and the actual markup rendered on to the final html page will be the same.

Hence, with the same Razor code all the UI concepts (including Deferred initialization) covered in this webinar will apply on an ASP.NET Core application

Is this type of UI also possible with Angular 4?

Certainly! We also have a webinar where we cover how to write Responsive Angular 4 Dashboards with Kendo UI for Angular.

We recap all the news from the latest Kendo UI release and answer the questions we couldn't get to live about Angular, React and more. Missed the webinar? You can watch the replay below.

Last week, we hosted the Kendo UI R3 2017 release webinar, which highlighted the latest features and improvements we’ve added to Kendo UI for jQuery and Kendo UI for Angular. It also introduced Kendo UI Support for React and Kendo UI Support for Vue. This blog post summarizes the event and provides answers to the questions that were asked by attendees.

Webinar Recording

If you were unable to join us for the live webinar, don’t worry: we’ve posted the recording to the Kendo UI channel on YouTube.

Prize Winner

It’s a bit of a traditional for us to give away prizes to attendees who ask the best questions. This time is no different. The winner this time around is Tony Garcia who will receive an Oculus Rift + Touch Virtual Reality System!

Questions and Answers

What’s the oldest version of AngularJS you support?
You can read the supported versions of AngularJS from our documentation.

Are features like the Material theme and features in the Grid component available for Vue?
Yes since Kendo UI Support for Vue are wrappers of Kendo UI for jQuery.

Where can I find documentation?
That’s easy: docs.telerik.com.

Does endless scrolling in the Grid require a static grid height to be set?
No. The Grid has a default height. It uses that value (or the height you set) to calculate the view for endless scrolling.

Can VueJS be implemented using a custom Kendo UI build?
I’d recommend checking out the Getting Started article we have in the documentation. In particular, there’s a section entitled, Integrate Kendo UI for Vue.js using NPM and Webpack that’s worth checking out.

Is the Material theme supported in React?
Yes. All the themes that ship with Kendo UI for jQuery are available in Kendo UI Support for React.

Are the same Sass-based themes used for both Angular and jQuery?
Yes. We have the theme available in the GitHub repository, kendo-theme-material.

What about Material Design theme for Kendo UI for jQuery?
This theme is currently available for Kendo UI for jQuery and Kendo UI for Angular.

Is there a roadmap of when the theme builder is updated with the R3 release changes?
The Progress Sass Theme Builder is currently up-to-date with everything we covered in the webinar.

When is the ngModel update of a TimePicker? onBlur or onChange?
It’s for the event, valueChange. We have a demo of this capability available here.

How about the Grid making it responsive to different media sizes? Is it covered on this new release?
I’d recommend checking out the documentation we have that covers the responsive design support in the Grid.

You referred to the new ReactJS support as “wrappers”. So, does this still require jQuery? If so, are there any plans for KendoUI for React that is “native” to React and doesn’t require jQuery? (i.e. KendoUI for Angular)?
Yes, Kendo UI Support for React are wrappers of Kendo UI for jQuery. Therefore, jQuery remains a dependency. We have plans to introduce native support for React in the R1 2018 release timeline. You can read about this in the Kendo UI roadmap.

Can you resize the columns of the Grid component?When will column resizing be part of Angular Grid component?Do you have grid column resizing and moving feature in this release?
The column resizing got delayed a bit, sorry! We need few weeks to complete it and will publish an incremental update.

I’ve been working with the Kendo UI for Angular and would like to know how to modify the themes for the UI. Is there any documentation that explains the functionality of the themes?
Here’s the link for themes and styling with kendo for angular: http://www.telerik.com/kendo-angular-ui/components/styling/

When will a tree component be available in Kendo UI for Angular?
I’d recommend checking out the [Kendo UI for Angular roadmap] for more information about timelines for components like the TreeView. It’s a short-term goal of ours to deliver this component.

Is there any plans to make a Vanilla JS of version Kendo UI for jQuery so that jQuery wouldn’t be required to use?
We have no such plans at this time.