telerik / blazor-ui Goto Github PK

See https://bit.ly/3iMN92v (note: private repo)

The current example at:
https://github.com/telerik/blazor-ui/tree/master/common/pdf-jpg-export-js

shows exporting the grid to PDF, but the chart is exported to JPG only.

Exporting it to PDF will not work as a separate instance of the Drawing API is instantiated by loading another script:

Bug report

Both the documentation as well as the readme claim that the "Blazor Dashboard App" builds the Telerik Themes and uses variables to customize the themes, which it does not.

Relevant quote from the documentation (under "Bootstrap Notes"):

The Telerik Bootstrap theme is not the same as the Bootstrap framework (or styles), it is our own theme that uses the Bootstrap metrics and design approaches to fit into a Bootstrap layout better. It can also use customized variables from Bootstrap, and you can see one way to do that through building the SASS files for both Bootstrap and Telerik in the following sample app: Blazor Dashboard.

Relevant quote from the ReadMe:

• customized SASS variables for Bootstrap
• the Telerik Bootstrap SASS theme to also utilize those variables

However, looking over the architecture of the solution we can see that the _Host.cshtml simply includes a link to the Telerik Theme hosted via cdn: <link id="theme" href="https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-bootstrap/all.css" rel="stylesheet" />.

It DOES include the bootstrap.scss in the actual theme building and shows how to customize variables for bootstrap. Since the Telerik theme is not imported during the theme building process, however, those variables will not be used for the Telerik Theme.
I assume this should work the same as with the Angular Bootstrap Theme.

(The Angular documentation on the issue of sass customization of the themes is also much clearer and easier to follow than its Blazor equivalent.)

Expected Behavior

The "Blazor Dashboard" sample should show how to include the Telerik Theme in such a way that sass variables customization works, in the way both the documentation and the readme claim it does.

Note

The "Blazing Coffee" sample suffers from a similar problem. While the documentation doesn't claim to show off sass variables customization, it DOES include both @progress/kendo-theme-default as well as bootstrap in its package.json, but then doesn't do anything with it.

Would be nice to have ChartEvents like GridEvents

Two use cases:

1. Click event for Series Legend that would be used to Hide/Show series.
2. Click event on series data point for drill-down to underlying data.

Currently using a hack with forms:

Context

In our application we use the Flux approach, with Fluxor library.
We have created a post on the Telerik Blazor forum to expose a concrete example and use case where we have some troubles since the Telerik 3.0.0 release.

Bug report

Old practice

With the Flux approach, we bind our components to objects stored in a State. For example, we used to do the following:
<TelerikGrid Data="@State.Houses" TotalCount="@State.TotalCount">

New practice

But now, we have to use OnRead events on components if we need to do some server side data manipulation (pagination or filtering a ComboBox data source for example). Use the OnRead event disable the mapping to Data parameter, but allow us to do the following:

protected async Task ReadItems(GridReadEventArgs args) {
  DataEnvelope DataResult = await FetchPagedData(args.Request.Page, args.Request.PageSize);
  args.Data = DataResult.CurrentPageData;
  args.Total = DataResult.TotalItemCount;
}

This is working very well if you want to use a classic pattern of:
User interaction -> frontend ask for data -> wait the answer -> assign args.Data and args.Total with these values.

But the pattern that we use (with Flux approach) is more like the following:
User interaction -> frontend ask for data -> answer is saved in a State, with the creation of a new instance -> the direct binding between component parameters (Data and TotalCount in general) and the State does the work

The problem with that

With these new implementation and new approach, we are no longer able to use and respect the Flux pattern. We have created a "hack" in order to do it, but it forces us to subscribe to the event (action) fired when the request is completed (so the state has a new value), and to call the Rebind() method of the component in the callback of this event.

protected override void OnInitialized() {
  SubscribeToAction<SetHousesAction>(action => {
    if (GridRef is null) return;
    GridRef.Rebind();
  });

  base.OnInitialized();
}

And now?

We have some questions with all of these elements:

• Is the new implementation compatible with Flux approach since Telerik 3.0.0?
• Is there any way to fully respect the Flux approach with new Telerik 3.0.0 OnRead system, or do we have to do the "subscribe to action" trick?
• Did we miss some information or something else?

Environment

• Telerik UI for Blazor version: 3.0.0 (and older)
• Browser: all
• App Type client

When the Height parameter is set, the grid does not render.

I don't believe Height is a valid parameter in version Kendo.Blazor 0.1.0

