---
ADMIN EDIT: Check the source code and comments in it from the following demo to see how to bind the grid to a DataTable: https://demos.telerik.com/blazor-ui/grid/data-table. You can also examine it offline - the entire demos project is available in the "demos" folder of your installation
The sample code snippet below will let the grid show data, but will not enable complex operations like filtering and sorting. Review the demo linked above for more details on the correct approach.
---
I would like to be able to supply a DataTable with an arbitrary amount of columns to the grid and display them all without declaring them all. This should also allow paging, sorting, filtering. At the moment binding to a DataTable is not supported, only IEnumerable collections are.
At the moment, here's the closest I can get, sorting and filtering throw errors so they are disabled.
@using System.Data@using Telerik.Blazor@using Telerik.Blazor.Components.Grid<button class="btn btn-primary" @onclick="@LoadData">Load Data</button>@if (@d != null){ <TelerikGrid Data=@d.AsEnumerable() TItem="DataRow" Sortable="false" Filterable="false" Pageable="true" PageSize="3" Height="400px"> <TelerikGridColumns> @foreach (DataColumn col in d.Columns) { <TelerikGridColumn Field="@col.ColumnName" Title="@col.ColumnName"> <Template> @((context as DataRow).ItemArray[col.Ordinal].ToString()) </Template> </TelerikGridColumn> } </TelerikGridColumns> </TelerikGrid>}@functions { DataTable d = null; void LoadData() { d = GetData(); } public DataTable GetData() { DataTable table = new DataTable(); table.Columns.Add("Product", typeof(string)); table.Columns.Add("Price", typeof(double)); table.Columns.Add("Quantity", typeof(int)); table.Columns.Add("AvailableFrom", typeof(DateTime)); table.Rows.Add("Product 1", 10.1, 2, DateTime.Now); table.Rows.Add("Product 2", 1.50, 10, DateTime.Now); table.Rows.Add("Product 3", 120.66, 5, DateTime.Now); table.Rows.Add("Product 4", 30.05, 10, DateTime.Now); return table; }}
