I want to fetch grid records page per page according to the appropriate filter settings. While this is possible through the OnRead event, I want to be able to send the request to the server so that it is easier to fetch the data, like in the UI for ASP.NET Core grid. Currently you can do this only for a server-side project because you can pass the request object by reference, but for a WASM project it needs to serialize in an HTTP request.
---
ADMIN EDIT
You can find examples of doing this here: https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server
---
I have a blazor grid with a large number of columns which I would like to have the width of the page and a horizontal scrollbar to be able to scroll through all of the columns.
According the the documentation I have found (https://demos.telerik.com/blazor-ui/grid/scrolling), setting the width of the grid to 100% and providing widths for the columns which exceed that of the width of the grid/page should cause the horizontal scrollbar to appear. Instead of doing this, however, the grid just expands horizontally to fit all of the columns, no matter what I try. In addition, it appears to be expanding the entire page horizontally to fit itself, as it is increasing the size of all of my bootstrap columns so that it fits within the bootstrap container.
Here is an example of a page containing a grid where I am experiencing this:
@page "/admin/users/manageusers"
@inherits ManageUsersBase
<h3>Manage Users</h3>
<WS7.Components.PDAuthorizeBase AllowedRoleIds="ManageAllUsers,ManageAssignedUsers" />
@if (this.Users == null)
{
<p><em>Loading...</em></p>
}
else
{
<div class="form-group">
<label for="UserSearch" class="col-form-label">Search</label>
<input id="UserSearch" class="form-control" type="search" aria-label="User Search" placeholder="Search" @bind-value="Filter" @bind-value:event="oninput" />
</div>
<TelerikGrid Data="@FilteredUsers" TItem="WS7.Engine.Models.ViewModels.ManageUsersViewModel" Height="600px" Width="100%" Pageable="true" PageSize="40" Sortable="true" Groupable="false"
FilterMode="GridFilterMode.FilterMenu" Resizable="true" Reorderable="true" OnEdit="EditUser" ScrollMode="@GridScrollMode.Scrollable">
<GridToolBar>
<GridCommandButton OnClick="(()=>AddUser())">
<span class="oi oi-plus"></span> Add
</GridCommandButton>
</GridToolBar>
<GridColumns>
<GridCommandColumn Width="100px">
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
</GridCommandColumn>
<GridColumn Field="UserName" Title="User Name" Width="500px" />
<GridColumn Field="Email" Title="Email" Width="500px" />
<GridColumn Field="FirstName" Title="First Name" Width="500px" />
<GridColumn Field="LastName" Title="Last Name" Width="500px" />
<GridColumn Field="AccountStatus" Title="Account Status" Width="500px">
<Template>
@{
string toolTip;
WS7.Engine.Models.ViewModels.ManageUsersViewModel user = context as WS7.Engine.Models.ViewModels.ManageUsersViewModel;
toolTip = "Account Status: " + user.AccountStatus;
toolTip += Environment.NewLine + "Active: " + user.Active.ToString();
toolTip += Environment.NewLine + "Email Confirmed: " + user.EmailConfirmed.ToString();
}
<div class="badge badge-pill badge-info">
<span class="oi oi-info" data-toggle="tooltip" data-placement="top" title="@toolTip"></span>
</div>
</Template>
</GridColumn>
@*<GridCommandColumn Width="90px">
<GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
</GridCommandColumn>*@
</GridColumns>
</TelerikGrid>
}
---
ADMIN EDIT
You can find some more details on the origin of the issue in the thread below and in the following Knowledge Base article, which also offers a few ideas for solutions to this browser behavior: https://docs.telerik.com/blazor-ui/knowledge-base/grid-bootstrap-flex-width-issue
---
With a pageable grid after scrolling down the first page and then paging, the next page should be scrolled to the top - but it is not.
Is there a way to scroll up by code until this is fixed ???
----
ADMIN EDIT
A sample solution is attached to the end of this post that shows how you can achieve this.
----
Hello,
Do you have any sample for custom group Header template.
e..g. To calculate the value of the column based on the other fields.
---
ADMIN EDIT
---
Once aggregates for all fields are exposed, we will need to provide an option to align them with the corresponding columns. This can be achieved through a GroupHeaderColumnTemplate which is targeted in a separate request.
Hi - this one is a feature request, not a bug. :)
For the filter menu, when you enter a filter value, it would be nice if you could press enter to execute the filter instead of having to click "Filter."
Hiding a grid column causes data columns to be misaligned with headers.
The issue can be reproduced by clicking the "Show/Hide Summary Column" button in the following demo:
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)
The GridCheckboxColumn for the Blazor Grid is simply confusing.
I think 99 % of the users assume the GridCheckboxColumn is intended to be used for boolean field types.
Functionality is very nice but naming could be e.g. "GridSelectionColumn" to clarify what's it's purpose.
A Blazor Grid column having a boolean data type field should display as checkbox instead of the text True/False.
A checkbox is a fine representation for the end user, True/False may be ok for a developer ;-)
Editing the boolean value by a checkbox is already fine.
1. Load a page with a Grid with Reorderable = true
2. While Grid is rendering load a different page
--> Unhandled ObjectDisposedException
Error: System.ObjectDisposedException: Cannot access a disposed object. Object name: 'DotNetObjectReference`1'. at Microsoft.JSInterop.DotNetObjectReference`1.ThrowIfDisposed() at Microsoft.JSInterop.JSRuntime.TrackObjectReference[TValue](DotNetObjectReference`1 dotNetObjectReference) at Microsoft.JSInterop.Infrastructure.DotNetObjectReferenceJsonConverter`1.Write(Utf8JsonWriter writer, DotNetObjectReference`1 value, JsonSerializerOptions options) at System.Text.Json.JsonSerializer.WriteDictionary[TProperty](JsonConverter`1 converter, JsonSerializerOptions options, WriteStackFrame& current, Utf8JsonWriter writer) at System.Text.Json.JsonPropertyInfoNotNullable`4.OnWriteDictionary(WriteStackFrame& current, Utf8JsonWriter writer) at System.Text.Json.JsonPropertyInfo.WriteDictionary(WriteStack& state, Utf8JsonWriter writer) at System.Text.Json.JsonSerializer.HandleDictionary(JsonClassInfo elementClassInfo, JsonSerializerOptions options, Utf8JsonWriter writer, WriteStack& state) at System.Text.Json.JsonSerializer.Write(Utf8JsonWriter writer, Int32 originalWriterDepth, Int32 flushThreshold, JsonSerializerOptions options, WriteStack& state) at System.Text.Json.JsonSerializer.WriteCore(Utf8JsonWriter writer, Object value, Type type, JsonSerializerOptions options) at System.Text.Json.JsonSerializer.WriteCore(PooledByteBufferWriter output, Object value, Type type, JsonSerializerOptions options) at System.Text.Json.JsonSerializer.WriteCoreString(Object value, Type type, JsonSerializerOptions options) at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](String identifier, CancellationToken cancellationToken, Object[] args) at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args) at Telerik.Blazor.Components.Grid.GridHeaderRowBase`1.InitColumnReorderable() at Telerik.Blazor.Components.Grid.GridHeaderRowBase`1.OnAfterRenderAsync(Boolean firstRender) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
You might have to try a few times to dispose the page at the correct time. With larger Grids it happens more frequently.
Grids without Reorderable = true do not throw an exception!
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!
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.
<TelerikGrid Data="@GridData"
FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
SelectionMode="@GridSelectionMode.Multiple"
@bind-SelectedItems="SelectedItems">
<GridColumns>
<GridCheckboxColumn Width="35px"/>
<GridColumn Field="@(nameof(Data.Name))" />
</GridColumns>
</TelerikGrid>
@code{
public class Data
{
public string Name { get; set; }
}
public List<Data> GridData { get; set; }
public IEnumerable<Data> SelectedItems { get; set; }
protected override void OnInitialized()
{
GridData = new List<Data>();
SelectedItems = new List<Data>();
GridData.Add(new Data{Name="abc"});
GridData.Add(new Data{Name="abe"});
GridData.Add(new Data{Name="xyz"});
}
}1. Filter the above grid by "abc" (the filtered grid will display "abc" correctly as the only entry)
2. Click into the "SelectAll" Checkbox (SelectedItems will wrongly contain "abc" AND "abe" !!!)
3. Click on "ClearFilter" Button --> the grid will display both "abc" and "abe" as selected !!!
It might be an indexing problem because the "SelectAll" Logic always seems to ignore the last character of the search string while the filtering of the display takes all characters into account.
This bug has cost be many hours and stomach pain! Please let me know, if this will be fixed soon. If not I will have to implement my own filtering (which makes me wonder why I'm using Telerik UI).
I am editing parent and child records in the hierarchy grid. I can edit parent and child records without issue. The only problem I have now is this; when I click edit on a child record, then collapse the parent, the edit of the child record is lost or cancelled but there is no event I can see to use to put things back in non-edit mode.
I enable buttons and links in non-edit (view) mode and disable them when editing a record.
So, is there an event or some way to know the user is collapsing or expanding a parent record?
Thank you,
How do I get the filter menu to allow input of Date *and* Time for a DateTime column?