Questions on UI for Blazor Forum

1 answer

326 views

In my opinion there is an error in the date picker component.

When I enter manually a date below the min value then the binded value is set to null but in the input field the wrong date is not cleared

(See Screenshot).

You can reproduce it by the DatePicker - Overview Demo:

1. Enter 01.01.1950

2. Click on the year and use the arrow down button to set 1949. The value is set to null and the input field is cleared.

3. Click on dd and set day to 01. Value 01.01.1949 is shown.

4. Click outside the date picker. Value is null but input shows 01.01.1949.

Please let me know whether this is a known issue and you intend to fix it.

DatePicker

answered on 13 Dec 2022

1 answer

264 views

PDFViewer Print from PrintButton different to printing PDF

When printing from the print button on the PDF viewer (on Edge or Chrome), the print is inconsistent with printing the downloaded document.

It seems to be printing an image of a web page containing the PDF rather an actually printing the PDF document

In particular, when printing from the button:

The print quality is visibly lower (printing is more gray than black).
The document extents are smaller on the page.
In some cases, the document prints across more pages than the actual PDF (e.g. 3 pages, when document is 1 page)
If Chrome header options are on, the page shows web page printing headers and footers as well.

Is this intended behaviour, or are there ways to modify this?

We'd like to use the control, as it removes the need for JavaScript code used in our current control, but the print quality probably precludes using it at the moment.

Thanks

Tim McMaster

PDFViewer

answered on 13 Dec 2022

1 answer

254 views

How to prevent Event Bubbeling in Panelbar

Hi,

I have some additional Controls in a PanelBar-Header-Template. Anytime when I click on a Control the Event bubbles to the PanelbarHeader and opens the panel.

How can I prevent this bubbeling?

As you see, I tried to get rid of that with "stopPropagation". But you can imagine it doesn't work.