https://github.com/telerik/ui-for-blazor-examples/blob/c5bc6dee26d5ce36622238034f5aa9ffea3e781a/TelerikBlazor/TelerikBlazor.App/Pages/Grid/DataBind.cshtml#L9

Current page in the example always produces a scrollbar,
calc(100vh - 80px) fixes the issue

Bug report

This sample https://github.com/telerik/blazor-ui/tree/master/common/message-box/callback-event shows the dialog on all browsers that are currently open.

I am opening this on behalf of a customer who submitted a support ticket for this (1485201). @sylvainonweb could you take a look - this is a project that you contributed and perhaps that behavior would manifest in the app that you made it for too.

Reproduction of the problem

1. Launch the project on two different browser instances.

2. On one of the browser, click the "Show confirmation message box".

Current behavior

Window Popup appeared on both browser instances.

2020-09-18-11-10-20-mkv.zip

Expected/desired behavior

the message box shows only on the browser that triggered the click.

Data Grid:
How do I get access to a child collection in the data object when using a column template.
The grid is bound to a List.

I tried various methods to show the child collection data, but I get null references errors or I get no errors but no child data.

Thank you

BlazingCoffee website hangs on the loading indicator.
Even after updating Trial to paid commercial license.

Bug report

For: https://github.com/telerik/blazor-ui/tree/master/scheduler/custom-edit-form

This is a great example but it does not show a primary feature Recurrence. Can you extend the sample to show this?

I see we would add this in the model but in these customs forms how would we support this in a format the scheduler would understand?

public string? RecurrenceRule { get; set; }
public List? RecurrenceExceptions { get; set; }
public Guid? RecurrenceId { get; set; }

Bug report

Default date range is set to 2020-2022.

Reproduction of the problem

In an incognito window open https://demos.telerik.com/blazor-coffee/sales

The default date range and the data need to be updated to show results when the page is first visited.

Was Authentication Removed from Blazor Coffee?
The documentation mentions it, and there is an authentication.razor, but it doesn't seem to work

Note: Works fine on an iPhone XS Max with iOS version 13.6, I cannot reproduce on two android devices I have, or on the available iPhones in the Chrome devtools. My best guess is some font bug with iPhone as this is merely <span @onclick="@CloseProfile" class="k-icon icon-close"></span>

You can see this on small viewport heights on the main page, or on other pages that have small content - there is an unnecessary scrollbar due to the 100vh height set to the drawer, and the additional 80px header which totals more than the viewport height.

Reported in 1526414

My proposed solution is in the PR and is based on this https://github.com/telerik/blazor-ui/tree/master/drawer/sidenav

Reproduction of the problem

Run sample BlazorMauiApp project in Release mode and deploy to a physical iPhone/iPad device (not simulator).

Current behavior

1. Initial issue will be that you can't compile the app (various ILTrimming erros about file path length), however adding EnableAssemblyILStripping=False will resolve that (no longer needed after below workaround).
2. Next issue is that deploying the sample app to a physical iOS device will produce a Blazor runtime error in the WebView console on startup: ...Attempting to JIT compile method '...' while running in aot-only mode. App will be stuck on loading screen.

Expected/desired behavior

App should function same as if running on iOS simulator, which works fine in Release mode as-is.

Workaround

As noted in the Known Issues section of this readme, you can add the UseInterpreter & MtouchExtraArgs props to get around this issue. Please modify the sample app's csproj file to have this added by default so that new user's unfamiliar with this edge case can download a working end-to-end solution.

<PropertyGroup Condition="'$(Configuration)|$(TargetFramework)'=='Release|net7.0-ios'">
    <MtouchExtraArgs>--linkskip=Telerik.UI.for.Blazor</MtouchExtraArgs>
    <UseInterpreter>true</UseInterpreter>
</PropertyGroup>

Additionally, I strongly suggest making this more apparent from within this First Steps with Blazor Hybrid doc. I know it has a link at the very bottom to the Specifics of Telerik UI for Blazor in native MAUI which does show the same Known Issues section, it's just not as apparent up-front how big of an issue this will become later. Keep in mind that the entire Telerik Blazor Hybrid solution works w/o this fix, up to the point where you need to build in Release mode on a physical device (aka publish to app store). So this is likely to be the last thing you will test, and at least for me, it was not immediately apparent that this was a Telerik specific issue since Telerik had been added to my project for months w/o issue. In my case, similar to this MAUI Github issue, my app was completely freezing and not producing any errors at all, just a crash. I had to remove component calls until I finally got to the JIT/AOT error from above. Had I been properly warned about this requirement when I read the first steps doc from above all those months ago, I probably wouldn't have wasted so much time on this issue.

