A Quick Intro to the Telerik ASP.NET DataGrids – AJAX, MVC and Core

With more than 100 built-in functionalities available in each of the Telerik ASP.NET DataGrids, you get a powerful component which provides a variety of options for how to present and perform operations over the underlying data.

As you know, ASP.NET comes in three distinct flavors. One is not better than another, however which one you use will depend primarily on your ultimate application goals. If you plan on building a cloud-based application that could run on Windows, macOS, or Linux, you would go with ASP.NET Core. If you are interested in something lightweight and highly testable, you may go with ASP.NET MVC. Or, if you come from a desktop background and prefer a declarative and control-based programming method, ASP.NET Web Forms would likely be your framework of choice.

And with any web app, you may find yourself in need of components or controls to provide a modern UI. Because we build components, we have some insight into which ones developers are using the most in their applications. Without a doubt, across all frameworks the most popular is the DataGrid.

It makes sense. DataGrids are a ubiquitous way to represent and manipulate data.

Essential DataGrid Elements

Any developer who has tried to build one will tell you that a grid is not static. A functional grid is interactive; it has structure and often requires more than you might think at first glance.

The datagrid depicted below is a fairly common one. It includes some of the most requested features such as paging, filtering, grouping, editing, nesting tables, and more.

The grid is part of the Telerik UI for ASP.NET AJAX, Telerik UI for ASP.NET MVC, and Telerik UI for ASP.NET Core toolsets. Telerik UI for ASP.NET AJAX can be purchased as a standalone product or part of the Telerik DevCraft bundle. The others can be purchased as server-side add-ons to Kendo UI or in Telerik DevCraft.

With more than 100 built-in functionalities available in each of the Telerik ASP.NET DataGrids, you get a powerful component which provides a variety of options for how to present and perform operations over the underlying data. In addition to basic and expected features such as sorting, filtering, grouping, editing, and exporting, more advanced functionalities are supported as well – detail rows, reordering of rows, scroll modes, multi row or cell selection, responsive design and more. In terms of data binding, the data source you choose and how you implement may vary from framework to framework, but if you use Telerik ASP.NET DataGrid controls, you often have multiple data binding options.

Because each framework is somewhat different, let’s explore the ASP.NET AJAX, MVC and Core DataGrids built by the Telerik team at Progress.

ASP.NET Web Forms (aka AJAX) DataGrid

The ASP.NET AJAX DataGrid is one of the most mature and advanced controls in the Telerik ASP.NET AJAX suite, featuring a rich arsenal of functionalities like data binding to various data sources, editing, filtering, sorting, CRUD operations, mobile support, grouping and more. And each of these features is richer than a single word might suggest.

For example, with the Telerik UI for ASP.NET AJAX DataGrid you can use any declarative data source control (AccessDataSource, SqlDataSource, LinqDataSource, EntityDataSource, ObjectDataSource, XmlDataSource, OpenAccessDataSource) or bind the grid to your custom objects. We also support server events, which are executed only when the grid needs to get fresh data from the server. Declarative and programmatic client-side binding to ASP.NET Web Services, WCF, ADO.NET, OData services and Page Methods are also supported.

When bound to a DataSource control, the editing feature of the ASP.NET AJAX Grid allows you to enable automatic data editing. You can also use the extensive API to handle the CRUD operations in a custom manner. You can display the edit form inline, as a regular form or in a popup and choose between the built-in edit forms, your own template or a user control. You can also enable batch editing to allow users to edit multiple items and save them all by hitting the Save button just once.

Filtering is another functionality providing you with plenty of options for displaying data. With the Telerik ASP.NET DataGrids you can filter any type of data - string, decimal, Boolean, date and time. Depending on the column filtered your users can select any filtering function from the contextual menu, including “Equal,” “Contains,” “Greater than” and “Less than.” You can use the different grid columns to provide suitable filter inputs like date pickers, numeric textboxes, and drop down lists. The client and server-side APIs allow you to define your own filter template while still utilizing the built-in filtering mechanism.

And those examples are just the beginning. To find out more about the functionalities of the Telerik ASP.NET AJAX DataGrid make sure you explore our resources about grid hierarchy with templates, grid virtualization, excel-like filtering, mobile-friendly grids, as well as getting started with Telerik UI for ASP.NET AJAX tips.

As you start to see the depth of the DataGrid and the richness of each feature, you will realize how much you can do with your DataGrid with the right control. You also won’t be surprised to find out that major organizations and institutions such as American Express, Bank of America and the University of North Carolina all have used the Telerik UI for ASP.NET AJAX controls.

Trial | Web Mail Sample App | Demos | Documentation

ASP.NET MVC DataGrid

The Telerik UI for ASP.NET MVC Grid enables highly sophisticated interactions with your data.

As an example, SanDisk, one of the world’s largest manufacturers of flash memory products, used the Telerik UI for ASP.NET MVC controls in an application designed to help their employees plan and forecast production and sales numbers for all the different markets they serve without maintaining spreadsheets. Analysts can maintain various versions of their forecasts and merge them into the final published version developed by the planning managers or VPs. The reports are published at the end of every quarter using BI tools such as Tableau, and released to a larger audience, including the CEO and other decision makers in the company.

