The appointments are not on the right position in the scheduler, on day and week views.
They appear slight downwards. See screenshot from your demo pages.

The first appoinments are right. Later in time the appointments are off.

This is true for all themes.

Tested on Windows 11, with Brave, Firefox and Edge.

Best regards

Daniel Hüttenberger

Do you have a planned date for Telerik UI for Blazor to fully support Visual Studio 2022 Professional?

Telerik UI for Blazor cannot be used with Visual Studio 2022 Professional in Debug mode and Hot Reload. There are couple issues, see below, that seems to be related, and that Telerik are not willing to fix. Those issues render Telerik UI for Blazor unusable when working with Visual Studio 2022 Professional with Hot Reload.

Predefined dialogs are not shown after hot reload updates are applied and Predefined dialogs throw when hot reload updates are applied

Blazor WASM breaks in VS2022 after Hot Reload in UI for Blazor | Telerik Forums

Hello guys,

I know you probably gonna redirect me to these topics:

https://feedback.telerik.com/blazor/1588185-onshapeclick-does-not-trigger-for-every-bubble-or-shape-when-the-bubble-shape-layers-are-created-dynamically

https://feedback.telerik.com/blazor/1581128-ability-to-change-the-color-of-the-shape-on-click

But that is not a solution. The OnShapeClick-Event of the TelerikMap still triggers only if you click the shape, that was added last. Which means if I have 3 shapes in my TelerikMap, only a click on the third map will lead to the OnShapeClick event being triggered.

This is not a feature request, as you told Michael in his bug report und not at all related to the feature request of chaning a shape's color up on clicking it...but this is clearly a bug.

Please provide some short feedback on how / when this will be solved. Otherwise as a user of Blazor UI I have to manually write JavaScript Code, dismantle the DOM, trigger Interop-Methods etc. to achieve that behavior that should actually just work out of the box as documented.

Thanks and best regards!
Sebastian

When a DatePicker input is cleared by using the keyboard and the control loses focus, the state of a non-nullable DateTime property is inconsistent with the control. 

This behavior is appropriate; however, it can cause user confusion when the underlying value is used to query for data based on a value the user no longer sees.

My proposed solution (bug fix) is to return the value of the DatePicker to the last known good value when the control loses focus.

StateHasChanged() by itself does not cause a re-render of the component, however changing the @key value of the DatePicker does.

See this REPL for a demonstration of the issue and workaround/fix: https://blazorrepl.telerik.com/czEjvVlK18i471S622

namespace Telerik.Blazor.Components.Common;
TelerikGrid<T>
{

   public virtual void Rebind()   

      {       
            ProcessDataAsync(); 
      }

}

Rebind() doesnt use async/await, but ProcessDataAsync() does, which leads to race conditions.

Refreshing the Grid data frequently may cause performance issues.

Hi.

When you have a TelerikGrid, with on OnRead event making an async call, the pager that comes with TelerikGrid doesn't show the mobile view when on a narrower device.

I created a blazor repl here: https://blazorrepl.telerik.com/mxOPbEuZ29PQRAQk02

If you view the repl in browser, open dev tools and toggle the device toolbar, and set your viewport width to something around 320px. If it loads into the preview right away, after having been first rendered on normal screensize, then the pager will adapt. To see the bug, go to the code tab, then the preview tab to have it do its initial render on mobile width. You will see something like this:

This is an issue live currently on my own websites, which had been reported to me by customers. I believe this only occurs when using the Grid's OnRead, and making an asynchronous call within it (which I represented in the repl with a Task.Delay)

I'm using as early as 3.5.0 in production, but can repro this on latest, 3.7.0.

Hello,

i am trying to add a Clear Button inside the DropDownList-Component.

I tried to follow the instructions provided here: How do I add a Clear button to a DropDownList? in UI for Blazor | Telerik Forums respectiveley here: Telerik REPL for Blazor - The best place to play, experiment, share & learn using Blazor.

But unfortunateley, the button is never inside the component. It's always next to it or under the component.

In your example provided above, the button is inside the component.

I would love to have any solution for this one. A clear button is needed quite often.

I also have attached our custom component, where we use the Telerik DropDownList Component.

Thank you

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

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

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:

1. Add a NumericTextBox control to a Blazor Server application.
2. Set SelectOnFocus="true".
3. Set a format, e.g., Format="N1".
4. Enter a value such as 76 (with no trailing digits after the decimal point).
5. Focus on the NumericTextBox.

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, 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.

We're currently working on requiring a Google CASA Security Assessment, as part of this they scanned our site. 

However, the scan found an eval() function in the telerik-blazor.js file:

if(_util.isNodeJS){const worker=eval("require")(this.workerSrc);return worker.WorkerMessageHandler}

Is it possible to remove eval() from telerik-blazor.js?

Hi, I just came accross a bug in the TelerikStepper.

I try to create a custom version that switches to a custom success icon after a step is completed.
It contains the following codesnippets:

<TelerikStepper Linear="true" ValueChanged="@HandleValueChanged">
    <StepperSteps>
        @for (int i = 0; i < IsValidArray.Length; i++)
        {
            <StepperStep Valid="@IsValidArray[i]"></StepperStep>
        }
    </StepperSteps>
</TelerikStepper>

@code {
    bool?[] IsValidArray = [null, null, null, null];

    public void HandleValueChanged(int index)
    {
        for (int i = 0; i < IsValidArray.Length; i++)
        {
            IsValidArray[i] = index > i ? true : null;
        }
    }
}

Forward it works like expected:

When moving backwards it behaves strange:

Except if you are debugging (Visual Studio debugger), then everything works as expected:

Same thing can be achived when not debugging but clicking on the step a second time.


This can not be solved by adding the @key parameter as suggested in https://feedback.telerik.com/blazor/1659827-bug-in-the-telerikstepper-in-blazor from Hristian Stefanov!

Nevertheless, it turns out that the Task.Delay(1); seems to solve the Issue somehow.

Is this intended?

When using the grouped DropDownList and performing a search for a specific element, the DropDownList incorrectly displays the initially shown group instead of the group containing the searched element.

When the option "AllowCustom" is enabled for a TelerikComboBox and the user types something above a certain speed, typed characters are lost. Here is a GIF showing the problem on the page https://demos.telerik.com/blazor-ui/combobox/custom-values – I typed "123456", but end up with "1246" instead. In between the input field is showing some weird glitching.

Is there a way to have the TelerikComboBox behave normally, as it apparently did in versions prior to 4.3.0? We noticed this behavior only some time after upgrading from version 4.0.1, where everything still works properly.