So overall, I'm just shooting for more transparency on this issue.

Environment

• Telerik UI for Blazor version: Same as sample
• Browser: iOS Webkit
• App Type MAUI Blazor Hybrid

Bug report

For Support request - Please do not submit support request here, instead see the Telerik UI for Blazor forums or our support system at Telerik.com !

For Feature Requests - please submit those into our feedback portal

Reproduction of the problem

(bug report only)
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem by referencing a sample project.

Current behavior

(optional)
Provide additional information if the steps for reproducing the faulty behavior are not sufficient to describe the issue.

Expected/desired behavior

Explain what the expected behavior of the functionality is

Environment

• Telerik UI for Blazor version: x.y.z
• Browser: [all | Chrome XX | Firefox XX | Edge XX]
• App Type [server | client]

Repro:

1. Click the Delete button on the main page https://demos.telerik.com/blazor-financial-portfolio/
2. scroll the page down
3. try dragging the confirmation window

Actual:
It moves to a wrong position, potentially outside of the viewport.

Expected:
It does not move away from the mouse

Root cause:
The layout of the app produces scrollbars on the parent element of the popup and focusing and moving it causes issues with calculations when those elements are scrolled. In Blazor there is a limit on how far up the DOM you can render popup elements and so you cannot fully take into account all possible CSS and scrolling settings.
You can read more about this here: https://docs.telerik.com/blazor-ui/knowledge-base/common-popup-causes-scroll-on-show and the fix would be similar to one proposed in the linked sample project - ensure that scrollbars are in the content, below the TelerikRootComponent and higher level elements have height:100% and overflow:hidden. In this app, the fix is not that trivial because it has a little more complex layout, responsive layout and a header, however.

Also related and similar in root cause to #104

Good evening,
i can't understand why table sorting doesn't work with expandoobject. I get the error "Failed to compare two elements in the array"

System.ArgumentException: At least one object must implement IComparable

Blazor WebAssembly .net 6

Best Regards

Replace:

With:
https://docs.microsoft.com/en-us/aspnet/core/data/ef-rp/intro?view=aspnetcore-5.0&tabs=visual-studio#add-the-database-exception-filter

because the call to StateHasChanged in the MainLayout , all your site using the mainlayout will double postback your requests

I noticed that TelerikTestContext and TelerikTestContextWithActualRoot are replacing bUnits built-in IJSRuntime with a mock. While it does work, there are a bunch of edge cases and 1st party components that bUnit's version is configured to handle out of the box (e.g. the Virtualize component), so a better approach would be to set up everything that is needed to render Telerik components directly.

There are a bunch of ways to achieve this, so I am curious what // mock the JS Interop service, you cannot use the one coming from the context refers to and will gladly help resolve any issues that are (if possible). If possible, outline the JSInterop requirements and I can help set things up.

Related: bUnit-dev/bUnit#1175

Hi,

I downloaded the Telerik UI for Blazor Trial (version 2.25.0) and I'm investigating the "paste-from-excel" demo (first one I have to go through) from GitHub paste-from-excel (.Net 5.0). Unfortunately I get the following runtime errors (see screenshot).

I'm using:

VS 2019 Enterprise 16.10.2
Chrome 91.0.4472.124
Does anyone know how to fix it?

I would really appreciate any help because I'm far from saying to upper management that this is the right library for us.

Thanks in advance

Hello team;

Today we had a community standup with one of ASP lead and he said the new Preview 2 of VS2019 is out today that solves many problems with Blazor Preview 4.
There should be a notification in your VS19 to install preview 2.

For the next round of the live demo, I suggest to change the .cshtml extension of pages to .razor to stay current with MSFT naming. This way, visitors don't get confused with the older version of Blazor.

Hello Team;

I noticed in the Blazor docs that said:

Event handlers can also be asynchronous and return a Task. There's no need to manually call StateHasChanged(). Exceptions are logged when they occur.

Which according to another statement somewhere in the forum I read that the EventHandler does an "Implicit" call to to StateHasChanged() method.

In your demos, I see that still being called in the event handlers. I commented out a few (like in grid samples) and everything worked.
I thought I share this new change with the team.

Thanks!
..Ben

Hello;
I've just installed Telerik Blazor by downloading the package from
https://www.telerik.com/download-trial-file/v2-b/ui-for-blazor.
And saved it to my desktop
Then in the nuget I had to create a new entry for telerik.com and point it to my desktop and do update first. like the following:

After that I followed setting up the project. Then in my home page, I pasted the grid example:

when I run the app, I get the following error:

