In the TelerikGrid-control there seems to be a miss-alignment of the gridcell compared to their respective columnheaders.
This behavior is present on touch devices and Mac.
example of correct alignment in non-mobile browser:
example of incorrekt alignment in mobile browser (simulated via F12 tools, but same on real android device):
It looks like it maybe caused by the column where the vertical scrollbar is placed (far right). If i change the padding-right from 16px to 0px it aligns correctly again.
When you have page numbers that go to 4 digits (>1000), the numbers get cramped up together and it is hard to tell which page you really are on.
Workaround - the CSS at the beginning of the snippet below.
Reproducible - go to the last page on this sample and you will see the results attached below, if you have removed the workaround.
<style> /* The workaround */ .k-pager-wrap.k-grid-pager .k-link, .k-pager-wrap.k-grid-pager .k-state-selected { min-width: calc(10px + 1.4285714286em); width: auto; }</style>@*The MCVE*@@using Telerik.Blazor.Components.Grid<TelerikGrid Data="@MyData" Height="300px" Pageable="true" PageSize="2" Sortable="true"> <TelerikGridColumns> <TelerikGridColumn Field="@(nameof(SampleData.Id))" /> <TelerikGridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" /> <TelerikGridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" /> </TelerikGridColumns></TelerikGrid>@functions { public IEnumerable<SampleData> MyData = Enumerable.Range(1, 5000).Select(x => new SampleData { Id = x, Name = "name " + x, HireDate = DateTime.Now.AddDays(-x) }); public class SampleData { public int Id { get; set; } public string Name { get; set; } public DateTime HireDate { get; set; } } //in a real case, consider fetching the data in an appropriate event like OnInitAsync //also, consider keeping the models in dedicated locations like a shared library //this is just an example that is easy to copy and run}
Is there any way to default the values that are used when I create a new row?
So for example, I have a row where I want to default a date to Jan 1st of the following year. However, when I add the row, it adds nulls to all fields and the date shows up as 1 Jan 1900 and there's a lot of fiddly clicking to set the right date.
Trying the custom GridCommandButtons. When recieving the event, the CommandName of the GridCommandEventArgs is always null. Shouldn't this be the name of the command I specified on the command?
Explore you example at
https://docs.telerik.com/blazor-ui/components/grid/toolbar#custom-commands
When private void MyCommandFromToolbar(GridCommandEventArgs args) is triggered, I expect the command name to be MyToolbarCommand
It is a common request to show grids in alternating colors, rather than simply white and grey. Because the Grid component generates the <tr> element, we are left with manually setting each <td> element. A tedious but effective solution.
The feature I would like to request is to add 2 new tags to the <TelerikGrid> component, call them EvenRowClass, and OddRowClass. The behavior is the same as the Class tag, but they operate on Even and Odd numbered rows of data, respectively. Their values would be added to the <tr> element as <tr class="MyEvenClass"> or <tr class="MyOddClass" in the same manner class k-alt is generated or not. This would provide a simple yet extensible mechanism to achieve custom alternating row colors in a Grid.
The GridCheckboxColumn for the Blazor Grid is simply confusing.
I think 99 % of the users assume the GridCheckboxColumn is intended to be used for boolean field types.
Functionality is very nice but naming could be e.g. "GridSelectionColumn" to clarify what's it's purpose.
Grid with Checkbox Column throws the following error when placed inside EditForm:
InvalidOperationException: Telerik.Blazor.Components.TelerikCheckBox`1[System.Nullable`1[System.Boolean]] requires a value for the 'ValueExpression' ValueExpression is provided automatically when using 'bind-Value'.
I recently implemented a Datatable-based grid utilizing the new features/enhancements released in v2.15.0. One notable feature omission that I noticed was the lack of grouping support. I did notice that there was another support item that mentioned OnRead not working with Grouping, but was unsure if that was the reason for the issues I am having or not.
I am using the OnRead() event for building my source from the DataTable, as the demo for using a DataTable shows, and experience a similar issue to that in the referenced support item (empty rows in the grid after attempting grouping, or "nothing" happening, depending on how I try and configure the grid/logic).
Is there a way to do this now, or can this functionality be added?
Similar to the focusout-event of html-input...I want to do something after leaving a row.
----
ADMIN EDIT
The majority of things are possible through templates right now. You can put in the desired template (editor, row, cell, header, whatever you need to capture events from) and add the desired handler to your own DOM element. Then, you can alter the grid, if needed, through its state. If you need the row data item - it is available in the templates related to the data rows. If you need adjacent rows models - you can get them from the sorted list of grid data when you use its OnRead event - you have the current row and you can get a previous/next one as needed from that list.
That said, I am keeping this item open (status "Unplanned") so we can still gather any feedback and its popularity and what the community thinks, and whether it will be a meaningful addition to the component.
----
Grid - Import from Clipboard (Excel) when column name matches the first row header
I think it would be a great feature to be able to import copied data from excel into the grid either based on the index of the column or the header row in the clipboard matches the name of the column in Blazor Grid.
---
ADMIN EDIT
You can find an example of implementing this and the caveats it brings in the following sample project: https://github.com/telerik/blazor-ui/tree/master/grid/paste-from-excel
This feature requires research on how we could provide it as a built-in feature. So, any feedback on the matter will be appreciated.
---
2. Open the reordering demo
3. try to reorder columns
Telerik input components inside EditorTemplate render the whole grid on each keystroke
<AdminEdit>
As a workaround, you can use the standard Input components provided by the framework together with a CSS class that would visually make them like the Telerik Input Components. An example for the TextArea:
<InputTextArea class="k-textarea" @bind-Value="@myValue"></InputTextArea></AdminEdit>
ADMIN EDIT
Workarounds are:
- using a "real" model instead of a dynamic type
- removing the LoadGroupsOnDemand feature (and using the regular paging so you can still have grouping in case you were using virtual scrolling)
Using OnRowDrop works fine but there is no configuration possible to set the column at the end of the grid.
Of course it's a personnal taste but I like to have the all the actions buttons on the right side