The end application featured the Grid, and was built using HTML5 and jQuery-based Kendo UI controls, Telerik UI for ASP.NET MVC, a web API and a service layer that uses a custom Data Access Layer specifically developed for SAP HANA. You can learn more about the application and project from our case study.

Much like the ASP.NET Web Forms/AJAX Grid, the Telerik UI for ASP.NET MVC DataGrid offers the essential Grid features like paging, sorting, filtering and grouping your data using a very intuitive interface. You have the ability to re-size and reorder your columns and even easily hide or display them individually. You can freeze columns with the change of a single property, or allow the user to lock and unlock columns interactively, or even easily create a hierarchy for your parent and child records. With the template feature of the Grid component you have full control over complex formatting. You can choose between a Toolbar template, Column header template, Row template, Detail template and others.

And, as we mentioned in the section about Web Forms, each of the features has a depth and richness that enables you to create an outstanding user experience.

Take editing as an example. Editing can easily be wired to a RESTful API, or work with local data. Edit forms can be presented in-line, or in a pop-up. You can even do batch updates to allow many changes to be done before preserving them in the data. This allows your users to create, update or even delete data from your underlying data source.

And since we’ve mentioned data source, with the MVC DataGrid, you can easily configure remote data binding with the Kendo UI DataSource utility which works with any RESTful API. You can connect to any local data source or remotely communicate through JSON/JSONP, OData, or XML formats.

Again – we’ve just explored the tip of the iceberg with these examples, so make sure you check out our demos as well as the .NET DevChat: Responsive Web Apps with ASP.NET MVC and Bootstrap 4 and Refactoring Data Grids with C# Extension Methods articles.

Trial | Kendo UI® ♥ Bootstrap Sample App | Demos | Documentation

ASP.NET Core DataGrid

ASP.NET Core is an open-source, cross-platform framework that was first released by Microsoft in June 2016. That fall, Progress announced its Telerik UI for ASP.NET Core toolset.

In the two short years the product has been available, the ASP.NET Core DataGrid has quickly become a favorite component in the toolset. As with the other ASP.NET DataGrids, it is a responsive and adaptive HTML5 Grid that provides more than 100 features from filtering to sorting data, to more advanced features like pagination and hierarchical data grouping.

In addition to the traditional HTMLHelpers, one of which is the Grid HtmlHelper, Telerik UI for ASP.NET Core comes with the industry’s first compete packaged-set of Tag Helpers as well. The Grid Tag Helper helps you configure the Kendo UI grid component within your ASP.NET Core applications.

With the exception of the Tag Helpers, which are unique to ASP.NET Core, the ASP.NET Core and ASP.NET MVC DataGrids share the same features and functionalities. We’ve talked a little about editing and data sources, but did you know that the Telerik UI for ASP.NET Core Grid offers virtualization and endless scrolling functionalities, allowing users to scroll smoothly through records? This affords you the opportunity to achieve exceptional performance regardless of the size of your database or the grid configuration.

From a usability perspective, our DataGrid meets accessibility requirements as well as multiple interaction opportunities. The Telerik UI for ASP.NET Core DataGrid component is Section 508, WAI-ARIA and WCAG 2.1 compliant, ensuring individuals with disabilities can interact with it. And it provides keyboard navigation that enables you to create an application that allows users to use mouse clicks, keyboard strokes or both.

With more than 100 features of the Grid alone, it’s definitely worth checking out some of our articles, particularly Working with ASP.NET Core and Data Grids, Prototyping ASP.NET Core Data Grids and Getting Started with Telerik UI for ASP.NET Core and Bootstrap 4.

As you might expect, we have an arsenal of demo pages including an Insert, Update and Delete from Data Source demo, Export to PDF & Excel demo, Freeze Grid Columns demo, Hierarchical Grid demo and Column Interaction demo.

Trial | Kendo UI® ♥ Bootstrap Sample App | [Demos*](https://demos.telerik.com/aspnet-core/grid) *| ** HTML Helpers Documentation** | Tag Helpers Documentation

Additional Resources for ASP.NET AJAX, MVC, and Core DataGrids

The DataGrids for our ASP.NET tools are feature-rich, highly performant, and beautifully designed. But don’t just take our word for it. Definitely download a free 30-day trial and take them for a spin.

And check out a few of the other Grid resources and information we have available that span across our toolsets.

• Article: Top 17 Tips for Effective Grids in Web Apps
• Themes: All grids have three Sass-based themes – Default, Bootstrap and Material. Have we mentioned there are Less-based themes as well? The Theme Builder application, which enables you to create new or customize the existing themes of each framework, is also available.
• Unlimited Product Support: We’re proud to provide a support service that our customers love. Progress offers unlimited support delivered by the engineers of the product with a 24-hour guaranteed response time, Monday through Friday.
• StackOverflow: We’re big fans of StackOverflow at Progress. If you want to learn from the larger Telerik user community, we encourage you to visit stackoverflow.com and use the tag “telerik-grid.”

Happy coding!