<TelerikPanelBar Data="@item.ColorsWithArticles"
                            @bind-ExpandedItems="@ExpandedItems"
                            OnExpand="@OnPanelBarExpand">
                            <PanelBarBindings>
                                <PanelBarBinding Level="0" ItemsField="Articles">
                                    <HeaderTemplate>
                                        @{
                                            var article = ((ColorAndArticlesItemVm)context);
                                            <div class="d-flex flex-row flex-wrap">
                                                <div class="p-1 border">
                                                    <img src="@article.Color.ColorImageUrl" alt="" style="width:28px; height:28px">
                                                </div>
                                                    <div onkeydown="stopPropagation(event)" onmousedown="stopPropagation(event)">
                                                        <TelerikTextBox @bind-Value="@StringValue" />
                                                    </div>
                                                </div>

<script suppress-error="BL9992">
    function stopPropagation(e) {
        e.stopPropagation();
    }
</script>

Thank you

PanelBar

answered on 13 Dec 2022

1 answer

169 views

Tooltip for text in TelerikEditor

Hello,

I have to mark some text in the TelerikEditor and I'm using span for that:

Anamnese <span class='code-marked' title='S52, S60, S63'>robert</span>, 14 år, V=50

I would like to have the "title" displayed as a tooltip but when I inspect the element in the TelerikEditor the "title" is removed.

Is there a way to use css or something similar to add tooltip for words in TelerikEditor? Is there any way to keep the "title" ?

TIA

Lucian

Editor

Tooltip

answered on 13 Dec 2022

1 answer

396 views

Text garbled in pdf viewer

I'm trying out the TelerikPdfViewer component in my Net7 Blazor Wasm project, but text PDFs open up with text that has missing parts.

Sample:

If I change the scale and change back using the zoom in/out buttons, the problem is fixed. But the garbled text appears at each first viewing for all scale stops.

I get this in Chrome and in Edge, browser scaling at 100%, desktop scaling at 100% but alternate scaling for both also still have the same issue.

PDFViewer

answered on 12 Dec 2022

1 answer

931 views

[Solved] Report Designer "telerikWebReportDesignerInterop.js" 404 error

I followed How to set up in Blazor application | Telerik Reporting

All done! But when it run i got an error "telerikWebReportDesignerInterop.js 404"

<script src="_content/telerik.webreportdesigner.blazor/telerikWebReportDesignerInterop.js" defer></script>

and in console show:

fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'Gyr8E4g_PwQHf7G2UKY2h3obMpujPfFp2x9i7dkB4oQ'.
      Microsoft.JSInterop.JSException: Could not find 'telerikWebReportDesignerInterop.createWebReportDesignerWidget' ('telerikWebReportDesignerInterop' was undefined).
Error: Could not find 'telerikWebReportDesignerInterop.createWebReportDesignerWidget' ('telerikWebReportDesignerInterop' was undefined).
    at https://localhost:5001/_framework/blazor.server.js:1:67713
    at Array.forEach (<anonymous>)
    at e.findFunction (https://localhost:5001/_framework/blazor.server.js:1:67673)
    at v (https://localhost:5001/_framework/blazor.server.js:1:69415)
    at https://localhost:5001/_framework/blazor.server.js:1:70361
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.server.js:1:70334)
    at https://localhost:5001/_framework/blazor.server.js:1:26441
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:26411)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Telerik Reporting 15.1.21.616

<PackageReference Include="Telerik.Reporting.Services.AspNetCore" Version="15.1.21.616" />
<PackageReference Include="Telerik.Reporting.OpenXmlRendering" Version="15.1.21.616" />
<PackageReference Include="Telerik.ReportViewer.Blazor" Version="15.1.21.616" />
<PackageReference Include="Telerik.WebReportDesigner.Blazor" Version="15.1.21.616" />
<PackageReference Include="Telerik.WebReportDesigner.Services" Version="15.1.21.616" />

Startup.cs

namespace CSharp.Net5.BlazorIntegrationDemo
{
    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;
    using Microsoft.Extensions.DependencyInjection.Extensions;
    using Microsoft.Extensions.Hosting;
    using System;
    using Telerik.Reporting.Cache.File;
    using Telerik.Reporting.Services;
    using Telerik.WebReportDesigner.Services;

    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            this.Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllers();

            services.AddRazorPages()
                .AddNewtonsoftJson();
            services.AddServerSideBlazor();

            // Configure dependencies for ReportsController.
            services.TryAddSingleton<IReportServiceConfiguration>(sp =>
                new ReportServiceConfiguration
                {
                    ReportingEngineConfiguration = sp.GetService<IConfiguration>(),
                    HostAppId = "Net5BlazorDemo",
                    Storage = new FileStorage(),
                    ReportSourceResolver = new UriReportSourceResolver(System.IO.Path.Combine(sp.GetService<IWebHostEnvironment>().ContentRootPath, "..", "..", "..", "..", "Report Designer", "Examples")),
                });

            // Configure dependencies for ReportDesignerController.
            services.TryAddSingleton<IReportDesignerServiceConfiguration>(sp => new ReportDesignerServiceConfiguration
            {
                DefinitionStorage = new FileDefinitionStorage(
                    System.IO.Path.Combine(sp.GetService<IWebHostEnvironment>().ContentRootPath, "..", "..", "..", "..", "Report Designer", "Examples")),
                SettingsStorage = new FileSettingsStorage(
                    System.IO.Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "Telerik Reporting")),
                ResourceStorage = new ResourceStorage(
                    System.IO.Path.Combine(sp.GetService<IWebHostEnvironment>().ContentRootPath, "..", "..", "..", "..", "Report Designer", "Examples", "Resources"))
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
            }

            app.UseStaticFiles();
            app.UseRouting();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });
        }

        /// <summary>
        /// Loads a reporting configuration from a specific JSON-based configuration file.
        /// </summary>
        /// <param name="environment">The current web hosting environment used to obtain the content root path</param>
        /// <returns>IConfiguration instance used to initialize the Reporting engine</returns>
        static IConfiguration ResolveSpecificReportingConfiguration(IWebHostEnvironment environment)
        {
            // If a specific configuration needs to be passed to the reporting engine, add it through a new IConfiguration instance.
            var reportingConfigFileName = System.IO.Path.Combine(environment.ContentRootPath, "reportingAppSettings.json");
            return new ConfigurationBuilder()
                .AddJsonFile(reportingConfigFileName, true)
                .Build();
        }
    }
}

