---
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; }}
Because the shape of our business objects is not something your grid is easily bound to, we are attempting to generate ExpandoOjbects on the fly and bind to them. In the picture below you can see that Id is not binding correctly. Name is showing up because a column Template was used and that seems to work fine. However, when attempting to use an EditorTemplate we get the RuntimeBinderException shown below.
@page "/dynamic-vendor"
@using System.Dynamic
@using Telerik.Blazor.Components.Grid
<div style="width: 800px; overflow-x: auto; overflow-y:hidden; border: 1px solid red; height:400px">
<TelerikGrid Data="@expandoVendors" EditMode="inline" Pageable=true PageSize=10 SelectionMode="Telerik.Blazor.GridSelectionMode.Multiple">
<TelerikGridColumns>
<TelerikGridCommandColumn width="100">
<TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
<TelerikGridCommandButton Command="Update" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
<TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TelerikGridCommandButton>
</TelerikGridCommandColumn>
<TelerikGridColumn Field="Id"></TelerikGridColumn>
<TelerikGridColumn Field="Name" Title="Name" Editable="true">
<Template>
@{
dynamic v = context as ExpandoObject;
<span style="white-space:nowrap">@(v.Name)</span>
}
</Template>
<EditorTemplate>
@{
dynamic v = context as ExpandoObject;
<input type="text" bind="@(v.Name)" />
}
</EditorTemplate>
</TelerikGridColumn>
</TelerikGridColumns>
</TelerikGrid>
</div>
@functions {
List<ExpandoObject> expandoVendors { get; set; }
protected override async Task OnInitializedAsync()
{
expandoVendors = new List<ExpandoObject>();
var v1 = new ExpandoObject();
v1.TryAdd("Id", "1");
v1.TryAdd("Name", "Google");
expandoVendors.Add(v1);
var v2 = new ExpandoObject();
v2.TryAdd("Id", "2");
v2.TryAdd("Name", "Amazon");
expandoVendors.Add(v2);
}
}
In addition to more filtering options we would like to have the ability to use custom filter components instead of the built-in ones. For example, through a cell template for the filter row.
Please comment below with how you would like to see this integrate into the data source operations of the grid (for example, should it fire an event where you filter the data you pass to the grid, or should the grid expose some method/interface that you need to use).
Group by the third column - there will be no aggregate info:
<TelerikGrid Data="@myData" Pageable="true" Sortable="true" FilterMode="@GridFilterMode.FilterRow" Groupable="true">
<GridColumns>
<GridColumn Field="@nameof(SampleComplexObject.ID)" Title="ID"></GridColumn>
<GridColumn Field="@nameof(SampleComplexObject.Name)" Title="The Name"></GridColumn>
<GridColumn Title="First Nested Property" Field="SomeNavigationProperty.Field1">
<GroupFooterTemplate>
Count: @context.Count
</GroupFooterTemplate>
</GridColumn>
<GridColumn Field="SomeNavigationProperty.OtherField" />
</GridColumns>
<GridAggregates>
<GridAggregate Field="SomeNavigationProperty.Field1" Aggregate="@GridAggregateType.Count" />
</GridAggregates>
</TelerikGrid>
@code {
public class SampleComplexObject
{
public int ID { get; set; }
public string Name { get; set; }
public NestedObject SomeNavigationProperty { get; set; } // use this field name for data binding
}
public class NestedObject
{
public string Field1 { get; set; }
public string OtherField { get; set; }
}
public IEnumerable<SampleComplexObject> myData = Enumerable.Range(1, 50).Select(x =>
new SampleComplexObject
{
ID = x,
Name = "Name " + x,
SomeNavigationProperty = new NestedObject
{
Field1 = "first " + x % 4,
OtherField = "second " + x % 6
}
}
);
}
We would like to see this functionality:
Stacked Header like in https://blazor.syncfusion.com/demos/datagrid/stacked-header?theme=bootstrap4
ADMIN EDIT: The issue stems from the data operations in the business logic, and it is not a bug in the component and it does not relate to WebAPI usage.
Hi there,
as a follow-up of https://feedback.telerik.com/blazor/1461176-set-specific-position-in-virtual-scrolling-mode we have implemented the suggested skip handling. But there seems an issue when the data is fetched asynchronously, specifically from an Web API.
After hours of debugging and analyzing i have narrowed it down to the following simple Blazor app showcasing the bug:
https://github.com/ViRuSTriNiTy/blazor-app-telerik-grid-skip-bug
Please clone the repo, start the application and follow the steps displayed above the grid to reproduce the bug.
The second skip followed immediatelly after the first one originates from the Telerik assembly hence i cannot investigate it further (no source code).
What are your thoughts? Is it a bug?
So lonG
Daniel
Hi, I'm looking to reproduce visual behavior with the Blazor WASM Gird that we've already standardized on in our implementation of the KendoReact Grid component.
one of the things we're doing that i'm not seeing yet in the Blazor Grid docs is rendering a triple-dot icon in the column header that clicks down to show a custom menu... looking around, the closest thing i see so far is the Blazor Grid support for a "Toolbar" header... that would probably work as a path forward but I wanted to ask if i was missing anything else more similar? or perhaps eventual plans.
or is there any facility to custom render the column header ourselves?
i'm including a screenshot example of what we've settled on so far after several iterations
Thank you! this Blazor wasm direction you're supporting is fantastic =)
row height set in grid definition must apply to all rows in the grid for row virtualization as of now.
in real business case there might be complex content in each row that can't reinforce this - but if each row report its own height, grid still can visualize the load, and it will be much more flexible.
In the following reproducible, try filtering the third column (SomeNavigationProperty.Field1). It does not work.
<TelerikGrid Data="@myData" Pageable="true" Sortable="true" FilterMode="@GridFilterMode.FilterRow" Groupable="true"><GridColumns>
<GridColumn Field="@nameof(SampleComplexObject.ID)" Title="ID"></GridColumn>
<GridColumn Field="@nameof(SampleComplexObject.Name)" Title="The Name"></GridColumn>
<GridColumn Title="First Nested Property" Field="SomeNavigationProperty.Field1" />
<GridColumn Field="SomeNavigationProperty.OtherField" />
</GridColumns>
</TelerikGrid>
@code {
public class SampleComplexObject
{
public int ID { get; set; }
public string Name { get; set; }
public NestedObject SomeNavigationProperty { get; set; } // use this field name for data binding
}
public class NestedObject
{
public int Field1 { get; set; }
public string OtherField { get; set; }
}
public IEnumerable<SampleComplexObject> myData = Enumerable.Range(1, 50).Select(x =>
new SampleComplexObject
{
ID = x,
Name = "Name " + x,
SomeNavigationProperty = new NestedObject
{
Field1 = x,
OtherField = "second " + x % 6
}
}
);
}
.png){kind=avatar}
Hello,
I am new to your Blazor UI components. Please provide a link for exporting a grid to excel.
Thanks,
Earl
For example, I'd like something like this:
Field Name: record.TotalSales -> Auto-generated column title: "Total Sales" with inserted space
ADMIN EDIT: See also the idea below about "AutoGeneratedTitles" Func<string, string> property where the user could perform whatever processing they liked upon the default value. Please leave your comment on what approach you would prefer to be exposed.
I want to fetch grid records page per page according to the appropriate filter settings. While this is possible through the OnRead event, I want to be able to send the request to the server so that it is easier to fetch the data, like in the UI for ASP.NET Core grid. Currently you can do this only for a server-side project because you can pass the request object by reference, but for a WASM project it needs to serialize in an HTTP request.
---
ADMIN EDIT
You can find examples of doing this here: https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server
---
@GridEditMode.Incell mode does not update automatically on row change when an editortemplate is used, as below
<GridColumn Field=@nameof(ProjectRankingInfo.Ranking.Option2) Title="@Option2Title" Width="120px" Filterable="false">
<EditorTemplate>
@{
currentItem = context as ProjectRankingInfo.Ranking;
<TelerikNumericTextBox Max="10" Min="0" Step="1" @bind-Value=@currentItem.Option2 />
}
</EditorTemplate>
</GridColumn>
one must click the update button for the update to occur,
Incell works fine and updates on row change for simple grid columns
ADMIN EDIT: SOLUTION: Read the details in the following article: https://docs.telerik.com/blazor-ui/components/grid/editing/incell#notes
ADMIN EDIT: this thread is rather long and I am adding the workaround offered by René here:
<TelerikGrid Data="@GridData" OnUpdate="@UpdateHandler"> ... </TelerikGrid>In GridColumn
-------------------
<EditorTemplate>
@{
var item = context as MyModel;
EditedItem = item;
<TelerikNumericTextBox @bind-Value="@item.Number" OnChange="OnChangeItemHandler">
</Telerik.Blazor.Components.TelerikNumericTextBox>
}
</EditorTemplate>
In Code-Section
----------------------
protected MyModel EditedItem { get; set; }
protected void OnChangeItemHandler()
{
var gridCommandEventArgs = new GridCommandEventArgs
{
Item = EditedItem
};
UpdateHandler(gridCommandEventArgs);
}
protected void UpdateHandler(GridCommandEventArgs args)
{
var myModel = (MyModel)args.Item;
// Save myModel to DB
.....
}
Currently I need to define a custom JsonConverter to serialize the state of the grid. I would prefer not to have to do this, however I understand that may just be the way things are for now. Creating this ticket / issue to track if this is ever changed to not being needed.
For now I'll be setting up two serializers, one just for the grids that uses Newtonsoft, and the one I would prefer to use that uses System.Text.Json, https://github.com/Blazored/LocalStorage.
From https://docs.telerik.com/blazor-ui/components/grid/state
// to store the serialized grid state, we need to have a custom serialized // based on Newtonsoft.Json serialization. In the future this may not be required public class FilterDescriptorJsonConverter : JsonConverter {
///rest omitted
}