ASP.NET MVC ASP.NET MVC Grid Control

The Telerik UI for ASP.NET MVC Grid enables you to render a column menu in the column headers, providing easy access to functions like sorting, grouping, filtering, and others.

See Telerik UI for ASP.NET MVC Grid toolbar columns menu demo

The Selection Aggregates feature enables you to select a single or multiple cells or rows within the grid and calculate different metrics based on the selected data, allowing you to get a quick snapshot of key aggregates. You can utilize the built-in approach and display the metrics at the bottom of the ASP.NET MVC Grid or create your own elements to present the data as needed. 

See Telerik UI for ASP.NET MVC Grid selection aggregates demo

Copying cells from Microsoft Excel or another Grid control and pasting them in the desired Grid is possible with the built-in paste capability in Telerik UI for ASP.NET MVC Data Grid. Based on the selected pasting operation, you can either replace the selected Grid cells with the copied cells or insert them as a new Grid row.

See Telerik UI for ASP.NET MVC Grid paste from Excel demo

The Telerik UI for ASP.NET MVC Grid is a powerful, fast, feature-rich component that can both handle large volumes of data with ease thanks to pagination, virtualization and infinite scrolling, and visualize and manipulate it in a way it makes sense for the user. Bind your data, set up a few properties and see it work in any browser and device. We’ve taken care of every possible scenario, so your development time is reduced to just a couple of minutes.

The Telerik UI for ASP.NET MVC Grid component enables you to perform CRUD (create, read, update and delete) operations and manipulate its data. You have the option to choose from different edit modes like Batch, Inline and Popup. Thanks to a custom editor, customization is no longer limited and you can showcase the data any way you see fit.

The Telerik UI for ASP.NET MVC Grid control comes with a variety of built-in functionalities, enabling you to present and perform operations on the underlying data, such as paging, sorting, filtering, grouping, editing, exporting and more. Users can also benefit from multi-column sorting and Google-like autocomplete filtering, making the Grid easy to use when loaded with large amounts of data.

The ASP.NET MVC Grid allows you to select rows and cells, process data from them or make calculations based on the selection. Simply enable the Selectable property and configure the selection Mode and Type attributes. You can also get the selected data using the Change event in the Grid.

See how Selection works in the ASP.NET MVC Grid demo

The Telerik UI for ASP.NET MVC Grid offers a Compact Grid, also called High-Density Grid feature, which is implemented via the Size parameter configuration. It enables you to show as much information as possible on a single screen by reducing the padding and margins used by the elements that comprise the component. As a result, you’ll have a data table with a more condensed look-and-feel that displays the maximum amount of data at once.

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

Display aggregated results in a Group Template for each data-bound column, commonly referred to as Grand Total. The ASP.NET MVC Grid offers built-in support for the most popular aggregate functions: Average, Count, Sum, Min, Max and Count, especially useful in finance apps or internal reports where you can quickly give a summary of the data.

The persist state of the ASP.NET MVC Grid allows users to save custom grid settings, such as column structure, sorting, filtering or paging state, and load them in consequent app sessions. The feature is particularly useful when individual users need to view custom information when logging.

You can bind foreign-key columns directly to a remote data source. This requires setting up a couple of attributes to specific values, information about which is available in the sample demo.

Bind your ASP.NET MVC Grid control to static arrays, dynamic objects, local or remote data, OData, GraphQL, Kinvey Backend Services or even Web API endpoints or SignalR hubs—no need for extra processing. Changes will be propagated both ways without any additional effort on your side.

See demo on Web API Binding

The Telerik UI for ASP.NET MVC Grid supports displaying of a context menu within the component, providing a convenient way to apply data processing operations to specific rows. The context menu empowers users to easily add, edit and delete records, select, sort and reorder rows, and export the data grid to a PDF or Excel file.   

Additionally, the context menu provides the option to use default commands or add custom ones. You can also configure the items that are displayed in the Grid's table head element and those in the Grid's table body element. 

See the Telerik UI for ASP.NET MVC Grid Context Menu demo 

Simply set the resizable configuration of ASP.NET MVC Grid rows to true and enable quick and easy resizing of one, multiple or all rows.

See the Telerik UI for ASP.NET MVC Grid row resizing demo

The virtualization feature of the Telerik for ASP.NET MVC Grid allows you to handle large amount of data without negatively impacting the user experience and browser performance. It comes with two types of virtualization—row and column virtualization, which will render the number of set items or columns, respectively.  The loading time and resources needed to visualize the active view of data in the grid are significantly reduced when having many records in the source. Editing is also supported.

See Demo

The Telerik UI for ASP.NET MVC Grid offers Infinite Scrolling mode to allow large data sets to be scrolled through easily while also having grouping, hierarchy and CRUD operations enabled. By dynamically loading more data when the end of the page is reached, users can effortlessly scroll through all items on a single page.

