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

Virtualization of remote data

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Theme Builder
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

            
                        virtualization_remote_data.cshtml
                    
                        Virtualization_Remote_DataController.cs

Also available for:

API REFERENCE

kendo.syncReady(function(){jQuery("#grid").kendoGrid({"columns":[{"title":"Order ID","headerAttributes":{"data-field":"OrderID","data-title":"Order\u0026#32;ID"},"width":"110px","field":"OrderID","encoded":true},{"title":"Customer ID","headerAttributes":{"data-field":"CustomerID","data-title":"Customer\u0026#32;ID"},"width":"130px","field":"CustomerID","encoded":true},{"title":"Ship Name","headerAttributes":{"data-field":"ShipName","data-title":"Ship\u0026#32;Name"},"width":"280px","field":"ShipName","encoded":true},{"title":"Ship Address","headerAttributes":{"data-field":"ShipAddress","data-title":"Ship\u0026#32;Address"},"field":"ShipAddress","encoded":true},{"title":"Ship City","headerAttributes":{"data-field":"ShipCity","data-title":"Ship\u0026#32;City"},"width":"160px","field":"ShipCity","encoded":true},{"title":"Ship Country","headerAttributes":{"data-field":"ShipCountry","data-title":"Ship\u0026#32;Country"},"width":"160px","field":"ShipCountry","encoded":true}],"sortable":true,"scrollable":{"virtual":true,"height":"200px"},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/aspnet-mvc/grid/virtualization_read"},"prefix":""},"pageSize":100,"page":1,"groupPaging":false,"total":0,"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"OrderID":{"type":"number"},"CustomerID":{"type":"string"},"ContactName":{"type":"string"},"Freight":{"type":"number","defaultValue":null},"ShipAddress":{"type":"string"},"OrderDate":{"type":"date","defaultValue":null},"ShippedDate":{"type":"date","defaultValue":null},"ShipCountry":{"type":"string"},"ShipCity":{"type":"string"},"ShipName":{"type":"string"},"EmployeeID":{"type":"number","defaultValue":null}}}}}});}); /*horizontal Grid scrollbar should appear if the browser window is shrinked too much*/ #grid table { min-width: 1190px; }

Description

The virtualization feature of Telerik ASP.NET MVC Grid allows you to handle large amount of data without negatively impacting the user experience and the browser performance.

You can enable the virtual scrolling via the .Scrollable(scrollable => scrollable.Virtual(true)) configuration setting, which shows a vertical scrollbar for the grid content and renders only the number of items set via the PageSize setting of the grid data source. After you drag the scrollbar and the PageSize parameter value is exceeded, it makes automatic requests to retrieve and render the next set of grid rows.

Virtualization of remote data

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo