When you change the data source of the grid, it must re-render the data again.
For example, when you use a custom edit form, you add/edit the data with your own code and not through the grid. This is useful, for example, when you only want to show a few columns in the grid, but the model has many more editable fields. Or, when you want a customized layout/behavior of the edit form.
Minimum repro:
@
using
Telerik.Blazor.Components.Grid
@
using
Telerik.Blazor.Components.Button
<TelerikButton OnClick=
"@ChangeProduct"
>Works: Change an existing product</TelerikButton>
<TelerikButton OnClick=
"@AddProduct"
>Does not work: Add a
new
product</TelerikButton>
<TelerikButton OnClick=
"@RemoveProduct"
>Does not work: Remove an existing product</TelerikButton>
<TelerikGrid Data=@GridData
Pageable=
"true"
>
<TelerikGridColumns>
<TelerikGridColumn Field=@nameof(Product.ProductName) Title=
"Product Name"
/>
<TelerikGridColumn Field=@nameof(Product.UnitPrice) Title=
"Unit Price"
>
</TelerikGridColumn>
</TelerikGridColumns>
</TelerikGrid>
@functions {
public
List<Product> GridData {
get
;
set
; }
void
AddProduct()
{
GridData.Insert(0,
new
Product()
{
ProductId = DateTime.Now.Millisecond,
ProductName =
"some product name"
,
UnitPrice = DateTime.Now.Second
});
//after updating the data, the grid should show the item at the top of the first page.
//at the moment, you need to page, for example, for the data to be updated
}
protected
void
ChangeProduct()
{
GridData.Where(p => p.ProductId == 2).First().ProductName =
"changed at "
+ DateTime.Now;
}
protected
void
RemoveProduct()
{
GridData.RemoveAt(4);
//after updating the data, the grid should remove the fourth item immediately
//at the moment, you need to page, for example, for the data to be updated
}
protected
override
void
OnInit()
{
GridData =
new
List<Product>();
for
(
int
i = 0; i < 25; i++)
{
GridData.Add(
new
Product()
{
ProductId = i,
ProductName =
"Product"
+ i.ToString(),
UnitPrice = (
decimal
)(i * 3.14),
});
}
}
public
class
Product
{
public
string
ProductName {
get
;
set
; }
public
decimal
UnitPrice {
get
;
set
; }
public
int
ProductId {
get
;
set
; }
}
}
I have a Grid using checkbox selection and when I un-check a row, the SelectedItemsChanged event is not firing. I'm using an async handler.
The problem appears to happen when a row is selected and then un-selected. The event is firing when it is selected but is not firing when it is un-selected.
<TelerikGrid Data="strategicLevelItems" SelectedItems="selectedStrategic" Width="100%" Height="500px"
ScrollMode="GridScrollMode.Scrollable" SelectionMode="GridSelectionMode.Multiple"
SelectedItemsChanged="@((IEnumerable<GetNavigationNodesModel> strategicItems) => OnStrategicSelectAsync(strategicItems))"
FilterMode="GridFilterMode.FilterRow">
<GridColumns>
<GridCheckboxColumn SelectAll="true" Width="40px" OnCellRender="@GridHelpers.CenterAlign" />
<GridColumn Field="@(nameof(GetNavigationNodesModel.Name))" />
</GridColumns>
</TelerikGrid>
private async Task OnStrategicSelectAsync(IEnumerable<GetNavigationNodesModel> selectedItems)
{
selectedStrategic = selectedItems;
var state = tacticalGrid.GetState();
var compositeFilter = new CompositeFilterDescriptor() { LogicalOperator = FilterCompositionLogicalOperator.Or };
foreach (var item in selectedItems)
{
compositeFilter.FilterDescriptors.Add(new FilterDescriptor()
{
Member = "ParentId",
Operator = FilterOperator.IsEqualTo,
Value = item.Id
});
}
state.FilterDescriptors.Clear();
state.FilterDescriptors.Add(compositeFilter);
await tacticalGrid.SetState(state);
}
I want to edit the Excel file the grid exports before it gets to the user. For example, to add a sheet with data I want to generate, or to change columns, formats, colors.
----
ADMIN EDIT
I have attached to this post an example that shows how you can generate your own exported file so you can customize colors, sheets and so on. It also shows how to cache the DataSourceRequest of the grid so you can extract only the current page or all data, and so you can also apply the current grid sorts/filters and so on to the export. This also lets you add metadata to the sheet such as the current user settings such as filters that resulted in this filter.
----
Greetings!
I've been waiting for a few months now to swap to blazor, but one of the things that's currently holding us back is that the filter row can't be used together with the column menu.
I've always found this to be strange, since it's supported in the Angular and MVC versions, which we currently use.
Our users never filter via the column menu, always via the filter row. They hide/lock their columns via the column menu and sometimes sort.
This functionality is thus critical for us.
I can't find any feature request for it, nor any planned roadmap item.
Will this ever be supported because if not, we're gonna have to start looking for alternatives.
Kind regards.
At the moment, the focus remains on the cell. It should be in the input so the user does not have to perform an extra action (say, click with the mouse) in order to edit data.
This also applies to inserting a new row - the first cell should be focused.
Using mobile browser (Safari iOS or Chrome Android)
Go to demo grid page
https://demos.telerik.com/blazor-ui/grid/overview
Click any grid's filter menu which contains text field
Try to enter text into textbox.
The filter menu automatically closed, so you can't enter anything
---
ADMIN EDIT
this happens because the keyboard pops up, changes the screen size and may even scroll the page, and both of these events hide the popup menu.
A workaround could be using the filter row mode, with the caveat that it takes up more space on the initial rendering, and that filtering happens immediately.
---
Hi Telerik team,
When I want to bind the Blazor Grid to an ExpandoObject I need to assign the FieldType. I know I have to use non-nullable types.
But I want to use nullable types (for example int?) to have a blank cell within the Grid when there is no value for it. With "typeof(int)" instead of "typeof(int?)" every empty cell shows "0" which I don't want.
Is there any chance to let FieldType accept nullable types?
Best regards,
Rayko
Hi.
Is it possiblle add a contextual menu on a grid row and choose actions for that row?
Thanks.
The idea of the feature is to be able to customize the list of FilterOperators displayed in the list of the FilterRow and FilterMenu.
FilterRow UI element
FilterMenu UI element