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.
Hiding a grid column causes data columns to be misaligned with headers.
The issue can be reproduced by clicking the "Show/Hide Summary Column" button in the following demo:
Hello,
I'm trying the grid component and I'm able to add a row to the grid using the embbed editor. But I wanted to add an item externally to the list:
<button @onclick="@MyClick">Add item</button>
void MyClick()
{
MyData.Add(new SampleData() { ID = 46, Name = "from click" });
StateHasChanged();
}
The new line does not appear on the grid but if I add a second item through the embbed editor then I get the 2 items!
I also try to replace the List<MyData> by an ObservableCollection<MyData> unsuccessfully.
Thanks & regards,
Here is how this page looks on mac, multiple browsers: https://demos.telerik.com/blazor-ui/grid/grouping
Notice that the columns are misaligned. I believe this is because the scrollbar isn't rendered on a mac if it is "disabled" (there is nothing to scroll).
Probably the best solution would be for it to render like this on all browsers, but have the columns line up (get rid of the spacer in the end of the header row) as the 'empty' scrollbar is not attractive :)
Consider the following scenario:
<TelerikGrid Data="Animals" Sortable="true">
<TelerikGridColumns>
<TelerikGridColumn Field="Color"></TelerikGridColumn>
<TelerikGridColumn Field="Breed"></TelerikGridColumn>
</TelerikGridColumns>
</TelerikGrid>
@functions {
public List<Animal> Animals { get; set; } = new List<Animal> { new Dog { Breed = "Sheepdog", Color = "Black" } };
public class Animal { public string Color { get; set; } }
public class Dog : Animal { public string Breed { get; set; } }
}
Everything renders fine for the grid until you attempt to sort by Breed, which results in the following exception:
System.ArgumentException: Invalid property or field - 'Breed' for type: Animal
Not sure what is going on under the hood here, but perhaps this could be fixed by looking at the type of the object, rather than the underlying list? I'm aware that this can be fixed by changing the data source to List<Dog> , but I think this use case of using a base-class is useful for many dynamic scenarios (think dynamic columns, etc)
Hello!
The multiple selection functionality in the grid no longer works as expected.
The select check boxes doesn't seem to do anything and the only way to select something is when clicking on the actual row.
The problem is also present on your demo page.
ADMIN EDIT: Duplicate of https://feedback.telerik.com/blazor/1443720-selection-does-not-work-when-clicking-on-the-checkbox-works-when-clicking-the-row
Best regards.
I would like to request these features on the Blazor Grid:
Thanks.
Hi there,
Is it possible to have multi-column headers for the data grid, like we have in Kendo grid.
if so, what would be the ETA?
Thanks,
Deepa
Please add an attribute to Blazor GridColumn which allows to easily align text horizontal in a GridColumn
e.g. <GridColumn Field="@(nameof(Item.Price))" Title="Price" HorizontalAlignment="Right" />
At least: Left, Right, Center
An autofit feature would be useful which sizes a column according to fit the current content exactly (with some space on the left and right ;-)
* autofit attribute for a column to automatically autofit the column
* autofit method on a grid column to issue autofit by code
Autofit for entire table (nice to have)
* autofit attribute on the grid element to automatically autofit all its columns (except those explicitely set to AutoFit="false")
* autofit method on a grid to issue autofit by code
Hi!
When i set GridCommandButton
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Save</GridCommandButton>
in a Grid component, I always get a Button with a label "Update". How can I change this?
Thank you!
I discovered "incell" editing mode on the grid, I love it! It makes the UI very intuitive and quick to update individual fields. It also works great with a PATCH API endpoint.
One minor glitch with "incell editing". If I click on a cell in a different row, it immediately takes the previous cell out of edit and puts the new cell in edit with a single click -- VERY cool. But, if you click on a cell in the same row it takes the previous cell out of edit, but doesn't put the new cell in edit mode. It would be cool if it worked the same as the "clicking in separate rows" functionality.
Thanks,
Kenny
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.
Hi,
This relates to my forum post here: https://www.telerik.com/forums/grid-selection-performance
I've noticed that the grid becomes very slow to select a row and to page when there is more than a little data being displayed. In the test project attached it can take 9 seconds to just select a row on the grid which is unworkable. Although we can reduce the amount of data and use paging in the real application we are developing it is still far too slow for Production use.
The test application has 2 pages, one using the Telerik grid and one using a simple component that draws an HTML table and handles selection. My aim was to prove that the problem is not down to Blazor re-rendering when a row is selected. The simple component it is around 0.3 seconds to select a row vs 9 seconds for the Telerik grid.
Obviously I appreciate that the Telerik grid is doing a lot more than the component, but it is not just Blazor that is causing this issue, it must be related to the work the grid has to do when a row is selected.
The attached project has 2 pages, one using the Telerik Grid one using my simple component. Click the load button to generate 300 rows of test data and then try clicking on a row. You can see the problem by running a performance trace in either Firefox or Chrome. The browser can even become unresponsive just clicking on a row, which you will appreciate is impossible to live with. If that doesn't happen you can try increasing the amount of data generated.
Thanks for your time!
Kind Regards,
Nick.