Key events will allow developers to enhance and customize the Grid keyboard navigation. For example -
Detect when the user presses the down-arrow key when on the last grid row. We want to force a "next page" when they do this, and a "previous page" if they are at the top of the grid and press the up-arrow key.
---
ADMIT EDIT
Everyone, please feel free to list other scenarios as well.
Description
The left offset style value is not correctly formatted. It is culture-specific, however, the CSS rules should be formatted with culture invariant decimal separator - dot.
Reproduction (if bug)
1. Create a grid with locked columns.
2. Set the culture to one that has a comma as the decimal separator.
3. Resize the frozen columns, the left value is formatted with a comma instead of a dot.
Expected (if bug)
The value should be formatted with a dot.
Browser (if bug)
All
Project type (if bug)
All
I want to place the Pager on top of the Grid. I know it can be handled with a Pager component integration in the Grid Toolbar, but I want to use the Toolbar for other purposes/actions. Please allow control over the Pager position.
Hello,
as you can see in the provided example : https://blazorrepl.telerik.com/GwEsxPFc05zxpF2u01
i have set a filter for column Country on OnStateInitHandler event. However when i try to clear the filter from the filtermenutemplate button , Check box has the previous value. But data are bound correctly.
Could you give me some advice?
Description
When the state is loaded and there is a value in the search box, the X (clear button) is missing.
Reproduction (if bug)
Expected (if bug)
The X icon should be visible.
Browser (if bug)
All
Project type (if bug)
All
Last working version of Telerik UI for Blazor (if regression)
3.5.0
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
Description
OnRead event is triggered multiple times when the page is different from the first one and the page size is changed.
Reproduction (if bug)
1. Create a grid and set the pageable and page sizes options
2. Navigate to a page different from the first one.
3. Change the page size.
4. The OnRead event is triggered twice.
Sample REPL for reproduction.
Browser (if bug)
All
Project type (if bug)
All
Last working version of Telerik UI for Blazor (if regression)
3.5.0
Hello,
When a Grid is using multi column headers, and I add one more column in the OnBeforeExport event, this new column has no title in the exported file.
A possible workaround might be to use a column with zero Width and change the width in OnBeforeExport.
@using Telerik.Blazor.Common.Export.Excel
@using Telerik.Blazor.Components.Grid
<TelerikGrid TItem="@FlowRun"
Pageable="true"
OnRead="@GetData">
<GridToolBar>
<GridCommandButton Command="ExcelExport" Icon="file-excel">Export to Excel</GridCommandButton>
<GridCommandButton Command="CsvExport" Icon="file-csv">Export to CSV</GridCommandButton>
<label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
</GridToolBar>
<GridExport>
<GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" OnBeforeExport="@BeforeExcelExport" />
<GridCsvExport FileName="telerik-grid-export" AllPages="@ExportAllPages" OnBeforeExport="@BeforeCsvExport" />
</GridExport>
<GridColumns>
<GridColumn Field="@nameof(FlowRun.FileName)" Title="File Name" Width="300px" />
<GridColumn Field="@nameof(FlowRun.Type)" Title="Type" Width="100px" />
<GridColumn Field="@nameof(FlowRun.FileSize)" Title="File Size" Width="200px" />
<GridColumn Title="Source">
<Columns>
<GridColumn Field="@(nameof(FlowRun.Source))" Title="MPID"/>
<GridColumn Field="@(nameof(FlowRun.SourceFileProtocol))" Title="Type" />
</Columns>
</GridColumn>
<GridColumn Field="@nameof(FlowRun.ErrorMessage)"
Title = "Error"
Width="0" />
</GridColumns>
</TelerikGrid>
@code {
bool ExportAllPages { get; set; }
private async Task GetData(GridReadEventArgs args)
{
args.Data = Enumerable.Range(1, 10).Select(x => new FlowRun
{
FileName = $"File {x}",
Type = $"Type {x}",
FileSize = x * 2,
Source = $"Source {x}",
SourceFileProtocol = FileProtocol.CIX,
ErrorMessage = $"Error {x}"
}).ToList();
args.Total = 100;
}
private void BeforeCsvExport(GridBeforeCsvExportEventArgs obj)
{
AddErrorMessageColumn(obj);
}
private void BeforeExcelExport(GridBeforeExcelExportEventArgs obj)
{
AddErrorMessageColumn(obj);
}
private void AddErrorMessageColumn(GridBeforeSpreadsheetExportEventArgs args)
{
args.Columns.Find(x => x.Field == nameof(FlowRun.ErrorMessage)).Width = "100px";
//args.Columns.Add(new ExcelExportableColumn
//{
// Field = nameof(FlowRun.ErrorMessage),
// Title = "Error"
//});
}
public class FlowRun
{
public string FileName { get; set; }
public string Type { get; set; }
public long? FileSize { get; set; }
public string Source { get; set; }
public FileProtocol SourceFileProtocol { get; set; }
public string ErrorMessage { get; set; }
}
public enum FileProtocol
{
Unknown,
PIX,
CIX,
SS
}
}
As you can see in the provided example : https://blazorrepl.telerik.com/QcaiPbkL56qf6XQ747
I have the following situation. I'm using a custom editor template with two-way binding for the column : OrderToEdit.ShipCity. If I change the value of this column in a row and press Enter, Tab or mouse focus out very quickly (immediately after value change), UpdateHandler is triggered before the valueChanged event of the context and as a result changes are not shown. If there is a delay ( i.e 1 second ) all works fine. This is not happening when i'm using the builtin editor GridEditorType.TextBox. Could you provide me a solution ?
There is another problem. if a click inside a cell edit mode is triggered. But if i click in a button in the toolbar or in column menu the cell remains open is not closed. I think this should not happen.
Hi,
We ran into an issue with manual binding and selected items with Grid component. I used the 'WebApiFromServerApp' sample in 'grid\datasourcerequest-on-server' folder from Telerik's samples on GitHub.
To recreate the issue, modify 'GridWithService.razor' file in 'WebApiFromServerApp' project. I attached modified project.
To test the behavior:
Thank you.
The CheckBoxList filter does not work as expected when the Grid is bound to ExpandoObject
===
ADMIN EDIT: A possible workaround is to bind the Grid with OnRead event and populate the MemberType property of the filter descriptors manually:
@using System.Dynamic
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
<TelerikGrid OnRead="@OnGridRead"
TItem="@ExpandoObject"
Pageable="true"
Sortable="true"
FilterMode="@GridFilterMode.FilterMenu"
FilterMenuType="@FilterMenuType.CheckBoxList"
Height="400px">
<GridToolBarTemplate>
<GridSearchBox />
</GridToolBarTemplate>
<GridColumns>
@{
if (GridData != null && GridData.Any())
{
<GridColumn Field="PropertyInt" FieldType="@GridPropertyTypes["PropertyInt"]" />
<GridColumn Field="PropertyString" FieldType="@GridPropertyTypes["PropertyString"]" />
<GridColumn Field="PropertyGroup" FieldType="@GridPropertyTypes["PropertyString"]" />
<GridColumn Field="PropertyDate" FieldType="@GridPropertyTypes["PropertyDate"]" />
<GridColumn Field="PropertyBool" FieldType="@GridPropertyTypes["PropertyBool"]" />
}
}
</GridColumns>
</TelerikGrid>
@code {
private List<ExpandoObject> GridData { get; set; } = new List<ExpandoObject>();
private Dictionary<string, Type> GridPropertyTypes { get; set; } = new Dictionary<string, Type>() {
{ "Id", typeof(int) },
{ "PropertyInt", typeof(int) },
{ "PropertyString", typeof(string) },
{ "PropertyGroup", typeof(string) },
{ "PropertyDate", typeof(DateTime) },
{ "PropertyBool", typeof(bool) }
};
private async Task OnGridRead(GridReadEventArgs args)
{
args.Request.Filters.OfType<CompositeFilterDescriptor>()
.Each(x =>
{
x.FilterDescriptors.OfType<FilterDescriptor>()
.Each(y => y.MemberType = GridPropertyTypes[y.Member]);
});
var result = GridData.ToDataSourceResult(args.Request);
args.Data = result.Data;
args.Total = result.Total;
args.AggregateResults = result.AggregateResults;
}
protected override void OnInitialized()
{
for (int i = 1; i <= 18; i++)
{
dynamic expando = new ExpandoObject();
expando.Id = i;
expando.PropertyGroup = $"Group {(i % 3 + 1)}";
expando.PropertyInt = i;
expando.PropertyString = $"String {(char)(64 + i)}{(char)(64 + i)}";
expando.PropertyDate = DateTime.Now.AddMonths(-i);
expando.PropertyBool = i % 2 != 0;
GridData.Add(expando);
}
}
}
Hello,
I want to set AutoGenerateColumns="true", but exclude some of the class members (fields / columns), which I have declared manually in the GridColumns collection.
Navigable="true" + OnRead data binding allow the user to go beyond the last Grid page. The component shows no rows, and even though the user can return to previous pages, it's cumbersome.
The workaround is to manage the Page value manually in the PageChanged handler.
@using Telerik.DataSource.Extensions
@* workaround: *@
@*Page="@GridPage"
PageChanged="@OnGridPageChanged"*@
<TelerikGrid OnRead="@OnGridRead"
Navigable="true"
TItem="@Product"
Pageable="true">
<GridColumns>
<GridColumn Field="@nameof(Product.Name)" Title="Product Name" />
</GridColumns>
</TelerikGrid>
@code {
List<Product> GridData { get; set; }
int GridPage { get; set; } = 1;
int GridTotal { get; set; }
// workaround
void OnGridPageChanged(int newPage)
{
if (newPage > 0 && newPage <= Math.Ceiling((double)GridTotal / (double)10))
{
GridPage = newPage;
}
}
void OnGridRead(GridReadEventArgs args)
{
var result = GridData.ToDataSourceResult(args.Request);
args.Data = result.Data;
args.Total = result.Total;
// workaround
//GridTotal = result.Total;
}
protected override void OnInitialized()
{
GridData = new List<Product>();
var rnd = new Random();
for (int i = 1; i <= 12; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = "Product " + i.ToString()
});
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
}
}
When Grid is nested in a Window, pressing Escape key will bubble to the Window causing it to close during edit operation of the Grid.
Hello Team,
I am using "FilterMode="GridFilterMode.FilterRow". For int values there is a "numeric chooser" in the column header and the filter option "contains" is not available.
This is the correct behaviour. But when I bind the column to a ulong, ushort, ... value theses seems to be considered as string. There is no "numeric chooser" and the filter "contains" is available, which resullts in further problems with the OData endpoint.