when setting a default filter in code the grid does not show any type of indicator that a filter is applied to a column
desiredState = newGridState<Employee>()
{
FilterDescriptors = newList<FilterDescriptorBase>()
{
newCompositeFilterDescriptor()
{
FilterDescriptors = newFilterDescriptorCollection()
{
newFilterDescriptor() { Member = "Active", Operator = FilterOperator.IsEqualTo, Value = true, MemberType = typeof(bool) }
}
}
}
};
Video here
https://drive.google.com/file/d/12em-oc6xRJ_JjbFSANK9IqKDkK0f7p6y/view
Select an item in the grid and press and hold down arrow...
System.NullReferenceException: Object reference not set to an instance of an object. at Telerik.Blazor.Components.TelerikGridBase`1.FocusPagerAsync() at Telerik.Blazor.Components.TelerikGridBase`1.FocusCellAsync(GridNavigationCommandEventArgs args) at Telerik.Blazor.Components.TelerikGridBase`1.FocusAdjacentCellAsync(GridNavigationCommandEventArgs args, Int32 rowIndexOffset, Int32 columnIndexOffset) at Telerik.Blazor.Components.TelerikGridBase`1.FocusBottomCellAsync(GridNavigationCommandEventArgs args) at Telerik.Blazor.Components.TelerikGridBase`1.ExecuteNavigationCommandAsync(GridNavigationCommandEventArgs args) at Telerik.Blazor.Components.TelerikGridBase`1.ExecuteCommand(Object args) at Telerik.Blazor.Components.Grid.GridRowBase`1.OnExecuteCommand(GridCommandEventArgs commandArgs) at Telerik.Blazor.Components.Grid.GridDataCellBase`1.ExecuteCommandAsync(GridCommandEventArgs args) at Telerik.Blazor.Components.Grid.GridNavigableCellBase`1.ExecuteNavigationCommandAsync(String commandName, Int32 rowIndexOffset, Int32 columnIndexOffset, KeyboardEventArgs args) at Telerik.Blazor.Components.Grid.GridNavigableCellBase`1.ProcessKeyDown(KeyboardEventArgs args) at Telerik.Blazor.Components.Grid.GridContentCell`1.ProcessKeyDown(KeyboardEventArgs args) at Telerik.Blazor.Components.Grid.GridNavigableCellBase`1.OnKeyDown(KeyboardEventArgs args) at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
Hi.
Is it possiblle add a contextual menu on a grid row and choose actions for that row?
Thanks.
- Go to https://demos.telerik.com/blazor-ui/grid/persist-state
- Click the Reset State button
- Try to reoder columns (e.g., drag the ID column to the end)
If I'm filtering a column containing enum values I expect a dropdown of available values to choose from (as it is the case when filtering a grid using telerik UI for .net core).
Unfortunately with Blazor Grids the filter for Enums displays a numberbox. This is not usable since the user does not know the IDs for the enum values.
Please let me know how I can get the filter to let the user choose from the available enum values!
Hi,
how to select ALL items in the grid data source using GridCheckboxColumn in the grid header when grid is in Virtual scroll mode?
When I click on the GridCheckboxColumn in the grid header it selects only the items in the current visible page but I would like to select all items in the grid data source.
Selecting all items in the grid (not only visible ones) is a must have feature and current behavoiur is kind of misleading because the user would expect that all items are selected.
ADMIN EDIT: This has been available since 2.10.0 through the SelectAllMode parameter of the selection column.
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?
I am using the Telerik UI for Blazor 2.13. The export excel does not work with it. I am using the exact code snippet from docs as below on my test page:
@* You can sort, group, filter, page the grid, resize and reodrder its columns, and you can click the
Export button to save the current data *@
@page "/test"
@using Telerik.Blazor.Components
<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
Groupable="true">
<GridToolBar>
<GridCommandButton Command="ExcelExport">Export to Excel</GridCommandButton>
<label><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
</GridToolBar>
<GridExport>
<GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
</GridExport>
<GridColumns>
<GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
<GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="300px" />
<GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
<GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="200px" />
<GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="100px" />
<GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" Width="300px" />
</GridColumns>
</TelerikGrid>
@code {
List<SampleData> GridData { get; set; }
bool ExportAllPages { get; set; }
protected override void OnInitialized()
{
GridData = Enumerable.Range(1, 100).Select(x => new SampleData
{
ProductId = x,
ProductName = $"Product {x}",
UnitsInStock = x * 2,
Price = 3.14159m * x,
Discontinued = x % 4 == 0,
FirstReleaseDate = DateTime.Now.AddDays(-x)
}).ToList();
}
public class SampleData
{
public int ProductId { get; set; }
public string ProductName { get; set; }
public int UnitsInStock { get; set; }
public decimal Price { get; set; }
public bool Discontinued { get; set; }
public DateTime FirstReleaseDate { get; set; }
}
}Whenever I click on the export button. It simply does not respond. I do see lot of http requests though :
Please let me know if you need anymore details.
---
ADMIN EDIT: Check the source code and comments in it from the following demo to see how to bind the grid to a DataTable: https://demos.telerik.com/blazor-ui/grid/data-table. You can also examine it offline - the entire demos project is available in the "demos" folder of your installation
The sample code snippet below will let the grid show data, but will not enable complex operations like filtering and sorting. Review the demo linked above for more details on the correct approach.
---
I would like to be able to supply a DataTable with an arbitrary amount of columns to the grid and display them all without declaring them all. This should also allow paging, sorting, filtering. At the moment binding to a DataTable is not supported, only IEnumerable collections are.
At the moment, here's the closest I can get, sorting and filtering throw errors so they are disabled.
@using System.Data@using Telerik.Blazor@using Telerik.Blazor.Components.Grid<button class="btn btn-primary" @onclick="@LoadData">Load Data</button>@if (@d != null){ <TelerikGrid Data=@d.AsEnumerable() TItem="DataRow" Sortable="false" Filterable="false" Pageable="true" PageSize="3" Height="400px"> <TelerikGridColumns> @foreach (DataColumn col in d.Columns) { <TelerikGridColumn Field="@col.ColumnName" Title="@col.ColumnName"> <Template> @((context as DataRow).ItemArray[col.Ordinal].ToString()) </Template> </TelerikGridColumn> } </TelerikGridColumns> </TelerikGrid>}@functions { DataTable d = null; void LoadData() { d = GetData(); } public DataTable GetData() { DataTable table = new DataTable(); table.Columns.Add("Product", typeof(string)); table.Columns.Add("Price", typeof(double)); table.Columns.Add("Quantity", typeof(int)); table.Columns.Add("AvailableFrom", typeof(DateTime)); table.Rows.Add("Product 1", 10.1, 2, DateTime.Now); table.Rows.Add("Product 2", 1.50, 10, DateTime.Now); table.Rows.Add("Product 3", 120.66, 5, DateTime.Now); table.Rows.Add("Product 4", 30.05, 10, DateTime.Now); return table; }}
Because the shape of our business objects is not something your grid is easily bound to, we are attempting to generate ExpandoOjbects on the fly and bind to them. In the picture below you can see that Id is not binding correctly. Name is showing up because a column Template was used and that seems to work fine. However, when attempting to use an EditorTemplate we get the RuntimeBinderException shown below.
@page "/dynamic-vendor"
@using System.Dynamic
@using Telerik.Blazor.Components.Grid
<div style="width: 800px; overflow-x: auto; overflow-y:hidden; border: 1px solid red; height:400px">
<TelerikGrid Data="@expandoVendors" EditMode="inline" Pageable=true PageSize=10 SelectionMode="Telerik.Blazor.GridSelectionMode.Multiple">
<TelerikGridColumns>
<TelerikGridCommandColumn width="100">
<TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
<TelerikGridCommandButton Command="Update" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
<TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TelerikGridCommandButton>
</TelerikGridCommandColumn>
<TelerikGridColumn Field="Id"></TelerikGridColumn>
<TelerikGridColumn Field="Name" Title="Name" Editable="true">
<Template>
@{
dynamic v = context as ExpandoObject;
<span style="white-space:nowrap">@(v.Name)</span>
}
</Template>
<EditorTemplate>
@{
dynamic v = context as ExpandoObject;
<input type="text" bind="@(v.Name)" />
}
</EditorTemplate>
</TelerikGridColumn>
</TelerikGridColumns>
</TelerikGrid>
</div>
@functions {
List<ExpandoObject> expandoVendors { get; set; }
protected override async Task OnInitializedAsync()
{
expandoVendors = new List<ExpandoObject>();
var v1 = new ExpandoObject();
v1.TryAdd("Id", "1");
v1.TryAdd("Name", "Google");
expandoVendors.Add(v1);
var v2 = new ExpandoObject();
v2.TryAdd("Id", "2");
v2.TryAdd("Name", "Amazon");
expandoVendors.Add(v2);
}
}
In addition to more filtering options we would like to have the ability to use custom filter components instead of the built-in ones. For example, through a cell template for the filter row.
Please comment below with how you would like to see this integrate into the data source operations of the grid (for example, should it fire an event where you filter the data you pass to the grid, or should the grid expose some method/interface that you need to use).
Group by the third column - there will be no aggregate info:
<TelerikGrid Data="@myData" Pageable="true" Sortable="true" FilterMode="@GridFilterMode.FilterRow" Groupable="true">
<GridColumns>
<GridColumn Field="@nameof(SampleComplexObject.ID)" Title="ID"></GridColumn>
<GridColumn Field="@nameof(SampleComplexObject.Name)" Title="The Name"></GridColumn>
<GridColumn Title="First Nested Property" Field="SomeNavigationProperty.Field1">
<GroupFooterTemplate>
Count: @context.Count
</GroupFooterTemplate>
</GridColumn>
<GridColumn Field="SomeNavigationProperty.OtherField" />
</GridColumns>
<GridAggregates>
<GridAggregate Field="SomeNavigationProperty.Field1" Aggregate="@GridAggregateType.Count" />
</GridAggregates>
</TelerikGrid>
@code {
public class SampleComplexObject
{
public int ID { get; set; }
public string Name { get; set; }
public NestedObject SomeNavigationProperty { get; set; } // use this field name for data binding
}
public class NestedObject
{
public string Field1 { get; set; }
public string OtherField { get; set; }
}
public IEnumerable<SampleComplexObject> myData = Enumerable.Range(1, 50).Select(x =>
new SampleComplexObject
{
ID = x,
Name = "Name " + x,
SomeNavigationProperty = new NestedObject
{
Field1 = "first " + x % 4,
OtherField = "second " + x % 6
}
}
);
}