Telerik UI for ASP.NET Core Grid Overview

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Telerik REPL
Change Theme
default
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main
Launch Theme Builder

HtmlHelper
TagHelper
Files:
                    index.cshtml
                
                    IndexController.cs
                
                    ProductService.cs
                
                    DetailProductViewModel.cs
                
                    Index_TagHelper.cshtml

Also available for:

CLIENT-SIDE API SERVER-SIDE API

kendo.syncReady(function(){jQuery("#grid").kendoGrid({"dataBound":onDataBound,"columnMenu":{"filterable":false,"messages":{"settings":"Edit Column Settings","buttonTitle":"{0} filter column settings"}},"excel":{"proxyURL":"/aspnet-core/grid/excel_export_save"},"groupable":{"enabled":true,"showFooter":false},"navigatable":true,"pdf":{"proxyURL":"/aspnet-core/grid/excel_export_save"},"sortable":true,"columns":[{"attributes":{"class":"checkbox-align"},"headerAttributes":{"class":"checkbox-align"},"width":"75px","selectable":true},{"title":"Product name","width":"300px","template":"\u003cdiv class=\u0027product-photo\u0027\n style=\u0027background-image: url(/aspnet-core/shared/web/foods/#:data.ProductID#.jpg);\u0027\u003e\u003c/div\u003e\u003cdiv class=\u0027product-name\u0027\u003e#: ProductName #\u003c/div\u003e","field":"ProductName","filterable":{"messages":{"title":"Show items with value that","buttonTitle":"{0} filter column settings"},"checkAll":false},"encoded":true,"editor":"\r\n\u003cinput data-val=\"true\" data-val-required=\"The Product name field is required.\" id=\"ProductName\" name=\"ProductName\" title=\"ProductName\" type=\"text\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"#ProductName\").kendoTextBox({});});\u003c/script\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"ProductName\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Price","width":"105px","field":"UnitPrice","format":"{0:C}","filterable":{"messages":{"title":"Show items with value that","buttonTitle":"{0} filter column settings"},"checkAll":false},"encoded":true,"editor":"\n\n\u003cinput data-val=\"true\" data-val-number=\"The field Unit price must be a number.\" data-val-range=\"The field Unit price must be between 0 and 2147483647.\" data-val-range-max=\"2147483647\" data-val-range-min=\"0\" data-val-required=\"The Unit price field is required.\" id=\"UnitPrice\" name=\"UnitPrice\" style=\"width:100%\" title=\"UnitPrice\" type=\"text\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"#UnitPrice\").kendoNumericTextBox({\"format\":\"c\",\"max\":2147483647,\"min\":0});});\u003c/script\u003e\n\n\n\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"UnitPrice\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"In Stock","width":"130px","template":"\u003cspan id=\u0027badge_#=ProductID#\u0027 class=\u0027badgeTemplate\u0027\u003e\u003c/span\u003e","field":"Discontinued","filterable":{"messages":{"title":"Show items with value that","buttonTitle":"{0} filter column settings"},"checkAll":false},"encoded":true},{"title":"Category","width":"125px","field":"Category.CategoryName","filterable":{"messages":{"title":"Show items with value that","buttonTitle":"{0} filter column settings"},"checkAll":false},"encoded":true,"editor":"\r\n\u003cinput data-bind=\"value: Category\" id=\"Category_CategoryName\" name=\"Category.CategoryName\" type=\"text\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"#Category_CategoryName\").kendoDropDownList({\"dataTextField\":\"CategoryName\",\"dataValueField\":\"CategoryID\",\"dataSource\":[{\"CategoryID\":1,\"CategoryName\":\"Beverages\"},{\"CategoryID\":2,\"CategoryName\":\"Condiments\"},{\"CategoryID\":3,\"CategoryName\":\"Confections\"},{\"CategoryID\":4,\"CategoryName\":\"Dairy Products\"},{\"CategoryID\":5,\"CategoryName\":\"Grains/Cereals\"},{\"CategoryID\":6,\"CategoryName\":\"Meat/Poultry\"},{\"CategoryID\":7,\"CategoryName\":\"Produce\"},{\"CategoryID\":8,\"CategoryName\":\"Seafood\"}]});});\u003c/script\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Category.CategoryName\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e","groupHeaderTemplate":"Category: #=data.value#, Total Sales: #=kendo.format(\u0027{0:c}\u0027, data.aggregates.TotalSales.sum)#"},{"title":"Rating","width":"200px","template":function (data) { var result = '';result+=`<input data-bind="value: CustomerRating" id="rating_${data.ProductID}" name="rating_${data.ProductID}" type="text" value="" />`;/*kendoTmpPlaceholder*/queueMicrotask(()=>{jQuery(`#rating_${data.ProductID}`).kendoRating({"min":1,"max":5,"selection":`continuous`,"label":false});});return result;},"field":"CustomerRating","filterable":{"messages":{"title":"Show items with value that","buttonTitle":"{0} filter column settings"},"checkAll":false},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-required=\"The CustomerRating field is required.\" id=\"CustomerRating\" name=\"CustomerRating\" type=\"number\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"CustomerRating\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e","editable":returnFalse},{"title":"Country","width":"120px","template":"\u003cdiv class=\u0027k-text-center\u0027\u003e\u003cimg src=\u0027/aspnet-core/shared/web/country-flags/#:data.Country.CountryNameShort#.png\u0027 alt=\u0027#: data.Country.CountryNameLong#\u0027 title=\u0027#: data.Country.CountryNameLong#\u0027 width=\u002730\u0027 /\u003e\u003c/div\u003e","field":"Country.CountryNameLong","filterable":{"messages":{"title":"Show items with value that","buttonTitle":"{0} filter column settings"},"checkAll":false},"encoded":true,"editor":"\n\u003cinput data-bind=\"value: Country\" id=\"Country_CountryNameLong\" name=\"Country.CountryNameLong\" type=\"text\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"#Country_CountryNameLong\").kendoDropDownList({\"autoWidth\":true,\"dataTextField\":\"CountryNameLong\",\"dataValueField\":\"CountryNameShort\",\"template\":\"\\u003cdiv class=\\u0027dropdown-country-wrap\\u0027\\u003e\\u003cimg src=\\u0027/aspnet-core/shared/web/country-flags/#:data.CountryNameShort#.png\\u0027 alt=\\u0027#: data.CountryNameLong#\\u0027 title=\\u0027#: data.CountryNameLong#\\u0027 width=\\u002720\\u0027 /\\u003e\\u003cspan\\u003e#: data.CountryNameLong #\\u003c/span\\u003e\\u003c/div\\u003e\",\"dataSource\":[{\"CountryID\":0,\"CountryNameShort\":\"bg\",\"CountryNameLong\":\"Bulgaria\"},{\"CountryID\":0,\"CountryNameShort\":\"br\",\"CountryNameLong\":\"Brazil\"},{\"CountryID\":0,\"CountryNameShort\":\"fr\",\"CountryNameLong\":\"France\"},{\"CountryID\":0,\"CountryNameShort\":\"gb\",\"CountryNameLong\":\"Great Britain\"},{\"CountryID\":0,\"CountryNameShort\":\"in\",\"CountryNameLong\":\"India\"},{\"CountryID\":0,\"CountryNameShort\":\"it\",\"CountryNameLong\":\"Italy\"},{\"CountryID\":0,\"CountryNameShort\":\"us\",\"CountryNameLong\":\"USA\"}]});});\u003c/script\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Country.CountryNameLong\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Units","width":"105px","field":"UnitsInStock","filterable":{"messages":{"title":"Show items with value that","buttonTitle":"{0} filter column settings"},"checkAll":false},"encoded":true,"editor":"\n\u003cinput data-val=\"true\" data-val-range=\"The field Units in stock must be between 0 and 2147483647.\" data-val-range-max=\"2147483647\" data-val-range-min=\"0\" data-val-required=\"The Units in stock field is required.\" id=\"UnitsInStock\" name=\"UnitsInStock\" style=\"width:100%\" title=\"UnitsInStock\" type=\"text\" value=\"\" /\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"#UnitsInStock\").kendoNumericTextBox({\"decimals\":0,\"format\":\"n0\",\"max\":2147483647,\"min\":-2147483648});});\u003c/script\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"UnitsInStock\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Total Sales","width":"140px","field":"TotalSales","format":"{0:c}","filterable":{"messages":{"title":"Show items with value that","buttonTitle":"{0} filter column settings"},"checkAll":false},"encoded":true,"aggregates":["sum"]},{"title":"Target Sales","width":"220px","template":"\u003cspan class=\"k-sparkline\" data-series=\"[{data: [#=TargetSales#], labels:{visible:true, format:\u0027{0}%\u0027, background:\u0027none\u0027}}]\" id=\"chart_#=ProductID#\" name=\"chart_#=ProductID#\"\u003e\u003c/span\u003e\u003cscript\u003ekendo.syncReady(function(){jQuery(\"\\#chart_#=ProductID#\").kendoSparkline({\"categoryAxis\":[{\"majorGridLines\":{\"visible\":false},\"majorTicks\":{\"visible\":false}}],\"chartArea\":{\"background\":\"transparent\",\"margin\":{\"bottom\":0,\"left\":0,\"right\":0,\"top\":0},\"width\":180},\"legend\":{\"visible\":false},\"tooltip\":{\"visible\":false},\"valueAxis\":[{\"labels\":{\"visible\":false},\"majorGridLines\":{\"visible\":false},\"max\":130,\"min\":0,\"minorTicks\":{\"visible\":false},\"type\":\"numeric\",\"visible\":false}],\"type\":\"bar\"});});\u003c\\/script\u003e","field":"TargetSales","filterable":{"messages":{"title":"Show items with value that","buttonTitle":"{0} filter column settings"},"checkAll":false},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-required=\"The TargetSales field is required.\" id=\"TargetSales\" name=\"TargetSales\" type=\"number\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"TargetSales\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e","editable":returnFalse},{"width":"120px","command":[{"text":"Delete","name":"destroy"}]}],"pageable":{"buttonCount":10},"filterable":{"messages":{"title":"Show items with value that","buttonTitle":"{0} filter column settings"}},"resizable":{"columns":true},"reorderable":{"columns":true},"scrollable":{"height":"400px"},"editable":{"confirmation":"Are you sure you want to delete this record?","confirmDelete":"Delete","cancelDelete":"Cancel","mode":"incell","create":true,"update":true,"destroy":true,"template":null},"toolbar":[{"text":"Export to Excel","name":"excel"},{"text":"Export to PDF","name":"pdf"},{"name":"Search"}],"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-core/grid/detailproducts_read"},"prefix":"","update":{"url":"/aspnet-core/grid/detailproducts_update"},"create":{"url":"/aspnet-core/grid/detailproducts_create"},"destroy":{"url":"/aspnet-core/grid/detailproducts_destroy"}},"pageSize":20,"page":1,"groupPaging":false,"total":0,"group":[{"field":"Category.CategoryName","dir":"desc","aggregates":[{"field":"TotalSales","aggregate":"sum"}]}],"aggregate":[{"field":"TotalSales","aggregate":"sum"}],"error":error_handler,"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"ProductID","fields":{"ProductID":{"editable":false,"type":"number"},"ProductName":{"type":"string"},"UnitPrice":{"type":"number"},"UnitsInStock":{"type":"number"},"Discontinued":{"editable":false,"type":"boolean"},"LastSupply":{"type":"date"},"UnitsOnOrder":{"type":"number"},"Category":{"type":"object","defaultValue":{"CategoryID":8,"CategoryName":"Seafood"}},"CategoryID":{"type":"number","defaultValue":null},"CountryID":{"type":"number","defaultValue":null},"QuantityPerUnit":{"type":"string"},"Country":{"type":"object","defaultValue":{"CountryID":0,"CountryNameShort":"bg","CountryNameLong":"Bulgaria"}},"CustomerRating":{"type":"number"},"TargetSales":{"type":"number"},"TotalSales":{"editable":false,"type":"number"}}}},"batch":true,"autoSync":true},"height":"700px"});}); .k-grid tr .checkbox-align { text-align: center; vertical-align: middle; } .product-photo { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background-size: 32px 35px; background-position: center center; vertical-align: middle; line-height: 32px; box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2); margin-right: 5px; } .product-name { display: inline-block; vertical-align: middle; line-height: 32px; padding-left: 3px; } .k-rating-container .k-rating-item { padding: 4px 0; } .k-rating-container .k-rating-item .k-icon { font-size: 16px; } .dropdown-country-wrap { display: flex; flex-wrap: nowrap; align-items: center; white-space: nowrap; } .dropdown-country-wrap img { margin-right: 10px; } #grid .k-grid-edit-row > td > .k-rating { margin-left: 0; width: 100%; } .k-grid .k-grid-search { margin-left: auto; margin-right: 0; }

The Grid component is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Description

The Telerik UI for ASP.NET Core Grid is a component for displaying data in a tabular format and comes with a variety of features for data management, presentation, and customization. The Data Grid is a powerful data-visualization and editing component that exposes a plethora of functionalities and events which can be seamlessly combined together.

The Grid can be bound to various data sources and comes with built-in common features, such as filtering, grouping, paging, sorting, and more advanced ones, such as hierarchy with aggregates, frozen columns, virtualization and endless scrolling, state management, binding to SignalR Hub, and many more.

This demo shows a Data Grid with enabled paging, sorting, filtering, grouping, export to Excel, export to PDF, search panel, checkbox selection, aggregates, frozen columns, column menu, which is also using the template engine to customize its appearance and incorporate external components such as the Badge, Chart, Rating, and DropDownList.

The ASP.NET Core Data Grid control is part of Telerik UI for ASP.NET Core, a professional-grade UI library with 110+ components for building modern and feature-rich web applications. The Data Grid is a server-side wrapper for the Kendo UI for jQuery Grid component and comes in the form of an HtmlHelper.

Functionality and Features

Responsive and adaptive HTML5 rendering
HTML and Tag Helper options
Built-in implementations for paging, sorting, filtering, and grouping
Insertion, update, and deletion of data from various data sources such as WebAPI, AJAX, GraphQL, SignalR, and more
Ultimate performance with column and row virtual scrolling
Column menu, resizing, reordering, and show-and-hide interactions
Search panel
Hierarchical Data Grid and aggregates
Cell, row, and checkbox selection
Full control over the layout presentations through the toolbar, row, and detail Data Grid templates
Frozen columns and multi-column headers
PDF and Excel export
Accessibility, keyboard navigation, globalization, and RTL support
Server-Side and Client-Side API for Max Flexibility
Scaffolding in Visual Studio

Additional Apps

This Grid example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.

Telerik UI for ASP.NET Core Grid Overview

Description

Additional Apps

Support & Learning Resources

Additional Resources