WebReportDesignerDemo.razor

@page "/webreportdesigner"
@using Telerik.WebReportDesigner.Blazor

<style>
    #wrd1 {
        position: relative;
        height: 880px;
        padding-right: 50px;
    }
</style>

@* Create the WebReportDesignerWidget *@

<p>This Web Report Designer instance works with reports hosted locally using the Reporting REST service. For more information, visit the <a target="_blank" href="https://docs.telerik.com/reporting/web-report-designer">Web Report Designer</a> article.</p>
<WebReportDesigner DesignerId="wrd1"
                   ServiceUrl="/api/reportdesigner"
                   Report="Dashboard.trdp"
                   ToolboxArea="new ToolboxAreaOptions() { Layout = ToolboxAreaLayout.List }"
                   PropertiesArea="new PropertiesAreaOptions() { Layout = PropertiesAreaLayout.Categorized }" />

General Discussions

updated answer on 09 Dec 2022

0 answers

453 views

Blazor - Wizard / Wizard Stepper

I a working on an app that has x number of steps depending user configuration. I need to be able to call a service to load the model that I pass into the step. However, I have not had any success finding an event. I also tried using the OnInitialized within the component inside the step. But that has not worked either. Is there any event which will fire before the parameter is passed to the component within the step.

Note: I really want contain it within the step because I have no way of know which steps are available without some complex logic.

@if (WizardInfo.ShowIncomeDetails)
{
<WizardStep Label=@IncomeDetailsText
IconClass="fa-regular fa-calendar-day fa-xl"
OnChange="@IncomeDetailsOnChangeAsync"
Valid="@incomeDetailsIsValid">
<Content>
<TelerikForm Model="IncomeDetails"
ValidationMessageType="@FormValidationMessageType.Inline">
<FormValidation>
<FluentValidationValidator></FluentValidationValidator>
<ValidationSummary/>
</FormValidation>
<FormItems>
<IncomeDetails IncomeDetails="@IncomeDetails" @ref="@incomeDetailsComponent" />
</FormItems>
<FormButtons></FormButtons>
</TelerikForm>
</Content>
</WizardStep>
}

Wizard

asked on 09 Dec 2022

0 answers

158 views

Custom Batch Editing

Hello.

Can someone give me a complete example with Custom Batch Editing Grid? Like with a "real" API and CRUD operations?

My apps run under BLAZOR WEB ASSEMBLY.

Thanks a lot everyone.

Grid

updated question on 09 Dec 2022

1 answer

285 views

DropdownList popup behind top-layer

We have a custom control where we host a Google Map.
We created custom google map controls and placed it like google maps api requires.
Everything works fine when the control is normally displayed as shown here:

but when the user put the map in fullscreen mode, our dropdownlist can't be opened because the animation-container isn't placed within the hierarchy of the element hosting the map, causing the dropdownlist popup to be behind the "top-layer" element of the page.

Technically the problem is that when an element is set in fullscreen mode (but this happens even for HTML dialog elements and popup), the browser create a special layer where it places these elements (and their childrens).

In the case of dropdownlist, you create k-animation-container telerik-blazor elements straight under the app div, this mean that any dropdownlist (and i suppose combobox items and every component that has a "popup") can't be shown into fullscreen elements or HTML dialogs.

Is it possible to explicitly set the dropdownlist animation container where I want? How can I fix this problem without recreate a dropdownlist component?

Thanks

DropDownList