Hello together,
we are running into a problem with TelerikPdfViewer. When clicking the download button, download starts and performs properly.
BUT: the downloaded PDF file does not match the PDF that was provided via Data="@PdfData". On download something internally prepends some text to the PDF:
–€À³JS.ReceiveByteArray’Æ ‘¢%PDF-1.7 %úûüý 3 0 obj <</ca 1.00000 /AIS false >> endobj 5 0 obj
The original PDF file starts at "%PDF-1.7" (end of first line). That part before (including that "JS.ReceiveByteArray") was somehow added during the download workflow by Telerik. We ensured that the PDF data we provided to the viewer (via Data="@PdfData") ist valid. We did so by inspecting the byte[]-Array manually in the debugger as well as downloading it via a JS function to the client.
This is how we are using the TelerikPdfViewer. But the error occurs no matter if we are handling the OnDownload-Event (setting the filename) or not handlign that event at all (i.e. eliminating the OnDownload="@OnPdfDownload" completely)
<TelerikPdfViewer Data="@PdfData" Width="100%" Height="100%" Zoom="1m" OnDownload="@OnPdfDownload">
<PdfViewerToolBar>
<PdfViewerToolBarPagerTool />
<PdfViewerToolBarSpacer />
<PdfViewerToolBarZoomTool />
<PdfViewerToolBarSelectionTool />
<PdfViewerToolBarSearchTool />
<PdfViewerToolBarSpacer />
<PdfViewerToolBarDownloadTool />
<PdfViewerToolBarPrintTool />
</PdfViewerToolBar>
</TelerikPdfViewer>
We use Telerik.UI.for.Blazor (6.2.0).
Thanks for your feedback on this issue and best regards!
Sebastian
We need a formal, Accordion component. This is missing like a sore thumb !
The Accordion should be the first component in the component list.
Using the panel bar is not the same as the functionality of Accordion. So, do not mark this request as a duplicate of a panel bar enhancement request.
This is a simple component and I request you to prioritize and release it urgently in the next release.
Thanks.
Bug reproduced systematically on web browser Edge (131.0.29.03.146) & Firefox (134.0).
Beware: culture is fr-FR
Scheduler component sometimes put appointments at wrong coordinates (hour if ok but the day is wrong).
The screenshot "ExampleWrongCoordinates.png" set an example of an item wrongfully located. In this picture, console log shows details of the razor element who's supposed to be located on Tuesday 14th of January 2025 .. but which is rendered on Monday instead!
Appointments model defines "default (expected) property names Start & End":
private DateTime _start;
public DateTime Start
{
get { return _start; }
set { _start = value; }
}
private DateTime _end;
public DateTime End
{
get { return _end; }
set { _end = value; }
}
View is MultiDay but the glitch is the same on Week view.
Now if we switch on day view and navigate to Tuesday 14, scheduler shows the appointment on hours column! If we click it, a JS error is raised (Cf screenshot "ClickAppointmentWrongCoordinates.png").
We have recently update to version 7.0.0 of Telerik for Blazor controls.
We have also access to Progress ThemeBuilder application which we use to customize the default Material theme.
After the update to version 7 and also upgrading and compiling the new theme file for our application, TabStrip items fail to display the correct css and defaults to the theme's original css.
ThemeBuilder produces rules for the tab item items with the following path
.lvs-tabstrip.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset.k-tabstrip-items-start .k-item.k-tabstrip-item
where the actual control generates the following
.lvs-tabstrip.k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items.k-reset.k-tabstrip-items-start .k-item
As you can see it is missing the k-tabstrip-item class and the custom theme fails to render correctly. Either Telerik blazor libary did not add this extra class to each tab item or theme builder is inserting this class when it should not.
I can place this extra class on each TabStripTab element on its Class property, but I feel this is something that the actual Telerik for Blazor libray should do.
Looking at the source code of Telerik for Blazor library, the TabStipTab component generates add the k-item as default and then applies the value of property ClassToRender and its value is
$"{ActiveCssClass} {DisabledCssClass} {Class} {FirstItemClass} {LastItemClass}".Trim()
The Class is an empty string, which I currently use to "fix" the problem but I certainly would like a better solution like a real fix :)
Thank you telerik team
<ColumnMenu>
<ColumnMenuFiltering/>
<ColumnMenuSorting/>
....
</ColumnMenu>
On a grid grouped by a field (using GroupDescriptors) where the amount of records exceed the page limit, therefore generating multiple pages, provide an option to keep the collapsed/expanded states of the groups when navigating through the pages.
In-house we implemented the following approach to mitigate this issue: when calling OnRead event, after processing the data (order, filter, group, etc) we're mapping the groups and subgroups to its corresponding indexes. When page changing, we then store the current state of the groups, alongside its keys (aka the label of the group). After page changing and mapping the groups and subgroups again, we just match the group names stored in this temporary state with the group names of the new page and restore the state.
For example: start with all groups initially collapsed, page 1 has groupA and groupB and user expanded groupB, changed to page 2, which has the remaining records of groupB and groupC. In this case it will restore groupB as expanded while groupC keeps collapsed.
Example to demonstrate the issue: https://blazorrepl.telerik.com/melmEeFi43owNZBe50
On a grid grouped by one or more fields, provide an option for end users to expand/collapse all rows at will. The following image is a suggestion of where this option (most likely a button) should appear:
When I am dynamically adding or removing tabs I am hitting a variety of problems targeting:
The active tab is not correctly set
the focus is not always set to the active tab
upon adding/removing a tab all tabs are re-created and their content is not persisted
This is causing some data loss, picklist filter loss, lag time when opening and closing tabs
When SelectOnFocus="true"
is enabled on the NumericTextBox control, and a format (e.g., Format="N1"
) is set, the SelectOnFocus
functionality does not select all text if the decimal value has no trailing digits. For instance, with the value 76
, the text is not selected on focus, but with the value 76.1
, the text is selected correctly.
<TelerikNumericTextBox @bind-Value="@DecimalValue" Format="N1" SelectOnFocus="true"/>
@code {
private decimal DecimalValue = 76;
}
Steps to Reproduce:
SelectOnFocus="true"
.Format="N1"
.76
(with no trailing digits after the decimal point).Expected Behavior:
The entire text (in this case, 76.0
) should be selected when the NumericTextBox gains focus.
Actual Behavior:
The text is not selected when the NumericTextBox gains focus if the value has no trailing digits after the decimal point (e.g., 76
). However, if the value includes trailing digits (e.g., 76.1
), the text is selected as expected.
Hi Team,
I am looking for captcha component to verify user as human like below screenshot. Please let me know if this feature is available
Would be nice to have an Expansion Panel like this one:
https://material-ui.com/components/expansion-panels/
Hi, in a my application I save the filters to db, and I permit the user to edit this.
The ValueTemplate (in FilterField component) works perfectly on insert, but not when I update the value of an existing FilterDescriptor (the CompositeFilterDescriptor is not updated).
I've gone deeper, and I think that missing a call to FilterChanged method in the TelerikFilter (from the child).
When the TelerikFilter render a FilterField this set the FilterChanged method that is used any time that you change something in the filter, but with a custom component this call missing.
I think that you must expose the FilterChanged (that now is private) or in TelerikFilter, or better in in context (FilterFieldValueTemplateContext) that you use in the FilterField.ValueTemplate, to force the update in the parent component.
To test this, you can use your code in https://blazorrepl.telerik.com/wIuhlcYV35fUROFX47 and add a new FilterDescriptor in the OnInitialized method, or you can test it with the code below (based on your own).
@using Telerik.Blazor.Components
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
@{
var firstFilter = (Telerik.DataSource.FilterDescriptor?)FilterValue?.FilterDescriptors.FirstOrDefault();
if (firstFilter is not null)
{
<div>
firstFilter value: @firstFilter.Value
</div>
}
}
<TelerikFilter Value="@FilterValue" ValueChanged="@OnValueChanged">
<FilterFields>
@foreach (var f in FilterFields)
{
if (nameof(Food.Price) == f.Name)
{
<FilterField Name="@f.Name" Type="@f.Type" Label="@f.Label" >
<ValueTemplate>
<TelerikNumericTextBox Value="@((decimal?)context.FilterDescriptor.Value)"
ValueChanged="@( (decimal? value) => NumericValueChanged(context.FilterDescriptor, value) )">
</TelerikNumericTextBox>
</ValueTemplate>
</FilterField>
}
else
{
<FilterField Name="@f.Name" Type="@f.Type" Label="@f.Label" />
}
}
</FilterFields>
</TelerikFilter>
<TelerikGrid Data="@GridData"
Height="400px">
<GridColumns>
<GridColumn Field="@(nameof(Food.Id))" />
<GridColumn Field="@(nameof(Food.Name))" />
<GridColumn Field="@(nameof(Food.Price))" />
<GridColumn Field="@(nameof(Food.IsAvailable))" />
</GridColumns>
</TelerikGrid>
@code {
private List<Food> GridData { get; set; } = new();
private List<Food> InitialData { get; set; } = new();
private CompositeFilterDescriptor FilterValue { get; set; } = new();
private List<string> Suggestions { get; set; } = new() { "Pasta", "Burger", "Pizza", "Kebab", "Steak", "Ice Cream" };
private void OnFilterValueChanged(FilterDescriptor fd, string value)
{
fd.Value = value;
ProcessGridData();
}
private void NumericValueChanged(FilterDescriptor fd, decimal? value)
{
fd.Value = value;
var a = FilterValue;
ProcessGridData();
}
private void OnValueChanged(CompositeFilterDescriptor value)
{
FilterValue = value;
ProcessGridData();
}
private void ProcessGridData()
{
CompositeFilterDescriptor filter = FilterValue;
var dataSourceRequest = new DataSourceRequest { Filters = new List<IFilterDescriptor> { filter } };
var dataSourceResult = InitialData.ToDataSourceResult(dataSourceRequest);
GridData = dataSourceResult.Data.Cast<Food>().ToList();
}
protected override void OnInitialized()
{
FilterValue.FilterDescriptors.Add(new FilterDescriptor { Member = nameof(Food.Price), Operator = FilterOperator.IsEqualTo, Value = Convert.ToDecimal(0), MemberType = typeof(decimal) });
LoadData();
base.OnInitialized();
}
private void LoadData()
{
InitialData = new List<Food>
{
new Food { Id = 1, Name = "Pasta", Price = 13.99m, IsAvailable = true},
new Food { Id = 2, Name = "Burger", Price = 11.99m, IsAvailable = false},
new Food { Id = 3, Name = "Pizza", Price = 16.99m, IsAvailable = true},
new Food { Id = 4, Name = "Kebab", Price = 9.99m, IsAvailable = true },
new Food { Id = 5, Name = "Steak", Price = 22.99m, IsAvailable = false },
new Food { Id = 6, Name = "Salad", Price = 6.99m, IsAvailable = true},
new Food { Id = 6, Name = "Ice Cream", Price = 4.99m, IsAvailable = true }
};
ProcessGridData();
}
public class Food
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public decimal Price { get; set; }
public bool IsAvailable { get; set; }
}
public List<MyFilterField> FilterFields = new List<MyFilterField>
{
new MyFilterField { Name = nameof(Food.Price), Type = typeof(double?), Label = "Price" },
new MyFilterField { Name = nameof(Food.Id), Type = typeof(int), Label = "Id" },
new MyFilterField { Name = nameof(Food.Name), Type = typeof(string), Label = "Name" },
new MyFilterField { Name = nameof(Food.IsAvailable), Type = typeof(bool), Label = "Is Available" }
};
public class MyFilterField
{
required public string Name { get; set; }
required public Type Type { get; set; }
required public string Label { get; set; }
}
}
Accessibility Insights for Web extension is flagging the k-grid-filter icon in the Grid Header labels. Need workaround and remove the aria-label and replace with aria-role per guidance. Under each of the red explanation marks is the filter icon on the column. Running the Accessibility Insights for Web tool by Microsoft using Edge browser flags this code.
Please provide temporary workaround and permanent fix.
Blazor-UI 2.30 Release.
The sort order for some strings should be in natural sort order.
1.10 -> 1.13 should be following 1.9 in this example.