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.
There is an issue with setting the Grid's Page property to values other than 1.
This is visible on the Blazor Demo for Grid Paging (https://demos.telerik.com/blazor-ui/grid/paging).
Initially the CurrentPage variable is set to 3, and thus the Page property on the Grid is set to 3. The Pager in the grid correctly shows Page 3 and the Pager Info is also correct, however, the data in the Grid is not filtered to the correct page. This can be seen by clicking Page 1 in the Pager (the data remains the same), and then clicking Page 3 in the Pager (the data changes, and is different than the initial data).
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.
So far in the TelerikGrid component it is only possible to set the title of a column to a string. It would be useful to give the title/header a template instead of a simple string. In this way one could for example place a button, image, (...) inside the columnheader.
This kind of template-ability could be very handy in various other cases elsewhere, so please bring this flexibility into ui for blazor.
If the grid has Filterable=true, at the moment, all columns must have a Field defined. If a column does not have a Field, an exception similar to this one will be thrown:
Error: System.ArgumentNullException: Value cannot be null.
Parameter name: name
at System.Type.GetProperty(String name, BindingFlags bindingAttr)
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.get_PropInfo()
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.get_PropType()
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.get_PropTypeName()
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.ResetFilterText()
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.OnInit()
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
Instead, when no Field is provided, filtering, sorting and other operations that require a model field must be disabled internally without an exception.
For the time being, a workaround is to set Filterable=false to the desired column.
Here is an example where the workaround is highlighted
@
using
Telerik.Blazor.Components.Grid
@
using
Telerik.Blazor.Components.Button
<TelerikGrid data=
"@Histories"
height=
"600px"
Pageable=
"true"
PageSize=
"20"
Sortable=
"true"
Filterable=
"true"
>
<TelerikGridColumns>
<TelerikGridColumn Field=
"Casecode"
/>
<TelerikGridColumn Field=
"Historytext"
/>
<TelerikGridColumn Field=
"Createdate"
Title=
"Create Date"
/>
<TelerikGridColumn Filterable=
"false"
>
<Template>
@{
var CurrentRecord = context
as
CaseHistory;
if
(CurrentRecord.Blobid > 0)
{
<TelerikButton OnClick=
"@(() => MyCustomCommand(CurrentRecord))"
>Open</TelerikButton>
}
}
</Template>
</TelerikGridColumn>
</TelerikGridColumns>
</TelerikGrid>
@result
@functions {
public
class
CaseHistory
{
public
int
Id {
get
;
set
; }
public
int
Casecode {
get
;
set
; }
public
string
Historytext {
get
;
set
; }
public
DateTime Createdate {
get
;
set
; }
public
int
Blobid {
get
;
set
; }
}
IEnumerable<CaseHistory> Histories = Enumerable.Range(1, 50).Select(x =>
new
CaseHistory
{
Id = x,
Casecode = x,
Historytext =
"text "
+ x,
Createdate = DateTime.Now.AddDays(-x),
Blobid = (x % 3 == 0) ? x : -x
});
string
result {
get
;
set
; }
void
MyCustomCommand(CaseHistory itm)
{
result = $
"custom command fired for {itm.Id} on {DateTime.Now}"
;
StateHasChanged();
}
}
Hi,
I've noticed some odd behaviour where the OnRead event is being called twice. Initially I thought it was my code, but I've got to a bizarre example where having two Console.WriteLine statements causes the repeated call, but having one doesn't!
In my testing with more code in the method it hasn't been consistent, so I'm not sure if it's a timing/threading issue. I have tested with the following:
My test code looks like this:
@layout EmptyLayout
@page
"/testgrid"
<TelerikGrid Data=@GridData TotalCount=@Total
Pageable=
true
PageSize=15
OnRead=@ReadItems>
<GridColumns>
<GridColumn Field=@nameof(Employee.Id) Title=
"ID"
/>
<GridColumn Field=@nameof(Employee.Name) Title=
"Name"
/>
</GridColumns>
</TelerikGrid>
@code {
public
List<Employee> GridData {
get
;
set
; }
public
int
Total {
get
;
set
; } = 0;
protected
async Task ReadItems(GridReadEventArgs args)
{
Console.WriteLine(
"ReadItems 1"
);
// Remove this line and ReadItems is only called once!!!
Console.WriteLine(
"ReadItems 2"
);
// Adding this makes no difference
//await Task.Delay(1);
}
public
class
DataEnvelope
{
public
List<Employee> CurrentPageData {
get
;
set
; }
public
int
TotalItemCount {
get
;
set
; }
}
public
class
Employee
{
public
int
Id {
get
;
set
; }
public
string
Name {
get
;
set
; }
}
}
Any help appreciated!
Thanks.
This worked in 2.5.1.
Sample repro (focus the textbox and try moving the cursor with the left and right arrows)
<TelerikTabStrip>
<TabStripTab Title="first tab">
<TelerikTextBox Value="@TbValue"></TelerikTextBox>
<input type="text" value="@TbValue" />
</TabStripTab>
<TabStripTab Title="second tab">another tab</TabStripTab>
</TelerikTabStrip>
@code{
string TbValue { get; set; } = "lorem ipsum";
}
Hi,
I'm trying to set an empty column title
<Telerik.Blazor.Components.GridColumn Field="@item.FieldName"
Title=""
Resizable="true"
Width="@width">
I would expect it to show an empty header title but instead fieldName is displayed.
There's a bug when using the popup mode and adding a record
https://demos.telerik.com/blazor-ui/grid/editing-popup
We have a Telerik grid which is customized by some CSS rules. The problem is that the header width does not fill the width of the table if no scrollbar is shown.
My question is: Why did you create the table like it is right now in HTML (See screenshot as well)? In my opinion, it would be easier to use something more simple like described here: https://www.w3schools.com/html/html_tables.asp
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
This would make it easier to customize the table / grid as well as having no issues with the widths at all. This rectangle on the right top edge doesn't look good...
I'm not sure if this is a feature request or just a discussion / idea for the developers :) I just wanted to bring this in and get an explanation why you chose to do it that way (And maybe get a fix for this as well).
Best regards,
Christian