Reproducible:
@using System.Collections.ObjectModel;
<div style="align-self:center;text-align:center" class="alert-danger">
@errorMessages
</div>
<div style="align-self:center;text-align:center" class="alert-success">
@successMessages
</div>
<TelerikGrid Data=@entitlementsExtended
Pageable="true"
Groupable="false"
PageSize="@PageSize"
OnUpdate="@UpdateHandler"
Sortable="false"
FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu">
<GridColumns>
<GridColumn Field="@nameof(EntitlementValueDTOExtended.Description)" Editable="false" />
<GridColumn Field=@nameof(EntitlementValueDTOExtended.Value)>
<EditorTemplate>
@{
CurrentlyEditedEntitlement = context as EntitlementValueDTOExtended;
<div>
<TelerikDropDownList Data="@entitlementOptions" @bind-Value="CurrentlyEditedEntitlement.Value" Width="60px" PopupHeight="auto"></TelerikDropDownList>
</div>
}
</EditorTemplate>
</GridColumn>
<GridCommandColumn Width="300px">
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
int PageSize = 10;
public EntitlementValueDTOExtended CurrentlyEditedEntitlement { get; set; } = new EntitlementValueDTOExtended();
//changing this to List<> works
public ObservableCollection<EntitlementValueDTOExtended> entitlementsExtended { get; set; } = new ObservableCollection<EntitlementValueDTOExtended>();
public static List<string> entitlementOptions = new List<string> { "I", "E" };
public string errorMessages { get; set; } = "";
public string successMessages { get; set; } = "";
protected async override Task OnInitializedAsync()
{
IEnumerable<int> entitlements = Enumerable.Range(1, 50);
//this is a simplified workaround for people needing nested models
foreach (var entitlement in entitlements)
{
EntitlementValueDTOExtended entitlementExtended = new EntitlementValueDTOExtended();
entitlementExtended.Id = Guid.NewGuid();
entitlementExtended.Description = $"descr {entitlement}";
entitlementExtended.Value = $"value {entitlement}";
entitlementExtended.EntitlementTypeId = entitlement;
entitlementsExtended.Add(entitlementExtended);
}
StateHasChanged();
await base.OnInitializedAsync();
}
public async Task UpdateHandler(GridCommandEventArgs args)
{
EntitlementValueDTOExtended item = (EntitlementValueDTOExtended)args.Item;
var matchingItem = entitlementsExtended.FirstOrDefault(c => c.Id == item.Id);
if (matchingItem != null)
{
matchingItem.Description = item.Description;
matchingItem.EntitlementTypeId = item.EntitlementTypeId;
matchingItem.Value = item.Value;
}
successMessages = $"updated grid on {DateTime.Now}";
StateHasChanged();
}
public class EntitlementValueDTOExtended
{
public Guid Id { get; set; }
public string Description { get; set; } = "";
public string Value { get; set; } = "";
public int EntitlementTypeId { get; set; } = 0;
}
A workaround is to initialize the collection of the selected items:
<TelerikButton OnClick="@LoadData">Load Data</TelerikButton>
<TelerikGrid Data=@adminUsers Height="300px" Pageable=true PageSize=10 SelectionMode="@GridSelectionMode.Multiple"
@bind-SelectedItems="SelectedAdminUsers">
<GridColumns>
<GridCheckboxColumn SelectAll="true"></GridCheckboxColumn>
<GridColumn Field=@nameof(User.DisplayName) Title="User Name" />
<GridColumn Field=@nameof(User.Department) Title="Department" />
<GridColumn Field=@nameof(User.Status) Title="Status" />
<GridColumn Field=@nameof(User.EmployeeId) Title="Employee Id" />
</GridColumns>
</TelerikGrid>
@code
{
public IEnumerable<User> SelectedAdminUsers { get; set; } = Enumerable.Empty<User>();
public List<User> adminUsers { get; set; }
void LoadData()
{
adminUsers = Enumerable.Range(1, 200).Select(x => new User
{
EmployeeId = x,
Status = $"status {x}",
Department = $"department {x}",
DisplayName = $"name {x}"
}
).ToList();
}
public class User
{
public string DisplayName { get; set; }
public string Department { get; set; }
public string Status { get; set; }
public int EmployeeId { get; set; }
}
}
This worked in 2.5.1.
Sample repro (focus the textbox and try moving the cursor with the left and right arrows)
<TelerikTabStrip>
<TabStripTab Title="first tab">
<TelerikTextBox Value="@TbValue"></TelerikTextBox>
<input type="text" value="@TbValue" />
</TabStripTab>
<TabStripTab Title="second tab">another tab</TabStripTab>
</TelerikTabStrip>
@code{
string TbValue { get; set; } = "lorem ipsum";
}
I would like to request these features on the Blazor Grid:
Thanks.
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
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.
There's a bug when using the popup mode and adding a record
https://demos.telerik.com/blazor-ui/grid/editing-popup
Like this (example taken from "https://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation"):
Hi,
when scrolling all the way down on a grid and then using horizontal scroll, grid is scrolled vertically a bit.
Here is the video
https://drive.google.com/file/d/16GXvUO9Q9kTI2MSkn2t8_9-2ZBn44QO6/view?usp=sharing
Best regards,
Robert
You can work around this by disabling virtual scrolling with something like this:
ScrollMode="@(Data.Count() > 30 ? GridScrollMode.Virtual : GridScrollMode.Scrollable)"
Trying the custom GridCommandButtons. When recieving the event, the CommandName of the GridCommandEventArgs is always null. Shouldn't this be the name of the command I specified on the command?
Explore you example at
https://docs.telerik.com/blazor-ui/components/grid/toolbar#custom-commands
When private void MyCommandFromToolbar(GridCommandEventArgs args) is triggered, I expect the command name to be MyToolbarCommand
Hello!
The multiple selection functionality in the grid no longer works as expected.
The select check boxes doesn't seem to do anything and the only way to select something is when clicking on the actual row.
The problem is also present on your demo page.
ADMIN EDIT: Duplicate of https://feedback.telerik.com/blazor/1443720-selection-does-not-work-when-clicking-on-the-checkbox-works-when-clicking-the-row
Best regards.
Hi.
Is it possiblle add a contextual menu on a grid row and choose actions for that row?
Thanks.
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'm following your example listed here (in ObservableCollection section)
https://docs.telerik.com/blazor-ui/components/grid/selection/overview
The following scenario does not work.
Select an item in the grid.
Clear data set. Grid (simplified) look like this. Notice that the checkbox is selected even though nothing is in the grid.
Uncheck chekcbox.
Check checkbox -> All items from the previous data set will be selected (printed in ul bellow grid)
I have inspected the grid and i does not contain any item in its Data collection so I'm unsure from where does it get the selection.
Best regards,
Robert
When clicking on the Add Button in a Grid, a new item is created and displayed in edit mode.
Problem is, the OnEdit event is not triggered. I need to set a default value for new items and added the code in the OnEditHandler with if(args.IsNew){ //set default value}.
Unfortunately this does not work because the event is not triggered. This makes me wonder what "args.IsNew" is for if not for the usecase described above.