Currently the blazor grid must be a specific, static height. If one is not provided, the grid uses a default of 500px.
Kendo grid implementations in other UI frameworks allow for more flexibility in the height of the grid. It would be great if the blazor implementation could support this as well.
Two specific scenarios that are valueable:
1) Grid height adjusts to accomodate all of the items in the grid
For other kendo grid implementations, this is typically the case when "Scrollable" is set to false. If there is a plan to allow toggling scrolling for the blazor grid, then I think that this would come along with that.
2) Ability to set grid height to 100%
With other kendo implementations this is normally done via CSS, and is useful for when you want a "full screen" grid. This is normally combined with "Scrollable=true" and often combined with Pagination="true" as well. Currently it's not possible to do this - since the height is defined on the k-grid element, it cannot be overridden with CSS.
On initialization of the Grid the oDataString is correct, but when I apply a Filter (through the FilterMenu) or apply a sort to a Grid column the ToODataString extension method throws with null reference exception. If the FilterMode is set to FilterRow or revert back to 2.16.0 everything works as expected.
<AdminEdit>
This bug extends to the functionality of the FilterMenu as a feature and is not connected only to the ToODataString();
</AdminEdit>
I am using EF on my backend and when I group I get an error like this one:
Unhandled exception rendering component: Processing of the LINQ expression '(GroupByShaperExpression:
KeySelector: (t.FirstName),
ElementSelector:(EntityShaperExpression:
EntityType: Customer
ValueBufferExpression:
(ProjectionBindingExpression: EmptyProjectionMember)
IsNullable: False
)
)' by 'RelationalProjectionBindingExpressionVisitor' failed. This may indicate either a bug or a limitation in EF Core. See https://go.microsoft.com/fwlink/?linkid=2101433 for more detailed information.
System.InvalidOperationException: Processing of the LINQ expression '(GroupByShaperExpression:
KeySelector: (t.FirstName),
ElementSelector:(EntityShaperExpression:
EntityType: Customer
ValueBufferExpression:
(ProjectionBindingExpression: EmptyProjectionMember)
IsNullable: False
)
)' by 'RelationalProjectionBindingExpressionVisitor' failed. This may indicate either a bug or a limitation in EF Core. See https://go.microsoft.com/fwlink/?linkid=2101433 for more detailed information.
at Microsoft.EntityFrameworkCore.Query.Internal.RelationalProjectionBindingExpressionVisitor.VisitExtension(Expression extensionExpression)
at System.Linq.Expressions.Expression.Accept(ExpressionVisitor visitor)
and a lot more line through the EF Core expression classes.
-----
ADMIN EDIT
At the moment, it looks like there is an issue between EF, LINQ and GroupBy expressions that seems to be the origin of this. In a profiler, you can see that running a group expression does not even run a query against the database itself - this is the origin of the problem, and the subsequent paging operation is where an actual exception is thrown, but it points to the field that was used for grouping. protected override void OnInitialized()
{
GridData = ProductService.GetProducts().ToList();
}
----
Hello,
I want to have the TelerikGrid's "Add" command display a popup for the new record's details, in the same way that the "Edit" functionality does. However with:
<TelerikGrid EditMode="popup">
<TelerikGridToolBar>
<TelerikGridCommandButton Command="Add" Icon="add">Add</TelerikGridCommandButton>
When I click "Add", the new blank row is shown within the grid identical to EditMode="inline", not as a popup. Is the "Add" functionality meant to work in popup mode?
Please allow to set Group By fields at Design time, currently only user has control to Drag and drop to group.
we need feature to group by fixed set of columns and don't allow user to change the grouping, also need option to hide group collapse icons.
I have a simple Grid with custom detail template
<Telerik.Blazor.Components.TelerikGrid Data="@GridData" FilterMode="Telerik.Blazor.GridFilterMode.FilterRow" >
<GridColumns>
<Telerik.Blazor.Components.GridCheckboxColumn Title="Selected"></Telerik.Blazor.Components.GridCheckboxColumn>
<Telerik.Blazor.Components.GridColumn Title="Name" Filterable="true" Field="@nameof(GridItem.Text)"></Telerik.Blazor.Components.GridColumn>
<Telerik.Blazor.Components.GridColumn Field="@nameof(GridItem.Date)" Filterable="true" Title="Date"></Telerik.Blazor.Components.GridColumn>
<Telerik.Blazor.Components.GridColumn Field="@nameof(GridItem.Id)" Filterable="true" Title="Id"></Telerik.Blazor.Components.GridColumn>
<Telerik.Blazor.Components.GridColumn Field="@nameof(GridItem.ParentIdValue)" Filterable="true" Title="Parent Id"></Telerik.Blazor.Components.GridColumn>
<Telerik.Blazor.Components.GridColumn Field="@nameof(GridItem.HasChildren)" Filterable="true" Title="Has Children"></Telerik.Blazor.Components.GridColumn>
</GridColumns>
<DetailTemplate>
<div>Custom Template</div>
</DetailTemplate>
</Telerik.Blazor.Components.TelerikGrid>
And here is what it looks like. Filters are moved one column to the left. When I remove DetailTemplate everything is ok.
Hello there,
I am looking for the ability to display hierarchical data in the grid control similar to that available in the asp.net core grid: https://demos.telerik.com/aspnet-core/grid/hierarchy
Thanks!
When the Grid is databound via OnRead event, the initially displayed aggregates are wrong and take into account the first page only.
A possible workaround is to bind the Grid in OnAfterRenderAsync -
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
<TelerikGrid @ref="@GridRef"
OnRead="@OnGridRead"
TItem="@Product"
Pageable="true">
<GridAggregates>
<GridAggregate Field="@nameof(Product.Name)" Aggregate="@GridAggregateType.Count" FieldType="@(typeof(System.String))" />
</GridAggregates>
<GridColumns>
<GridColumn Field="@nameof(Product.Name)" Title="Product Name">
<FooterTemplate>
@context.Count
</FooterTemplate>
</GridColumn>
<GridColumn Field="@nameof(Product.Price)" />
<GridColumn Field="@nameof(Product.ReleaseDate)" Title="Release Date" />
<GridColumn Field="@nameof(Product.Active)" />
</GridColumns>
</TelerikGrid>
@code {
TelerikGrid<Product> GridRef { get; set; }
List<Product> GridData { get; set; }
bool ShouldBindGrid { get; set; }
async Task OnGridRead(GridReadEventArgs args)
{
if (!ShouldBindGrid)
{
return;
}
await Task.Delay(200); // simulate network delay
DataSourceResult result = GridData.ToDataSourceResult(args.Request);
args.Data = result.Data;
args.Total = result.Total;
args.AggregateResults = result.AggregateResults;
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
// workaround for initial Grid aggregates
ShouldBindGrid = true;
GridRef.Rebind();
StateHasChanged();
}
}
protected override void OnInitialized()
{
GridData = new List<Product>();
var rnd = new Random();
for (int i = 1; i <= 50; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = "Product " + i.ToString(),
Price = (decimal)rnd.Next(1, 100),
ReleaseDate = DateTime.Now.AddDays(-rnd.Next(60, 1000)),
Active = i % 3 == 0
});
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
public DateTime ReleaseDate { get; set; }
public bool Active { get; set; }
}
}
When the Grid has a non-grouped column at first position, there is a missing left border in an adjacent cell on the second line of the header area.
First reported in:
https://www.telerik.com/forums/multi-column-line-in-grid-occasionally-missing
Possible workarounds:
Test page to reproduce:
(Uncomment the group column to use the second workaround from above.)
<TelerikGrid Data="@Data">
<GridColumns>
@*<GridColumn Title="Title">
<Columns>*@
<GridColumn Field="ID" />
@*</Columns>
</GridColumn>*@
<GridColumn Title="Group">
<Columns>
<GridColumn Field="Name" />
</Columns>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
public List<GridItem> Data { get; set; } = new List<GridItem>() {
new GridItem() { ID = 1, Name = "Name 1" }
};
public class GridItem
{
public int ID { get; set; }
public string Name { get; set; }
}
}
Grid virtual scrolling will freeze in the following scenario:
At the moment the numeric and date filters keep the filter button visible even on narrow columns. This must be implemented for the string filter as well - it has a set width at the moment.
The "clear filter" button must always be visible as well (when there is a filter applied, of course).
Ideally, the filter elements will also have a common container with an accessible class so, for example, you can set its max-width to 50% or 100px to match desired UI easily without hacking through several different layouts and selectors.
Using the Excel Export for Grid creates the Excel file, but on opening it, the columns that contain data are hidden. Unless I unhide the columns, the sprceadsheet looks empty.
---
ADMIN EDIT:
One idea to go about this is to expose an event that would allow users to modify the column width values before they get sent for export. The benefit of this approach is that if the columns are resized, the user will receive their current size in the specified unit e.g. rem, em or % and will be able to set the width in px.
Another idea is to default such column widths to some hardcoded value (say, 64px) or even the grid might try to calculate them (which can cause questionable results in stranger settings, but it is an idea - if an event gets exposed you will be able to do that in your application code).
---
Horizontal scroll bar is visible, but doesn't move with cursor/current-cell.
---
ADMIN EDIT
Applies also to vertical scrolling with or without row virtualization (e.g., using InCell edit mode, pressing Enter will open the next row for editing, but it will not work out with row virtualization at all after the current viewport, and without virtualization you will not see what's happening until you start typing and the browser calls .scrollIntoView() for the editor)
---
Example Repo - https://github.com/benhysell/BlazorGridPagingIssue
tldr - OnRead args do not contain the correct page after restoring state without manual intervention.
Project Setup
Steps to Reproduce
Workaround
I currently have a work around, this can be seen in the other page 'Paging Work Around'.
Expected Behavior
The Grid OnEdit event cannot be cancelled if the user tabs into a cell that should not allow editing.
REPL test page: https://blazorrepl.telerik.com/QcERELbm37c9SzzZ32
Click on "Foo 2" or "Bar 2", and start tabbing. You will be able to edit the values on row 3, which should not happen.
There are two possible workarounds: use a conditional EditorTemplate, or check editability in OnUpdate.
<TelerikGrid Data="@GridData" EditMode="@GridEditMode.Incell" Navigable="true"
OnEdit="@EditItem" OnUpdate="@UpdateItem">
<GridColumns>
<GridColumn Field="@nameof(GridModel.Foo)" Title="Foo (bug)" />
<GridColumn Field="@nameof(GridModel.Bar)" Title="Bar (workaround)">
@*<EditorTemplate>
@{
var item = context as GridModel;
// workaround 1
if (item.IsEditable)
{
<TelerikTextBox @bind-Value="@item.Bar" />
}
else
{
<span class="k-textbox k-input k-rounded-md">
<input class="k-input-inner" tabindex="0" readonly value="@item.Bar" />
</span>
}
}
</EditorTemplate>*@
</GridColumn>
<GridColumn Field="@nameof(GridModel.IsEditable)" Title="Is Row Editable?" Editable="false" />
</GridColumns>
</TelerikGrid>
@code {
List<GridModel> GridData { get; set; }
void EditItem(GridCommandEventArgs args)
{
GridModel item = args.Item as GridModel;
if (!item.IsEditable)
{
args.IsCancelled = true;
}
}
void UpdateItem(GridCommandEventArgs args)
{
var argsItem = args.Item as GridModel;
var index = GridData.FindIndex(i => i.Id == argsItem.Id);
// workaround 2
//if (index != -1 && argsItem.IsEditable)
//{
GridData[index] = argsItem;
//}
}
protected override void OnInitialized()
{
GridData = new List<GridModel>();
for (int i = 1; i <= 5; i++)
{
GridData.Add(new GridModel()
{
Id = i,
Foo = "Foo " + i.ToString(),
Bar = "Bar " + i.ToString(),
IsEditable = i % 2 == 0
});
}
}
public class GridModel
{
public int Id { get; set; }
public string Foo { get; set; }
public string Bar { get; set; }
public bool IsEditable { get; set; }
}
}