Hi,
I would like checkbox support including the check all checkbox on the multiselect component like: https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/functionality/checkbox-support
The url below shows how to create custom checkboxes in the multiselect component but adding a check all checkbox in the headertemplate does not update the multiselect popup
Please add TreeList Export to Excel
Regards
Andrzej
I'd like to have an ExpansionPanel component where I can declare my desired panel instances and their content in the markup.
Similar to https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/
Appointment editing does not work on Chrome for mobile (Android).
Run the following demo in the Chrome for mobile browser, on a mobile device with Android : https://demos.telerik.com/blazor-ui/scheduler/appointment-editing
The popup editor does not show up.
The popup editor shows up.
Chrome
No response
Support multiple users editing the same content in an editor.
This would be similar to the editor in something like confluence or online Word.
Regards
The PDF standard allows two ways to configure Acro fields and relate them to inputs (widget annotations):
Adobe Acrobat supports both options. Telerik PdfProcessing supports only the first option, which is more commonly used. The PDF Viewer supports only the second option. If the PDF Viewer loads a file with the first configuration, the component saves new field values in such a way that they can't be retrieved by PdfProcessing. Moreover, if the PDF file is opened locally, it looks like the new values are there, but when you click on a field, the original value shows. The new value behaves like a placeholder rather than a real value.
Currently, on mobile devices (where is no hover), to open the child menu you need to click/tap the parent and the only way close it afterwards is if you click away. This is not very convenient for mobile usage. I want to be able to close the child menu on click/tap of the parent as well.
When you select a date in DropDownList with dates in it (List<DateTime>), the @bind-Value is shaving off the milliseconds.
===ADMIN EDIT===
In the meantime, as a workaround for displaying milliseconds correctly, you can bind the DropDownList to a model. This way, you can use the "Id" to retrieve the selected item and display its precise milliseconds. Below is an example I've prepared to demonstrate this approach:
Selected value: @myDdlData.ToList().Where(x => x.Id == selectedValueId).FirstOrDefault()?.MyValueField.ToString("MM/dd/yyyy HH:mm:ss.fff")
<br />
<TelerikDropDownList Data="@myDdlData"
TextField="MyTextField"
ValueField="Id"
@bind-Value="selectedValueId">
</TelerikDropDownList>
@code {
public class MyDdlModel
{
public int Id { get; set; }
public DateTime MyValueField { get; set; }
public string MyTextField => MyValueField.ToString("MM/dd/yyyy HH:mm:ss.fff"); // Display formatted DateTime
}
private int selectedValueId { get; set; } = 1;
private IEnumerable<MyDdlModel> myDdlData = GenerateRandomDateTimes(20);
private static IEnumerable<MyDdlModel> GenerateRandomDateTimes(int count)
{
Random random = new Random();
DateTime startDate = DateTime.Now;
return Enumerable.Range(1, count)
.Select(x => new MyDdlModel
{
Id = x, // Unique integer Id
MyValueField = startDate.AddDays(x)
.AddMinutes(random.Next(0, 60))
.AddSeconds(random.Next(0, 60))
.AddMilliseconds(random.Next(0, 1000))
}).ToList();
}
}
I have been having issues adding the month view to a Telerik Blazor scheduler component, when there is grouping. It gives a null reference error any time I try to switch to the month view. I also tried it using the available demo for grouping in Telerik REPL, the only difference I found between my code and the demo was that I had used the ItemsPerSlot parameter. I added this to the demo, and was able to reproduce the error I was seeing, and I have attached the console output from the REPL demo. I believe there is either a bug with the ItemsPerSlot being used in conjunction with grouping on a scheduler component, or some instruction missing from how to set it up properly to prevent this null reference issue.
Changed code:
<SchedulerMonthView ItemsPerSlot="5"></SchedulerMonthView>
Demo used:
Blazor Scheduler (Event Calendar) Demos - Grouping | Telerik UI for Blazor
Workaround:
<TelerikGrid Data="@GridData"
SelectionMode="@GridSelectionMode.Multiple"
SelectedItems="@SelectedItems"
SelectedItemsChanged="@( (IEnumerable<Employee> newSelected) => OnSelectedItemsChanged(newSelected) )"
Height="300px">
<GridToolBarTemplate>
<TelerikButton Enabled="@(SelectedItems.Any())" OnClick="@DeleteSelectedEmployees">Delete</TelerikButton>
</GridToolBarTemplate>
<GridColumns>
<GridCheckboxColumn SelectAll="true" />
<GridColumn Field="Name" Title="Name" />
<GridColumn Field="Team" Title="Team" />
</GridColumns>
</TelerikGrid>
@code {
private List<Employee> GridData { get; set; } = Enumerable.Range(1, 10).Select(i => new Employee
{
EmployeeId = i,
Name = $"Employee {i}",
Team = $"Team {i % 3}"
}).ToList();
private List<Employee> SelectedItems { get; set; } = new();
private void OnSelectedItemsChanged(IEnumerable<Employee> items)
{
SelectedItems = items.ToList();
}
private void DeleteSelectedEmployees()
{
if (SelectedItems.Any())
{
GridData = GridData.Except(SelectedItems).ToList();
SelectedItems.Clear();
}
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public override bool Equals(object obj) => obj is Employee e && e.EmployeeId == EmployeeId;
public override int GetHashCode() => EmployeeId.GetHashCode();
}
}
Telerik input components inside EditorTemplate render the whole grid on each keystroke
<AdminEdit>
As a workaround, you can use the standard Input components provided by the framework together with a CSS class that would visually make them like the Telerik Input Components. An example for the TextArea:
<InputTextArea class="k-textarea" @bind-Value="@myValue"></InputTextArea></AdminEdit>
The AutoComplete component does not update the category grouping header, even when the data within that group has been removed. As a result, the outdated group header remains visible until you scroll down to another group, at which point the first group header refreshes and disappears as expected.
Repro: REPL link.
(bug report only)
Regression introduced in 9.0.0.
1. Run the code posted below and export the Grid.
2. Open the exported Excel file.
<TelerikGrid Data=@GridData
Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
ShowColumnMenu="true" FilterMode="@GridFilterMode.FilterMenu"
Width="800px" Height="400px">
<GridToolBar>
<GridToolBarExcelExportTool>
Export to Excel
</GridToolBarExcelExportTool>
</GridToolBar>
<GridExport>
<GridExcelExport FileName="telerik-grid-export" AllPages="false" />
</GridExport>
<GridColumns>
<GridColumn Title="Personal Information">
<Columns>
<GridColumn Field=@nameof(Customer.FirstName) Title="First Name" Width="100px" />
<GridColumn Field=@nameof(Customer.LastName) Title="Last Name" Width="100px" />
</Columns>
</GridColumn>
<GridColumn Title="Company">
<Columns>
<GridColumn Field=@nameof(Customer.CompanyName) Title="Name" />
<GridColumn Field=@nameof(Customer.HasCompanyContract) Title="Has Contract" Width="120px" />
</Columns>
</GridColumn>
<GridColumn Title="Contact Details">
<Columns>
<GridColumn Field="@nameof(Customer.Email)" Title="Email"></GridColumn>
<GridColumn Field="@nameof(Customer.Phone)" Title="Phone"></GridColumn>
<GridColumn Field="@nameof(Customer.City)" Title="City"></GridColumn>
</Columns>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
public List<Customer> GridData { get; set; }
public class Customer
{
public int Id { get; set; }
public string PasswordHash { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string CompanyName { get; set; }
public bool HasCompanyContract { get; set; }
public string Email { get; set; }
public string Phone { get; set; }
public string City { get; set; }
}
// generation of dummy data
protected override void OnInitialized()
{
GridData = GenerateData();
}
List<Customer> GenerateData()
{
var data = new List<Customer>();
string[] fNames = new string[] { "Nancy", "John", "Orlando", "Jane", "Bob", "Juan" };
string[] lNames = new string[] { "Harris", "Gates", "Smith", "Caprio", "Gash", "Gee" };
string[] cNames = new string[] { "Acme", "Northwind", "Contoso" };
string[] cities = new string[] { "Denver", "New York", "LA", "London", "Paris", "Helsinki", "Moscow", "Sofia" };
Random rnd = new Random();
for (int i = 0; i < 150; i++)
{
string fName = fNames[rnd.Next(0, fNames.Length)];
string lName = lNames[rnd.Next(0, lNames.Length)];
string cName = cNames[rnd.Next(0, cNames.Length)];
data.Add(new Customer
{
Id = i,
PasswordHash = "not shown",
FirstName = fName,
LastName = lName,
CompanyName = cName,
HasCompanyContract = i % 3 == 0,
Email = $"{fName}.{lName}@{cName}.com",
Phone = $"{rnd.Next(100, 999)}-555-{rnd.Next(100, 999)}",
City = cities[rnd.Next(0, cities.Length)]
});
}
return data;
}
}
(optional)
The “Personal Information”, “Company”, “Contact Details” headers are not exported.
The multi-column headers are exported.
The Grid resets and disables the adaptive mode for a column menu if the column has been hidden. The component also uses the previous adaptive mode that is no longer correct if the browser window is resized.
Steps to reproduce:
Test page:
<TelerikGrid Data="@GridData"
AdaptiveMode="@AdaptiveMode.Auto"
FilterMode="GridFilterMode.FilterMenu"
ShowColumnMenu="true">
<GridColumns>
<GridColumn Field="@nameof(Product.Name)" />
<GridColumn Field="@nameof(Product.Group)" />
<GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:c2}" />
<GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:n0}" />
<GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:d}" />
<GridColumn Field="@nameof(Product.Discontinued)" />
</GridColumns>
</TelerikGrid>
@code {
private List<Product> GridData { get; set; } = new();
protected override void OnInitialized()
{
var rnd = Random.Shared;
for (int i = 1; i <= 3; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = $"Name {i} {(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}",
Group = $"Group {i % 3 + 1}",
Price = rnd.Next(1, 100) * 1.23m,
Quantity = rnd.Next(0, 10000),
Released = DateTime.Today.AddDays(-rnd.Next(60, 1000)),
Discontinued = i % 4 == 0
});
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Group { get; set; } = string.Empty;
public decimal Price { get; set; }
public int Quantity { get; set; }
public DateTime Released { get; set; }
public bool Discontinued { get; set; }
}
}
Customers report inconsistent in-cell editing behavior with DatePicker columns in the Grid.
Here is a REPL test page that reproduces the issue (first date column) and provides a workaround (second date column):
https://blazorrepl.telerik.com/QAErkrEh090ykIxR16
The workaround relies on Grid EditorTemplate, the DatePicker OnClose event, and programmatic Grid edit mode management. The relevant code is:
@using System.ComponentModel.DataAnnotations
<TelerikGrid @ref="@GridRef"
Data="@GridData"
EditMode="@GridEditMode.Incell"
OnUpdate="@OnGridUpdate"
OnCreate="@OnGridCreate">
<GridToolBarTemplate>
<GridCommandButton Command="Add">Add Item</GridCommandButton>
</GridToolBarTemplate>
<GridColumns>
<GridColumn Field="@nameof(Product.Name)" />
<GridColumn Field="@nameof(Product.StartDate)" Title="BUG" DisplayFormat="{0:d}" />
<GridColumn Field="@nameof(Product.EndDate)" Title="WORKAROUND" DisplayFormat="{0:d}">
<EditorTemplate>
@{ var editItem = (Product)context; }
<TelerikDatePicker Value="editItem.EndDate"
ValueChanged="@((DateTime? newValue) => OnGridDatePickerValueChanged(newValue, editItem))"
ValueExpression="@( () => editItem.EndDate )"
OnClose="@(async () => await OnGridDatePickerClose(editItem))" />
</EditorTemplate>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
#nullable enable
private TelerikGrid<Product>? GridRef;
private List<Product> GridData { get; set; } = new();
private int LastId { get; set; }
private DateTime LastDatePickerValueChanged { get; set; } = DateTime.Now;
private void OnGridDatePickerValueChanged(DateTime? newValue, Product editItem)
{
editItem.EndDate = newValue;
LastDatePickerValueChanged = DateTime.Now;
}
private async Task OnGridDatePickerClose(Product editItem)
{
if (DateTime.Now - LastDatePickerValueChanged > TimeSpan.FromMilliseconds(500))
{
GridState<Product> gridState = GridRef!.GetState();
if (gridState.EditItem is not null && gridState.EditItem.Id == editItem.Id)
{
// Uncomment to perform an item update instead of cancel
// OnGridUpdate(new GridCommandEventArgs { Item = editItem });
gridState.OriginalEditItem = null!;
gridState.EditItem = null!;
await GridRef.SetStateAsync(gridState);
}
}
}
private void OnGridCreate(GridCommandEventArgs args)
{
var createdItem = (Product)args.Item;
createdItem.Id = ++LastId;
GridData.Insert(0, createdItem);
}
private void OnGridUpdate(GridCommandEventArgs args)
{
var updatedItem = (Product)args.Item;
var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);
if (originalItemIndex != -1)
{
GridData[originalItemIndex] = updatedItem;
}
}
protected override void OnInitialized()
{
for (int i = 1; i <= 5; i++)
{
GridData.Add(new Product()
{
Id = ++LastId,
Name = $"Product {LastId}",
Price = Random.Shared.Next(0, 100) * 1.23m,
Quantity = Random.Shared.Next(0, 1000),
StartDate = DateTime.Today.AddDays(-Random.Shared.Next(60, 1000)),
EndDate = DateTime.Today.AddDays(Random.Shared.Next(1, 60)),
IsActive = LastId % 4 > 0
});
}
}
public class Product
{
public int Id { get; set; }
[Required]
public string Name { get; set; } = string.Empty;
public decimal Price { get; set; }
public int Quantity { get; set; }
public DateTime? StartDate { get; set; }
public DateTime? EndDate { get; set; }
public bool IsActive { get; set; }
}
}