I am using a ui framework that has some elements on the body with z-indexes > 1000. Eg a side menu. I am using the Telerik Grid. The Column Menus use the animation container, and because the animation containers get placed directly on the body with a z-index of 2, they always appear behind this side menu.
I want to be able to set a CSS to the main wrapping element of the Column Menu (<div class="k-animation-container>), so I can specifically set the z-index for only Column Menu instances of the animation container.
Based on some program logic and conditions I want to programmatic scroll to a chosen row so the user can see a specific row. For example:
- Scroll to a selected row
- Scroll to a record, based on its Id
-Scroll to the top of the Grid when the user adds a new item
- Scroll to an expanded item in hierarchical Grid
=====ADMIN EDIT======
We have a knowledge-based article that showcases how to scroll the Grid to the selected row. This article links to a sample GitHub application where you see code samples. If you need to scroll to another row, you can use a similar approach.
If the grid has Filterable=true, at the moment, all columns must have a Field defined. If a column does not have a Field, an exception similar to this one will be thrown:
Error: System.ArgumentNullException: Value cannot be null.
Parameter name: name
at System.Type.GetProperty(String name, BindingFlags bindingAttr)
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.get_PropInfo()
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.get_PropType()
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.get_PropTypeName()
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.ResetFilterText()
at Telerik.Blazor.Components.Grid.TelerikGridFilterHeaderBase`1.OnInit()
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
Instead, when no Field is provided, filtering, sorting and other operations that require a model field must be disabled internally without an exception.
For the time being, a workaround is to set Filterable=false to the desired column.
Here is an example where the workaround is highlighted
@using Telerik.Blazor.Components.Grid@using Telerik.Blazor.Components.Button<TelerikGrid data="@Histories" height="600px" Pageable="true" PageSize="20" Sortable="true" Filterable="true"> <TelerikGridColumns> <TelerikGridColumn Field="Casecode" /> <TelerikGridColumn Field="Historytext" /> <TelerikGridColumn Field="Createdate" Title="Create Date" /> <TelerikGridColumn Filterable="false"> <Template> @{ var CurrentRecord = context as CaseHistory; if (CurrentRecord.Blobid > 0) { <TelerikButton OnClick="@(() => MyCustomCommand(CurrentRecord))">Open</TelerikButton> } } </Template> </TelerikGridColumn> </TelerikGridColumns></TelerikGrid>@result@functions { public class CaseHistory { public int Id { get; set; } public int Casecode { get; set; } public string Historytext { get; set; } public DateTime Createdate { get; set; } public int Blobid { get; set; } } IEnumerable<CaseHistory> Histories = Enumerable.Range(1, 50).Select(x => new CaseHistory { Id = x, Casecode = x, Historytext = "text " + x, Createdate = DateTime.Now.AddDays(-x), Blobid = (x % 3 == 0) ? x : -x }); string result { get; set; } void MyCustomCommand(CaseHistory itm) { result = $"custom command fired for {itm.Id} on {DateTime.Now}"; StateHasChanged(); }}
I want to be able to control the page at which the user is in the grid. I will later use that to call my own API through the OnRead event. Binding the Page parameter does not seem to work, however.
Reproducible:
@using Telerik.Blazor.Components.Grid@using Telerik.Blazor.Components.NumericTextBox@using Telerik.DataSource.Extensions;<TelerikNumericTextBox @bind-Value="@startPage"></TelerikNumericTextBox><TelerikGrid Data=@GridData TotalCount=@Total Page="@startPage" Filterable=true Sortable=true Pageable=true EditMode="inline"> <TelerikGridEvents> <EventsManager OnRead=@ReadItems></EventsManager> </TelerikGridEvents> <TelerikGridColumns> <TelerikGridColumn Field=@nameof(Employee.ID) /> <TelerikGridColumn Field=@nameof(Employee.Name) Title="Name" /> <TelerikGridColumn Field=@nameof(Employee.HireDate) Title="Hire Date" /> <TelerikGridCommandColumn> <TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton> <TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton> <TelerikGridCommandButton Command="Delete" Icon="delete">Delete</TelerikGridCommandButton> <TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TelerikGridCommandButton> </TelerikGridCommandColumn> </TelerikGridColumns> <TelerikGridToolBar> <TelerikGridCommandButton Command="Add" Icon="add">Add Employee</TelerikGridCommandButton> </TelerikGridToolBar></TelerikGrid>There is a deliberate delay in the data source operations in this example to mimic real life delays and to showcase the async nature of the calls.@code { int startPage { get; set; } = 2; public List<Employee> SourceData { get; set; } public List<Employee> GridData { get; set; } public int Total { get; set; } = 0; protected override void OnInit() { SourceData = GenerateData(); } protected async Task ReadItems(GridReadEventArgs args) { Console.WriteLine("data requested: " + args.Request); //you need to update the total and data variables //the ToDataSourceResult() extension method can be used to perform the operations over the full data collection //in a real case, you can call data access layer and remote services here instead, to fetch only the necessary data //await Task.Delay(2000); //simulate network delay from a real async call var datasourceResult = SourceData.ToDataSourceResult(args.Request); GridData = (datasourceResult.Data as IEnumerable<Employee>).ToList(); Total = datasourceResult.Total; StateHasChanged(); } //This sample implements only reading of the data. To add the rest of the CRUD operations see private List<Employee> GenerateData() { var result = new List<Employee>(); var rand = new Random(); for (int i = 0; i < 100; i++) { result.Add(new Employee() { ID = i, Name = "Name " + i, HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20)) }); } return result; } public class Employee { public int ID { get; set; } public string Name { get; set; } public DateTime HireDate { get; set; } }}while the similar approach works without OnRead:
@using Telerik.Blazor.Components.Grid@using Telerik.Blazor.Components.NumericTextBox<TelerikNumericTextBox @bind-Value="@startPage" Min="1"></TelerikNumericTextBox><TelerikGrid Data="@MyData" Height="300px" Pageable="true" Sortable="true" Page="@startPage" FilterMode="Telerik.Blazor.FilterMode.FilterRow"> <TelerikGridColumns> <TelerikGridColumn Field="@(nameof(SampleData.Id))" /> <TelerikGridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" /> <TelerikGridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" /> </TelerikGridColumns></TelerikGrid>@code { int startPage { get; set; } = 2; public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData { Id = x, Name = "name " + x, HireDate = DateTime.Now.AddDays(-x) }); public class SampleData { public int Id { get; set; } public string Name { get; set; } public DateTime HireDate { get; set; } }}
If we enable grouping on a grid which has `FilterMode="Telerik.Blazor.FilterMode.FilterRow"` then we can no longer successfully get focus into any of the filter row edit controls.
Clicking on filter text input box (I think you need to do it a few times) causes a js error and does not put the text input focus into the filter text input.
JS exception is:
telerik-blazor.js:35 Uncaught TypeError: Cannot read property 'getAttribute' of null
at t.value (telerik-blazor.js:35)at Object.onDraggableDrag [as drag] (telerik-blazor.js:35)
at e.value (telerik-blazor.js:35)
at e.value (telerik-blazor.js:35)
at e.value (telerik-blazor.js:35)
at o.onDrag (telerik-blazor.js:35)
at h._dragHandler (telerik-blazor.js:35)
at HTMLDocument._pointermove (telerik-blazor.js:35)
Hi there,
Is it possible to have multi-column headers for the data grid, like we have in Kendo grid.
if so, what would be the ETA?
Thanks,
Deepa
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.
Hi,
I'm trying to set an empty column title
<Telerik.Blazor.Components.GridColumn Field="@item.FieldName"
Title=""
Resizable="true"
Width="@width">
I would expect it to show an empty header title but instead fieldName is displayed.
We have a Telerik grid which is customized by some CSS rules. The problem is that the header width does not fill the width of the table if no scrollbar is shown.
My question is: Why did you create the table like it is right now in HTML (See screenshot as well)? In my opinion, it would be easier to use something more simple like described here: https://www.w3schools.com/html/html_tables.asp
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
This would make it easier to customize the table / grid as well as having no issues with the widths at all. This rectangle on the right top edge doesn't look good...
I'm not sure if this is a feature request or just a discussion / idea for the developers :) I just wanted to bring this in and get an explanation why you chose to do it that way (And maybe get a fix for this as well).
Best regards,
Christian
Please add an attribute to Blazor GridColumn which allows to easily align text horizontal in a GridColumn
e.g. <GridColumn Field="@(nameof(Item.Price))" Title="Price" HorizontalAlignment="Right" />
At least: Left, Right, Center
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!
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
---
ADMIN EDIT: The issue stems from the data operations in the business logic, and it is not a bug in the component and it does not relate to WebAPI usage.
Hi there,
as a follow-up of https://feedback.telerik.com/blazor/1461176-set-specific-position-in-virtual-scrolling-mode we have implemented the suggested skip handling. But there seems an issue when the data is fetched asynchronously, specifically from an Web API.
After hours of debugging and analyzing i have narrowed it down to the following simple Blazor app showcasing the bug:
https://github.com/ViRuSTriNiTy/blazor-app-telerik-grid-skip-bug
Please clone the repo, start the application and follow the steps displayed above the grid to reproduce the bug.
The second skip followed immediatelly after the first one originates from the Telerik assembly hence i cannot investigate it further (no source code).
What are your thoughts? Is it a bug?
So lonG
Daniel