New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Data Binding Overview

Updated on Oct 28, 2025

The Telerik UI for ASP.NET MVC Grid provides flexible data binding capabilities that allow you to display and manage tabular data from various sources. You can choose the appropriate binding method based on your application architecture and data requirements.

Data Binding Approaches

The Grid supports the following data binding methods:

Local Data Binding

Bind the Grid to a local dataset by passing an arbitrary model directly within the boundaries of the component. This approach is optimal for:

Small to medium-sized datasets that can be loaded in memory.
Static data that does not require frequent updates.
Scenarios where all data is available at render time.

For detailed implementation instructions, see Local Data Binding.

Remote Data Binding

Connect the Grid to a remote endpoint using AJAX operations. This enables:

Dynamic data loading with paging, sorting, grouping, and filtering.
Real-time data updates from external sources.
Improved performance with large datasets through on-demand data loading.

For more information and examples, refer to the Remote Data Binding documentation.

Custom DataSource Binding

Implement custom data binding scenarios with full control over the data retrieval process:

Custom data processing logic based on the remote server structure and requirements.
Custom data operations such as paging, sorting, filtering, and grouping.
Connection to OData and GraphQL services.

For more information, refer to the Custom Binding documentation.

Web API Data Binding

Connect the Grid to Web API endpoints for RESTful data operations:

RESTful API integration with automatic HTTP verb mapping.
Standard HTTP methods (GET, POST, PUT, DELETE) for CRUD operations.
JSON data exchange format.
Clean separation between client and server logic.

For more information, refer to the Web API Binding documentation.

Server Binding

Utilize server-side binding for rendering the Grid with data on the server. This approach provides:

Server-side rendering with pre-populated data.
Full-page postback scenarios with HTTP requests for CRUD operations.
Integration with server-side data processing.
Server-side template execution using Razor syntax.

For detailed implementation instructions, see Server Binding documentation.

SignalR Data Binding

Enable real-time data synchronization using SignalR for live data updates:

Real-time data synchronization across multiple clients.
Automatic Grid updates when data changes on the server.
Live collaboration features with instant data broadcasting.
Push notifications for data modifications without page refresh.

For detailed implementation instructions, see SignalR Data Binding documentation.

Key Considerations

When selecting a data binding approach for the Grid, evaluate the following factors:

Performance—Local binding offers faster initial rendering for small datasets, while remote binding provides better performance with large datasets through on-demand loading and server-side operations.
Data volume—Large datasets require remote binding, custom DataSource, or Web API binding to leverage server-side paging, sorting, and filtering for optimal performance.
Security—Remote binding provide better control over data access through server-side validation and authorization.
Real-time requirements—SignalR binding is essential for scenarios requiring live data updates and multi-client synchronization.
API architecture—Web API binding is optimal for RESTful services, while Custom DataSource binding provides flexibility for OData, GraphQL, or custom endpoints.
Application model—Server binding is suitable for traditional MVC applications requiring server-side rendering and full-page postbacks.
Development complexity—Local binding is simplest for static data, while Custom DataSource binding offers maximum flexibility at the cost of increased implementation complexity.

Loading Overlay Types

The Grid component exposes two types of loading indicators:

The GridLoaderType.LoadingPanel adds an overlay element with a loading spinner over the main content of the Grid. This is the default type.
The GridLoaderType.Skeleton uses the SkeletonContainer widget to show a simplified preview of each of the grid's cells. The Skeleton loading type aims at helping the user gain an idea of what the content would look like when the loading completes. It also makes the page load time appear shorter.

Check the Skeleton loading type in action in the live demo below:

Skeleton Loading Type Demo