On the bright side, I don't have to write a repro code sample for this issue since this is present in the example on https://www.telerik.com/blazor-ui/documentation/components/grid/templates/popup-form-template#example
- Open the edit popup for any item and close the window with the "x" in the top right
- Now click the button to add a new item
The popup for adding a new item now shows the values of the previously edited item. The same goes for editing any other item. As long as the popup is closed with the "x" in the top right, the edit context remains.
The Problem relates to the ExitGridEditMode method and when it is and isn't called. Specifically, it is not called when the edit popup is closed with the close button in the top right of the window. I have also not found any way to get notified about the edit popup being closed with the close button. The Grid contains a hard-coded <TelerikWindow> and there doesn't appear to be a way to influence this window action or any events that it triggers.
In the case of a sorted column, NVDA is not narrating the correct column name and narrating the incorrect Roles for the column headers.
In the case of an unsorted column, NVDA is narrating the column name twice and repeating the information.
Description
A pane that has Closeable="false" set does not render a "close" button and should not be closeable through any user interaction. However, pressing the Esc keyboard key (while the pane is floating and has the focus) closes the pane.
Steps To Reproduce
Run the following REPL example: https://blazorrepl.telerik.com/QTkgmKuM23c0uPv125
- Focus the floating pane.
- Press the Esc keyboard key.
A slightly different scenario: there are no panes declared in a DockManagerFloatingPanes tag. The user drags a DockManagerContentPane making it float, then presses Esc key: https://blazorrepl.telerik.com/QJuUGUlv43toAJhk40
Actual Behavior
The floating pane closes.
Expected Behavior
The floating pane remains open.
Workaround:
Add the following script to the view:
<script suppress-error="BL9992">
document.addEventListener(
"keydown",
function (e) {
if (e.key === "Escape" && e.target.classList.contains("k-dock-manager-window")) {
e.stopImmediatePropagation();
e.preventDefault();
}
},
true
);
</script>Browser
All
Last working version of Telerik UI for Blazor (if regression)
No response
I am creating a Donut Chart and believe I have found a bug. On the initial load of the page, the donut chart element is not playing its animation when the label property "Visible=false". Instead, it pops on with no animation. The animations do play on the drilldown elements on their initial loads, but clicking the refresh chart button also causes this behavior even on drilldown levels. Resetting the drilldown also causes this behavior. The chart legend remains visible during the time when the chart is not. Setting the labels visible property to true causes the animations to play correctly. This proof of concept utilizes static data. The application was created using the telerik templates and is correctly injecting the telerik components as all other telerik components, including other chart components, are functioning as expected. I have isolated the code for the donut chart and posted it here.
<TelerikButton OnClick="@(() => DonutChart.Refresh())">Refresh Donut Chart</TelerikButton>
<TelerikButton OnClick="@(() => DonutChart.ResetDrilldownLevel(0))">Reset DrillDown</TelerikButton>
<!-- Donut Chart -->
<TelerikChart @ref="DonutChart">
<ChartTitle Text="Donut Chart" />
<ChartLegend Position="Telerik.Blazor.ChartLegendPosition.Right" />
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Donut"
Data="@donutData"
Field="@nameof(DonutModel.Number)"
CategoryField="@nameof(DonutModel.Category)"
ColorField="@nameof(DonutModel.SegmentColor)"
DrilldownField="@nameof(DonutModel.DrillDown)">
<ChartSeriesBorder Color="white" Width="2" />
<ChartSeriesLabels Position="ChartSeriesLabelsPosition.Above"
Visible="false"
Background="transparent">
</ChartSeriesLabels>
</ChartSeries>
</ChartSeriesItems>
</TelerikChart>
@code {
// Donut Chart
public TelerikChart DonutChart;
public class DonutModel
{
public string Category { get; set; }
public int Number { get; set; }
public string SegmentColor { get; set; }
public ChartSeriesDescriptor? DrillDown { get; set; }
}
public List<DonutModel> donutData = new List<DonutModel>
{
new DonutModel
{
Category = "Category 1 with Drilldown",
Number = 263,
SegmentColor = "#9d3cc7",
DrillDown = new ChartSeriesDescriptor
{
Name = "Drilldowns",
Type = ChartSeriesType.Donut,
Field = nameof(DonutModel.Number),
CategoryField = nameof(DonutModel.Category),
DrilldownField = nameof(DonutModel.DrillDown),
Data = new List<DonutModel>()
{
new DonutModel
{
Category = "Drill Down 1",
Number = 102,
SegmentColor = "#9d3cc7",
DrillDown = new ChartSeriesDescriptor
{
Name = "People",
Type = ChartSeriesType.Donut,
Field = nameof(DonutModel.Number),
CategoryField = nameof(DonutModel.Category),
Data = new List<DonutModel>()
{
new DonutModel
{
Category = "John Doe",
Number = 27,
SegmentColor = "#9d3cc7"
},
new DonutModel
{
Category = "David Smith",
Number = 45,
SegmentColor = "green"
},
new DonutModel
{
Category = "Mary Johnson",
Number = 63,
SegmentColor = "yellow"
},
new DonutModel
{
Category = "Robert Brown",
Number = 56,
SegmentColor = "orange"
}
}
}
},
new DonutModel
{
Category = "Drilldown 2",
Number = 67,
SegmentColor = "green",
DrillDown = new ChartSeriesDescriptor
{
Name = "People",
Type = ChartSeriesType.Donut,
Field = nameof(DonutModel.Number),
CategoryField = nameof(DonutModel.Category),
Data = new List<DonutModel>()
{
new DonutModel
{
Category = "John Doe",
Number = 15,
SegmentColor = "#9d3cc7"
},
new DonutModel
{
Category = "David Smith",
Number = 17,
SegmentColor = "green"
},
new DonutModel
{
Category = "Mary Johnson",
Number = 19,
SegmentColor = "yellow"
},
new DonutModel
{
Category = "Robert Brown",
Number = 16,
SegmentColor = "orange"
}
}
}
},
new DonutModel
{
Category = "Drilldown 3",
Number = 10,
SegmentColor = "orange",
DrillDown = new ChartSeriesDescriptor
{
Name = "People",
Type = ChartSeriesType.Donut,
Field = nameof(DonutModel.Number),
CategoryField = nameof(DonutModel.Category),
Data = new List<DonutModel>()
{
new DonutModel
{
Category = "John Doe",
Number = 3,
SegmentColor = "#9d3cc7"
},
new DonutModel
{
Category = "David Smith",
Number = 4,
SegmentColor = "green"
},
new DonutModel
{
Category = "Mary Johnson",
Number = 1,
SegmentColor = "yellow"
},
new DonutModel
{
Category = "Robert Brown",
Number = 2,
SegmentColor = "orange"
}
}
}
}
}
}
},
new DonutModel
{
Category = "Category 2 with no Drilldown",
Number = 31,
SegmentColor = "#fab933"
}
};
Description
Regression introduced in v9.0.0.
Initial binding to a property works, but when either the RemoveAttributes or the StripTags parameter is set, on changing the Editor value, two-way binding does not work and the new Editor value is not reflected in the property value.
Potentially related to #3887
Steps To Reproduce
- Run the following example:
<p role="status">Current Editor value: @CurrentEditorText</p>
<TelerikEditor @bind-Value="@CurrentEditorText">
<EditorSettings>
<EditorPasteSettings ConvertMsLists="@true"
RemoveAllAttributes="@true"
RemoveAttributes="@(new List<string> { "lang" })"
RemoveHtmlComments="@true"
RemoveMsClasses="@true"
RemoveMsStyles="@true"
StripTags="@( new List<string> { "h1" })">
</EditorPasteSettings>
</EditorSettings>
</TelerikEditor>
@code {
private string CurrentEditorText { get; set; } = @"<strong>initial</strong><span>value</span>";
public List<string> RemoveAttributes { get; set; } = new List<string>() { "data-id" };
public List<string> StripTags { get; set; } = new List<string>() { "font" };
}
- Type in the Editor's content area
Actual Behavior
The CurrentEditorText property value is not updated.
Expected Behavior
The CurrentEditorText property value is updated.
Browser
All
Last working version of Telerik UI for Blazor (if regression)
8.1.1
---
ADMIN EDIT
A workaround is to initialize the RemoveAttributes list:
<TelerikEditor @bind-Value="@EditorContent">
<EditorSettings>
<EditorPasteSettings
RemoveAttributes="@( new List<string>() )"
>
</EditorPasteSettings>
</EditorSettings>
</TelerikEditor>
@EditorContent
@code{
string EditorContent { get; set; }
}---
Hi,
When submitting a chat message using the Chat component, it is possible to lose recently entered text.
I believe this is because:
- The TextArea in the Chat component has a debounce delay (the default 150ms delay)
- Pressing enter (or clicking the send button) fires the SendMessageAsync method instantly
- SendMessageAsync uses the last text received from the TextArea, but this can be up to 150ms behind due to the debounce delay
This is reproducible on the Chat component documentation page, https://www.telerik.com/blazor-ui/documentation/components/chat/overview#creating-blazor-chat:
- Type in some text
- Wait 150ms (i.e., wait for the button to enable, otherwise the enter keypress and button clicks are ignored)
- Type some more text and quickly hit enter (or press the button)
Depending on the timing, the last few characters/words will be lost and not included in the message.
I encounter this issue in version 11 with server side rendering, but the documentation page appears to be using version 12 with web assembly.
Thanks,
Craig
After upgrading to 12.0.0, the Content does not change when clicking tabs. I always see the Content of the first tab.
My project targets .net8.
Currently the bubble sizes in the Chart are determined automatically, according to an internal algorithm.
Please add parameters for setting specific min and max bubble sizes by the application.
When using the OnClick event on a DropDownButtonItem, the MouseEventArgs parameter is always null. However, if the OnClick event is used on the main TelerikDropDownButton component, the MouseEventArgs works correctly.
REPL reproduction - https://blazorrepl.telerik.com/mfYdbbPQ37jhZlMq47
We are experiencing an issue where the ExportToPdfAsync() method on TelerikGrid is returning Excel data (XLSX format) instead of PDF data. This is causing MIME type errors when trying to process the exported data as a PDF.
===ADMIN EDIT===
Workaround
In the meantime, a possible workaround would be to use the document processing library (make sure the correct packages are installed for it) and import the xlsx file to a workbook, and then export the workbook to PDF. Here is an improvised example that demonstrates this by saving the file in your wwwroot folder as a pdf.
@inject IWebHostEnvironment HostingEnvironment
<TelerikGrid Data="@bookList" Height="75svh" Resizable="true" Sortable="true" Pageable="true" PageSize="15"
FilterMode="@GridFilterMode.FilterMenu" SelectionMode="@GridSelectionMode.Multiple"
SelectedItems="@SelectedBooks" @ref="@BookGrid"
SelectedItemsChanged="@((IEnumerable<BookInfo> sel) => OnRowSelect(sel))">
<GridToolBarTemplate>
<TelerikButton OnClick="@GenerateReport">Generate PDF</TelerikButton>
</GridToolBarTemplate>
<GridExport>
<GridPdfExport AllPages="true" PageOrientation="GridPdfExportPageOrientation.Landscape"
PaperSize="GridPdfExportPaperSize.A3" />
</GridExport>
<GridColumns>
<GridCheckboxColumn CheckBoxOnlySelection="true"></GridCheckboxColumn>
<GridColumn Field="ISBN">
<HeaderTemplate><b>ISBN</b></HeaderTemplate>
</GridColumn>
<GridColumn Field="Author">
<HeaderTemplate><b>Author</b></HeaderTemplate>
</GridColumn>
<GridColumn Field="Title">
<HeaderTemplate><b>Title</b></HeaderTemplate>
</GridColumn>
<GridColumn Field="Genre">
<HeaderTemplate><b>Genre</b></HeaderTemplate>
</GridColumn>
<GridColumn Field="PublishedYear">
<HeaderTemplate><b>Year</b></HeaderTemplate>
</GridColumn>
<GridColumn Field="CopiesAvailable">
<HeaderTemplate><b>Copies</b></HeaderTemplate>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
private async Task GenerateReport()
{
isLoading = true;
var pdfStream = await BookGrid.ExportToPdfAsync();
// The stream is actually XLSX, so convert it to PDF
using var ms = new MemoryStream(pdfStream.ToArray());
var xlsxProvider = new Telerik.Windows.Documents.Spreadsheet.FormatProviders.OpenXml.Xlsx.XlsxFormatProvider();
var workbook = xlsxProvider.Import(ms);
var rootPath = HostingEnvironment.WebRootPath;
var saveLocation = Path.Combine(rootPath, "LibraryBooks.pdf");
var pdfProvider = new Telerik.Windows.Documents.Spreadsheet.FormatProviders.Pdf.PdfFormatProvider();
using (var fileStream = new FileStream(saveLocation, FileMode.Create))
{
pdfProvider.Export(workbook, fileStream);
}
}
public class BookInfo
{
public string ISBN { get; set; }
public string Author { get; set; }
public string Title { get; set; }
public string Genre { get; set; }
public int PublishedYear { get; set; }
public int CopiesAvailable { get; set; }
}
private List<BookInfo> bookList = new()
{
new BookInfo { ISBN = "978-0451524935", Author = "George Orwell", Title = "1984", Genre = "Dystopian", PublishedYear = 1949, CopiesAvailable = 4 },
new BookInfo { ISBN = "978-0439139601", Author = "J.K. Rowling", Title = "Harry Potter and the Goblet of Fire", Genre = "Fantasy", PublishedYear = 2000, CopiesAvailable = 7 },
new BookInfo { ISBN = "978-0140449266", Author = "Homer", Title = "The Odyssey", Genre = "Epic Poetry", PublishedYear = -800, CopiesAvailable = 2 }
};
private TelerikGrid<BookInfo> BookGrid;
private List<BookInfo> SelectedBooks = new();
private bool isLoading = false;
private void OnRowSelect(IEnumerable<BookInfo> selected)
{
SelectedBooks = selected.ToList();
}
}
I was hoping to use the new AllowCustom feature to let users name a few areas, save those names in the backend and later show them as preselected when the user comes back so they don't have to retype the names every time they do an operation. But alas, the AllowCustom seems to only allow preselecting from what's in the Data list of values.
So code like below doesn't actually show a chip for Rome even though it's preselected. There is a workaround of setting the Data property to a list that contains the custom values I need preselected, but it feels clumsy and with the custom values I feel Multiselect should also check the selected values list for chips to render.
<TelerikMultiSelect
@bind-Value="@SelectedCities"
TItem="string" TValue="string"
AllowCustom="true"
Width="400px">
</TelerikMultiSelect>
<span>Selected: @SelectedCities.Count</span>
@code {
private List<string> SelectedCities { get; set; } = new() {"Rome"};
}
While working with the DockManager component we encountered a few issues and want to request a minor change:
Inconsistent pane header height
- When panes are in different states (headers displayed as a Tab vs. as a PaneHeader), their heights differ.
- Feature request: please consider introducing size enums (e.g. Small / Medium / Large) so that developers can adjust the header size. At the very least, making the heights consistent by default would help.
Thanks.
Bohdan
A Grid component with GridToolBar increases memory usage due to event handler leaks, specifically associated with the GridToolBar and ColumnMenuToolBar.
I have a scheduler, and am using a custom Edit handler. I need to support recurrence, and editing recurring events. When the use double-clicks on a recurring event, there is a dialog that asks whether they would like to edit the occurrence or the entire series.
I want to be able to capture the results of this dialog. `SchedulerEditEventArgs` doesn't include any attributes that track this.
===========
ADMIN EDIT
===========
The implementation of this enhancement could be covered by either including the corresponding attributes in the SchedulerEditEventArgs or by exposing a Template for the RecurrenceDialog.
Note: You may also check the Ability to directly edit an occurence or the series, without the prompt asking you to choose feature request as the implementation of both features will most likely be covered in one release.