Hi - this one is a feature request, not a bug. :)
For the filter menu, when you enter a filter value, it would be nice if you could press enter to execute the filter instead of having to click "Filter."
When enabling resizing and reordering for the Telerik Grid, using `MinResizableWidth` to set minimal column width will apply the constraint to the column position rather than the actual movable column. This means applying a min width of 200px to the first column will work as expected until the column is moved to another position. Now the column in question no longer has the min width applied, and the column that has moved into the first position has the 200px min width constraint.
It appears this is due to the constraint being applied to the `data-col-index` rather than the `data-col-initialization-index`, or something to that effect.
The following example has a 200px min-width constraint applied to the "Name" first column, and no custom min-with applied to "Address" second column. Switching the columns by moving the "Name" after the "Address" will apply the constraint to the "Address" and not the "Name".
https://blazorrepl.telerik.com/QJEAcuPE41L7Uhiw44
Currently using 7.1.0 but looks to be an issue in later versions as shown by the REPL example. Tested in Firefox and Chrome.
The column position is arbitrary and the bug isn't due to the constraint being applied to the 0 column, applying the constrain to all even columns then shuffling would result in the constrain still being applied to all even columns.
The scenario is:
In this case, the Grid should not try to create or clone an edit item on its own. Instead, it should rely on the returned instance from OnModelInit. However, the Grid first fires OnModelInit and then it still tries to clone or create an edit item, which causes an exception.
A possible workaround is to manage the whole edit process manually, similar to the example with ListView popup editing.
I want to change the default Grid loading animation to a pulsing loader indicator.
Hello
The new adaptive toolbar I think doesn't follow the same style as other components, particularly scrollable tabs.
https://demos.telerik.com/blazor-ui/grid/adaptive
The UI scroll buttons shouldn't just disable, they just be hidden/removed from the UI altogether when they are not active (as it is pretty confusing to the user otherwise) - they should only appear when they need to appear. They also take up real-estate for no value.
Telerik already have the same concept in the UI for the scrollable-tabs seen here;
https://demos.telerik.com/blazor-ui/tabstrip/scrollable-tabs
So I see some inconsistency between the 2 UI's and think they should not appear as does on scrollable tabs.
When attempting to utilize the FilterMenuButtonsTemplate component, after selecting any of the defined action buttons (i.e., Clear, Filter, etc.), the selection will cause the page to refresh.
Steps:
In the case of a sorted column, NVDA is not narrating the correct column name and narrating the incorrect Roles for the column headers.
In the case of an unsorted column, NVDA is narrating the column name twice and repeating the information.
The Grid component creates an invalid property value in its style for the <table> tag like shown below (some of the contents omitted for brevity). Notice the "width: ;" which should have a value in it.
<table style="height: auto; width: ;"></table>
This can be observed for example by creating a page with the below code and the using the browsers developer tools to examine the elements. Both Grids will have their CSS width property be invalid.
<TelerikGrid Data="@data" AutoGenerateColumns="true">
</TelerikGrid>
<TelerikGrid Width="200px" Data="@data" AutoGenerateColumns="true">
</TelerikGrid>
@code {
private List<Product> data = new () {
new Product() {
Id = 2,
Name = "Hello product"
}
};
public class Product {
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
}
}
I would like to add some custom actions into the popup window. I know I can implement a custom edit popup with an entirely custom content and actions. However, this requires a lot of custom work to just add one additional action in the popup. Please provide an easier option to add custom actions in the edit window.
If the Grid has no data, selecting null PageSize throws:
Error: System.ArgumentException: Page Size cannot be less than one (Parameter 'PageSize')
---
ADMIN EDIT
---
A possible workaround for the time being will be to use some conditional CSS to disable the PageSize dropdown while there is no data in the Grid: https://blazorrepl.telerik.com/QcOpkTlb38EDFboT34.
Since verion 9, the new styling is doing something strange.
The issue is also observable on the Tererik demo site (as well as our published applications) but I have noticed its on webassembly more-so than server apps;
https://demos.telerik.com/blazor-ui/grid/adaptive
If I run the demo site, the new pagination style (where you can type the page you want to navigate to) will flash up for a second, then it will go back to the old style after a second or 2.
Would anyone know why this is happening?
If the GridScrollMode.Virtual is enabled for the Grid, and the NoDataTemplate exceeds the height of the Grid container, a user can infinitely scroll inside the table even when there is no data and the template is displaying.
===ADMIN EDIT===
A possible workaround is to apply "overflow-y: hidden;" when the NoDataTemplate is shown: REPL link.
When the Grid PageSize exceeds the current data count and the InputType is Input, the Pager content cannot gain focus with the keyboard.
Here is a test page. A possible workaround is to switch the InputType at runtime. Then the user will be able to focus inside the Pager.
In some scenarios you may need a bit of extra code to get the current Grid item count.
<TelerikGrid Data="@GridData"
Pageable="true"
@bind-PageSize="@GridPageSize"
Navigable="true">
<GridSettings>
<GridPagerSettings InputType="@GridPagerInputType"
PageSizes="@( new List<int?> { 2, 5 } )" />
</GridSettings>
<GridColumns>
<GridColumn Field="@nameof(SampleModel.Name)" />
</GridColumns>
</TelerikGrid>
@code {
private List<SampleModel> GridData { get; set; } = new();
private int GridPageSize { get; set; } = 5;
//private PagerInputType GridPagerInputType { get; set; } = PagerInputType.Input;
private PagerInputType GridPagerInputType => GridPageSize >= GridData.Count ? PagerInputType.Buttons : PagerInputType.Input;
protected override void OnInitialized()
{
for (int i = 1; i <= 3; i++)
{
GridData.Add(new SampleModel()
{
Id = i,
Name = $"Name {i}"
});
}
}
public class SampleModel
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
}
}
I have a grid that can have a large number of pages and is intended to be able to be viewed on a small width device.
The issue is that upon loading the grid and its data, the pager of the grid isn't changing how it's displayed even though it is supposed to be adaptive.
If the page is manually resized, only then does the pager correctly show as a dropdown.
I've reproduced this in a REPL, though it seems slightly inconsistent as opposed to my main project where it is able to be reproduced every time.
In the attached gif, notice that upon loading the page, the grid shows the pager as a list of numbers as it would if the page was a large width screen, but when resizing the page slightly, it is triggered to show the pages as a dropdown, which I believe is the intended behavior.
Is this issue known and is there a way to trigger the grid to redraw its pager after the data is loaded, or some other form of workaround for this without implementing a custom pager template?
The feature request is to be able to customize the GridCsvExportOptions and GridExcelExportOptions from the API methods -
It will be useful to be able to customize the columns and data to be exported.
===
Telerik edit:
A possible workaround is to click the built-in Grid export buttons with JavaScript. With this approach, you will be able to use the built-in export options and events. Here is a REPL example.