See how Infinite Scrolling works in the ASP.NET MVC demo.

Grids with large volumes of data require a straightforward way to search and locate records. That’s why in addition to the current grid filtering options, a built-in search panel enables users to easily search through the data and filter only relevant records in the Grid. The search panel will add a search text box inside the grid toolbar and enable you to configure which grid fields will be searchable.

See Demo

Have full control over the way your Telerik UI for ASP.NET MVC Grid looks to the end user. Using the template feature, you can easily customize the layout of your columns, rows, toolbar and details. You can additionally set the colors, logos, fonts and more to match your brand style.

See Demo

The Telerik ASP.NET MVC Grid component has multiple built-in themes and swatches such as Default (our own styling), Material (based on the Material Design guidelines), Bootstrap (which mirrors the Bootstrap styling) and Fluent (based on Microsoft Fluent UI). You can easily customize any of the available themes with a few lines of CSS or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.

See demo

Thanks to the built-in adaptive rendering of the control, your Telerik UI for ASP.NET MVC Grid will work across all screens and browsers. The Grid can be expanded and provide users with menus upon interaction Input events from touches are simulated as if they were mouse or keyboard.

See Demo

The MVC Grid control is perfect for scenarios where accessibility is important for your application. The Grid complies with WAI-ARIA, WCAG 2.1and Section 508 guidelines, ensuring that individuals with disabilities can still view and interact with it.

To get more familiar with accessibility and its importance, check out our whitepaper focused on the topic to learn how accessibility affects your applications.

Telerik UI for ASP.NET MVC comes with a complete server-side API. With simple API calls designed to feel natural in server-side languages, you can configure all features of the ASP.NET MVC Grid. Since the server wrappers output the JavaScript, you also have full access to the client-side API for maximum control in the browser.

See Demo

Skyrocket user experience by allowing touchscreen interactions with the Telerik UI for ASP.NET MVC Grid. It supports editing, selection and drag and drop gestures on mobile devices.

See the Telerik UI for ASP.NET MVC Grid touchscreen interactions documentation

Right-to-left support is available for languages like Arabic and Hebrew, in which users read from right to left. This mode of the ASP.NET MVC Grid allows for the columns to be reversed and the rightmost column to become first, so it feels more natural to end users. The RTL feature can be adjusted for local preference by changing just a few settings.

See Demo

The ASP.NET MVC Grid supports globalization and localization features and is designed to work in different culture locales and respond to their specific requirements for number, date and time formatting, currency, week and month names. You can define the culture through the kendo.culture() method.

See Demo

Give your users the opportunity to use the keyboard for almost any Grid action that can be triggered with the mouse, including navigating items, selecting single and multiple items, going into and out of edit mode, paging and even expanding and collapsing hierarchical grids.

See Demo

With the Telerik UI for ASP.NET MVC Grid, you can be certain that your app will look and behave as expected across all browsers. This includes all desktop and mobile browsers, with their quirks and features. You don’t need to add different browser-specific prefixes or lookup online how to position your data in the best way – it just works.

See the full list of supported browsers. 

Quickly group items in the Telerik UI for ASP.NET MVC Grid component when working with large datasets to enable users to easily sort through elements by category, such as all products sold in a shop or location. The grouping procedure will run on the server, effectively freeing up the client to display a loading screen while waiting for the server to process the results. This also makes it faster since the server is likely to be much more powerful than the user’s machine.

See demos on Group paging of remote data and Server grouping with virtualization.

Some projects require displaying table data in a hierarchical layout, also called master-detail tables, in order to visualize relations between parent and child records. This is where the Telerik UI for ASP.NET MVC Grid hierarchy feature comes in handy—quickly create an N-level hierarchical Grid by specifying detail templates.

See demo

The Frozen Columns feature of the MVC Grid is useful when going through large amounts of data. It enables you to lock certain columns by simply picking Locked in the column properties. Furthermore, the Grid also automatically provides a menu to allow the user to execute unlock or lock operations.

The Telerik UI for ASP.NET MVC Grid enables you to span a cell between multiple rows, as well as span multiple columns.

See Telerik UI for ASP.NET MVC Grid Row and Column Spanning demo

Grant your users the ability to resize and reorder the columns you have provided them with on the client side, without any request to the server. As expected, the provided context menu enables them to easily hide or display, sort or filter columns. From the user’s perspective, it just works.

See demo

Sticky columns are essential for grids with many columns, even more so when displayed on limited screen space. When a column is marked as sticky, it will always stay visible while other non-sticky columns become scrollable.

Sticky columns are similar to Frozen columns. The main difference is that while frozen columns are rendered on the left side of the widget, sticky columns are displayed in the scrollable area with the non-frozen columns.

See demo on Sticky Columns