1. Use the code from the incell editing docs (https://docs.telerik.com/blazor-ui/components/grid/editing/incell)and monitor the server console
2. Edit a name (row 3 and onward)
3. Press Enter
I expect OnEdit to fire, but only OnUpdate fires
I would like the grid and treelist to honor the DisplayFormatAttribute.NullDisplayText Property so I don't have to use cell templates to change what null values render.
I would like to export custom data to excel, for example - the selected items.
<AdminEdit>
As an attached file, you can see a sample implementation that shows how you can export the Selected Items from the Grid to excel.
</AdminEdit>
---
ADMIN EDIT
This is not a bug, but intended behavior. As web grid is not Excel. You can find more details in the original thread opened by Aditya with this question: https://www.telerik.com/forums/grid-checkboxlist-filter---auto-select-all-upon-entering-filter-criteria
---
This is related to Grid CheckBoxList Filter - https://demos.telerik.com/blazor-ui/grid/filter-checkboxlist
In Microsoft Excel, when we start typing in the Search box, the matching entries along with "Select All" are already checked. So upon typing the required criteria, the user just needs to select Ok button to view the filtered results.
In the case of Blazor Grid, the matching entries and Select All option are not checked automatically. So the user would need to do an additional action of checking "Select All". Please refer to the attached screenshots.
Is there a way to have "Select All" auto checked upon typing the filter criteria?
This isn't a bug per say, but with the latest Telerik Blazor update, the GridCommandEventArgs Field and Value properties are now deprecated. When updating a specific cell in a grid using InCell edit mode, how am I able to know which specific field and value are updated when the OnUpdate event gets called? Before the latest update, I had the following code:
protected override void OnGridRowUpdate(GridCommandEventArgs args)
{
validationMessage = ValidateField(args.Field, args.Value);
}
I realize I have the updated values using args.Item, but I don't want to have to validate the entire row every time I update a cell. Is there still a way to know what cell I updated, or is that information no more?
Thank you,
Steve
When you resize grid columns the column width does not follow the mouse. This occurs in your demo:
https://demos.telerik.com/blazor-ui/grid/column-resizing
Make a column wider or narrower and the column width does not stay in line with where the mouse is.
asynct Task ContextMenuClick(ContextMenuItem) {
var state = Grid.GetState(); state.FilterDescriptors.Add(new FilterDescriptor { Member = "Created", Operator = FilterOperator.IsEqualTo, Value = "Administrator" }); await Grid.SetState(state);
}
How it should look like:
I need to know which cell the user right clicked on so I can adjust my context menu. I need the cell value, the row model and the field of the column.
---
ADMIN EDIT
The following KB article shows a solution you can use immediately: https://docs.telerik.com/blazor-ui/knowledge-base/grid-which-cell-context-menu.
---
My grid starts with Groupable=false and at some point I may need to make it groupable. The group panel appears, but I cannot drag the column headers to it to actually group.
---
ADMIN EDIT
A workaround is to hide the grid so it can re-initialize with the new groupable setting:
Is Groupable: @IsGroupable
<TelerikButton OnClick="@ToggleGroupable">Toggle Groupable</TelerikButton>
@if (isGridVisible)
{
<TelerikGrid Data=@GridData @ref="@GridRef" Groupable="@IsGroupable" Pageable="true" Height="400px">
<GridColumns>
<GridColumn Field=@nameof(Employee.Name) Groupable="false" />
<GridColumn Field=@nameof(Employee.Team) Title="Team" />
<GridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
</GridColumns>
</TelerikGrid>
}
@code {
bool IsGroupable { get; set; }
bool isGridVisible { get; set; } = true;
TelerikGrid<Employee> GridRef { get; set; }
async Task ToggleGroupable()
{
//save state (sorting, paging,...) - it will be lost when we hide the grid
var state = GridRef.GetState();
//hide the grid so it can later re-initialize with the new groupable setting
isGridVisible = false;
await InvokeAsync(StateHasChanged);
await Task.Delay(20);
IsGroupable = !IsGroupable;
isGridVisible = true;
//afte the grid re-initialized and rendered with the new setting, restore its state
await InvokeAsync(StateHasChanged);
await Task.Delay(20);
await GridRef.SetState(state);
}
public List<Employee> GridData { get; set; }
protected override void OnInitialized()
{
GridData = new List<Employee>();
var rand = new Random();
for (int i = 0; i < 15; i++)
{
GridData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 3,
IsOnLeave = i % 2 == 0
});
}
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public bool IsOnLeave { get; set; }
}
}
---
Hi,
Please simplify customizing Grid Popup, it should be available under Grid with build-in context and binding
I am already using your do-it-yourself example but IMHO it is too much code
Regards
Andrzej
I have a column in the grid that is bound to a enum. The enum value names show up fine in the grid, but when exported, I get the underlying int value, which is incomprehensible to the users.
Thanks
---
ADMIN EDIT:
As a workaround you could generate the .xlsx file yourself. I'm attaching a sample project that allows you to do that. The relevant line of code is line 125 in Index.razor
---
Data load in background thread with selected row on UI crashing application when there is selection
1. Select a row
2. Click the button
3. check the server console and/or try to do something else
@using System.Collections.ObjectModel
<TelerikGrid @ref="@Grid"
Data="@GridData"
SelectionMode="@GridSelectionMode.Single"
OnRowClick="@OnRowClickHandler"
@bind-SelectedItems="@SelectedData"
EditMode="@GridEditMode.Incell"
Resizable="true"
Width="100%"
Height="200px"
Reorderable="true"
Groupable="false"
ShowColumnMenu="false"
FilterMode="@GridFilterMode.None"
Sortable="true">
<GridColumns>
<GridColumn Field=@nameof(ViewModel.Name) Editable="false">
</GridColumn>
</GridColumns>
</TelerikGrid>
<TelerikButton OnClick="RefreshButtonClick">Refresh</TelerikButton>
@code {
private const int RowHeight = 40;
private const string Height = "700px";
private const int PageSize = 20;
private ObservableCollection<ViewModel> GridData { get; set; } = new ObservableCollection<ViewModel>();
private IEnumerable<ViewModel> SelectedData { get; set; } = Enumerable.Empty<ViewModel>();
private TelerikGrid<ViewModel> Grid { get; set; }
protected override async Task OnInitializedAsync()
{
await LoadData();
await base.OnInitializedAsync();
}
async Task LoadData()
{
var data = Enumerable.Range(1, 5).Select(x => new ViewModel { Name = $"name {x}" });
GridData = new ObservableCollection<ViewModel>(data);
}
private async Task RefreshButtonClick()
{
Console.WriteLine("reload data");
// spawn a new thread, a Timer will do as well
await Task.Run(() =>
{
IEnumerable<ViewModel> data = new List<ViewModel> { new ViewModel { Name = "1" }, new ViewModel { Name = "2" }, new ViewModel { Name = "3" } };
this.GridData.Clear();
this.GridData.AddRange(data);
});
}
private void OnRowClickHandler(GridRowClickEventArgs args)
{
Console.WriteLine("click to select");
ViewModel viewModel = (ViewModel)args.Item;
//this is here because of theincell editing, not relevant to the issue
SelectedData = new List<ViewModel>() { viewModel };
}
public class ViewModel
{
public ViewModel()
{
}
private string name;
public string Name
{
get
{
return name;
}
set
{
name = value;
}
}
}
}
When the sum of the widths of the Grid columns is higher than the total width of the Grid and a horizontal scrollbar appears the Virtual Scrolling twitches when the user scrolls to the bottom of the Grid. The same behavior can be observed if the Grid has Resizeable columns and by resizing them horizontal scrollbar appears.
<AdminEdit>
The issue is reproducible on mobile Safari without horizontal scrolling.
</AdminEdit>
Error:
blazor.server.js:19 [2021-02-03T06:17:43.996Z] Error: System.NullReferenceException: Object reference not set to an instance of an object.
Example:
private string SerializedState; private void OnStateInitHandler(GridStateEventArgs<SampleData> args) { args.GridState = JsonSerializer.Deserialize<GridState<SampleData>>(SerializedState); }
Reason:
FilterDescriptors property MemberType = null.
Note:
Method TelerikGrid.SetState() works correctly.