Unhandled exception rendering component: Cannot provide a value for property 'DataSource' on type 'Telerik.Blazor.Components.Grid.TelerikGrid1[[System.Object, System.Private.CoreLib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]'. There is no registered service of type 'Telerik.Blazor.Data.ITelerikDataSource'. System.InvalidOperationException: Cannot provide a value for property 'DataSource' on type 'Telerik.Blazor.Components.Grid.TelerikGrid1[[System.Object, System.Private.CoreLib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]'. There is no registered service of type 'Telerik.Blazor.Data.ITelerikDataSource'.

Have I done something wrong with the install or is this a bug?

Manage Products page

• Add Notification component for successfully adding or deleting products
• Add Notification for Failed update / load
• Add delete confirmation
• Add localization

Work on live stream 3-12-2021 12ET

twitch.tv/edcharbeneau

Bug report

Reproduction of the problem

1. Open URL Blazor TabStrip Demos - Overview | Telerik UI for Blazor.
2. After invoking to the URL Navigate to the page by tab key
3. Navigate to the sofia tab list by tab key
4. Observe the issue, after pressing the next tab key, the focus is moving to the entire section of non-interactive elements.

Current behavior

Focus is moving to the entire section which is non interactive while navigating with tab key, after sofia item.

Expected/desired behavior

When invoking with Tab key focus should move to the next interactive element i.e Telerik UI for Blazor link, not on to the entire section of sofia tab.

Environment

• Telerik UI for Blazor version: 4.2.0
• Browser: Edge Version: 118.0.2088.76 (Official build) (64-bit)

Attachments:
Edad bug video.webm

Everything looks good but unable to implement your profile page and login in page to built blazer identity

Bug report

For Support request - Please do not submit support request here, instead see the Telerik UI for Blazor forums or our support system at Telerik.com !

For Feature Requests - please submit those into our feedback portal

Reproduction of the problem

(bug report only)
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem by referencing a sample project.

Current behavior

(optional)
Provide additional information if the steps for reproducing the faulty behavior are not sufficient to describe the issue.

Expected/desired behavior

Explain what the expected behavior of the functionality is

Environment

• Telerik UI for Blazor version: x.y.z
• Browser: [all | Chrome XX | Firefox XX | Edge XX]
• App Type [server | client]

So, we got the announcement today that .Net core 3 preview 4 is out. So I installed the new preview, then installed VS19 Preview and according to the instructions from Dan Roth, I had to run the following command to install the Blazor (client side) template into VS19.

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview4-19216-03
However, I got error that was related to the Telerik Nuget that I already had in my VS system.
So I went to NuGet Settings and deleted the entry for telerik.com and it's nuget source. Then ran the above command and worked fine.

So I thought I share this with you, where for the next few previews, people may encounter such problem. I suppose once you have a new update for Preview 4, I can then go back and create a new Package source that will point to
https://nuget.telerik.com/nuget

Hope this info helps!
..Ben

Looking at the demo codes (razor pages) I see some pages like Calendar.razor uses both Telerik.Blazor namespace and the fully defined namespace for the Calendar
@using Telerik.Blazor
@using Telerik.Blazor.Components.Calendar

And in most other samples I only see the fully defined namespace for that component and not the Telerik.Blazor.

This has got me confused, as my thinking was Telerik.Blazor is the core component that ALL components use & share and then each component, i.e. Calendar has extra features and that's why we need to include it as using statement. But I find some inconsistency across some of the pages I was looking at.

What namespace hierarchy are being used with Telerik framework?
Perhaps the answer should also be in the docs to make it easier what using statement we should be using.
If I have missed it, please let me know.

Thanks!
..Ben

Is there a way to select a row on click and handle the event?
I’d like to change the background color of the selected row.

Fixed: there is a comment in README. I should have read it carefully.
Thansk

Receiving the following error

NU1605 Detected package downgrade: Microsoft.NETCore.Platforms from 3.0.0-preview4.19120.16 to 3.0.0-preview3.19128.7. Reference the package directly from the project to select a different version.

TelerikBlazor.Server -> TelerikBlazor.Client -> Telerik.UI.for.Blazor 0.3.0 -> Microsoft.Extensions.DependencyInjection 3.0.0-preview4.19121.1 -> Microsoft.NETCore.Platforms (>= 3.0.0-preview4.19120.16)
TelerikBlazor.Server -> Microsoft.NETCore.Platforms (>= 3.0.0-preview3.19128.7) TelerikBlazor.Server C:\Users\angel\Downloads\ui-for-blazor-examples-master\TelerikBlazor.Server\TelerikBlazor.Server.csproj 1