Questions on UI for Blazor Forum

1 answer

103 views

I have a custom component which takes RenderFragment and displays it as ChildContent. I'm passing TelerikForm for ChildContent and getting such error: Unhandled exception rendering component: Specified cast is not valid.

Here's the custom component:

<div class="gg_wizard_step @(IndexInParent != ParentSection.CurrentStep ? "hidden" : "")">
    <CascadingValue Value="this">
        @ChildContent
    </CascadingValue>
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [CascadingParameter]
    public NLWizardSection ParentSection { get; set; }

    [Parameter]
    public int IndexInParent { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        ParentSection.AddChild(this);
    }
}

Here's the form added to custom component:

<NLWizardStep>
                <h3>@L["What is the name of your resource?"]</h3>
                <TelerikForm Model="@((NameForm)_currentForm)"
                             @ref="NameFormRef"
                             ValidationMessageType="FormValidationMessageType.Inline">
                    <FormValidation>
                        <DataAnnotationsValidator></DataAnnotationsValidator>
                        <CustomValidation></CustomValidation>
                    </FormValidation>
                    <FormItems>
                        <FormItem Field="@nameof(NameForm.Name)"></FormItem>
                    </FormItems>
                    <FormButtons></FormButtons>
                </TelerikForm>
</NLWizardStep>

Form

answered on 27 May 2024

1 answer

88 views

Blazor generate Javascript.

Hi

I want to know. What is control over javascript when you use Blazor.

If I create web application on blazor in 2024 and after few years is blazor generate new javascript version.is there any browser combability ?

Is Blazor generate new javascript version ?

king regards,

Manish

General Discussions

answered on 27 May 2024

0 answers

127 views

Telerik Grid when using AddInteractiveServerComponents - Can it be done?

DELETE THIS, DUMP QUESTION 😊

I have set render mode globally in App.razor

<Routes @rendermode="InteractiveServer" />
<!DOCTYPE html>
<html lang="en">

After I have done that, I get this error

InvalidOperationException: A second operation was started on this context instance before a previous operation completed. This is usually caused by different threads concurrently using the same instance of DbContext. For more information on how to avoid threading issues with DbContext, see https://go.microsoft.com/fwlink/?linkid=2097913.
Microsoft.EntityFrameworkCore.Infrastructure.Internal.ConcurrencyDetector.EnterCriticalSection()
Microsoft.EntityFrameworkCore.Query.Internal.SingleQueryingEnumerable<T>+AsyncEnumerator.MoveNextAsync()
System.Runtime.CompilerServices.ConfiguredValueTaskAwaitable<TResult>+ConfiguredValueTaskAwaiter.GetResult()
Microsoft.EntityFrameworkCore.EntityFrameworkQueryableExtensions.ToListAsync<TSource>(IQueryable<TSource> source, CancellationToken cancellationToken)
Microsoft.EntityFrameworkCore.EntityFrameworkQueryableExtensions.ToListAsync<TSource>(IQueryable<TSource> source, CancellationToken cancellationToken)
WhatsNew.Data.VersionRepository.GetApplicationsAsync() in VersionRepository.cs
+
    {
        _context = context;
    }
    
    public async Task<List<Applications>> GetApplicationsAsync()
    {
        return await _context.Applications.ToListAsync();
    }
    public async Task<Applications> GetApplicationByIdAsync(int id)
    {
        return await _context.Applications.FindAsync(id);
    }
WhatsNew.Server.Components.Pages.ApplicationsPage.OnInitializedAsync() in ApplicationsPage.razor.cs
+
    private List<Applications> applications = [];
    private Applications selectedApplication = new();
    private bool isEditMode;
    protected override async Task OnInitializedAsync()
    {
        applications = await VersionRepository.GetApplicationsAsync();
    }
    private void AddApplication()
    {
        selectedApplication = new Applications();
        isEditMode = true;
Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

This is how I register the repository

builder.Services.AddTransient<IVersionRepository, VersionRepository>();

So, what am I doing wrong?

Grid

updated question on 26 May 2024

1 answer

119 views

Grid Group Loading On Demand with inline edit

Hi,

https://docs.telerik.com/blazor-ui/components/grid/grouping/load-on-demand#virtual-scrolling-group-load-on-demand-and-server-side-data-operations

I've followed this example to implement grouping with loading on demand, however I'm having issues with the in line edit.

When selecting the edit button, the grid changes to show the update and cancel buttons however the value that was visible is no longer visible and instead the area becomes greyed out.

<TelerikGrid TItem="@object"
             LoadGroupsOnDemand="true"
             Groupable="false"
             OnStateInit="@((GridStateEventArgs<object> args) => OnStateInitHandler(args))"
             OnRead="@ReadItems"
             OnUpdate="@UpdateHandler"
             OnEdit="@EditHandler"
             ScrollMode="@GridScrollMode.Virtual"
             FilterMode="@GridFilterMode.FilterRow"
             EditMode="@GridEditMode.Inline"
             PageSize="20" RowHeight="60"
             Navigable="true" Sortable="true" Height="600px" >
    <GridColumns>
        <GridColumn Field=@nameof(SiteMappingDto.SiteName) Width="220px" Title="Site" Visible="false">
            <GroupHeaderTemplate>
                <span>Site : @context.Value</span>
            </GroupHeaderTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(SiteMappingDto.TagName)" Title="Tag" Editable="false" />
        <GridColumn Field="@nameof(SiteMappingDto.TagDescription)" Title="Description" Editable="false" />
        <GridColumn Field="@nameof(SiteMappingDto.MappingValue)" Title="Value" Editable="true" />
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

Grid

answered on 24 May 2024

3 answers

103 views

Can I get the X/Y Position of a mouse click on the chart area?

I am using a DateTime ChartSeries (ScatterLine). I would like to be able to click on the chart area at any point and get a XY position. Is there any way to do this?

Charts

answered on 22 May 2024

1 answer

196 views

Trying to convert an existing Blazor project to use Telerik components. Can not find Convert Project Wizard.

I'm trying to convert an existing Blazor project to use Telerik components. Following this article Convert Project Wizard but the Telerik UI for Blazor > Convert to Telerik Application menu option doesn't show up on either the project context menu or Extensions Menu in the Solution Explorer.

VS2022 V17.9.7

The fully licensed Telerik Extensions are installed in VS2022

The project file includes the package reference <PackageReference Include="Telerik.UI.for.Blazor" Version="6.0.0" />

How do I get the Convert Project Wizard?

Thanks

General Discussions

updated answer on 22 May 2024

1 answer

347 views

TelerikCard Click

Hi there,

Is there a way to handle the click anywhere on TelerikCard without wrapping it with a div and handling div.onclick?

Regards,

Igor

Card

answered on 22 May 2024

1 answer

518 views

Blazor UI v6.0.0 gives error after upgrade

If i revert to 2024 Q1 the error disappears...

2024-05-16 19:54:03,530 [ERROR] Unhandled exception in circuit 'S77usknbj_EFjppCUa4yC1LlVuSlrA3J5HkaJib6jRs'.
Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.initListView' ('initListView' was undefined).
Error: Could not find 'TelerikBlazor.initListView' ('initListView' was undefined).
at http://localhost:5242/_framework/blazor.server.js:1:734
at Array.forEach (<anonymous>)
at l.findFunction (http://localhost:5242/_framework/blazor.server.js:1:702)
at _ (http://localhost:5242/_framework/blazor.server.js:1:5445)
at http://localhost:5242/_framework/blazor.server.js:1:3238
at new Promise (<anonymous>)
at y.beginInvokeJSFromDotNet (http://localhost:5242/_framework/blazor.server.js:1:3201)
at Xt._invokeClientMethod (http://localhost:5242/_framework/blazor.server.js:1:61001)
at Xt._processIncomingData (http://localhost:5242/_framework/blazor.server.js:1:58476)
at Xt.connection.onreceive (http://localhost:5242/_framework/blazor.server.js:1:52117)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Telerik.Blazor.Components.TelerikListView`1.InitListView()
at Telerik.Blazor.Components.TelerikListView`1.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
2024-05-16 19:54:03,838 [WARN ] Unhandled exception rendering component: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Telerik.Blazor.Components.TelerikTextArea.SetJsValueAsync()
at Telerik.Blazor.Components.Common.TextBoxBase.OnAfterRenderInternalAsync(Boolean firstRender)
at Telerik.Blazor.Components.Common.TextBoxBase.OnAfterRenderAsync(Boolean firstRender)
at Telerik.Blazor.Components.TelerikTextArea.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

General Discussions

answered on 21 May 2024

1 answer

177 views

Info about DataSourceRequest.Page and DataSourceRequest.Skip attributes

Hi, i need to design a class to handle pagination in my api endpoints, so i have a question about 2 properties of DataSourceRequest.

Page: I assume it's used only in pagination to set the page number.

Skip: I assume it's used only on virtual pagination to define the records to skip.

I think this 2 properties as mutual exclusive (if used Page, Skip is ignored, if used Skip, Page is ignored).

Is this true or there are situations where are both used?

and if one exclude the other... why you have not handled the pagination only with Skip / Take properties (assumed who Take correspond to PageSize in classic pagination, Page can be calculated as (Skip / Take) + 1)?

i need this answers because if this properties are multual exclusive i assume i can design my pagination class with only 2 properties (Skip / Take) instead of 3 (Page / PageSize / Skip) as done in DataSourceRequest object.

Thanks

General Discussions

Grid

Pager

answered on 21 May 2024

0 answers

58 views

TelerikGrid search within a GroupDescriptor ?

Data has 6 columns, A, B, C with a value and a date.

AValue - double
ADate - datetime
BValue - double
BDate - datetime
CValue - double
CDate - datetime

Client requests that one of the 3 values A, B, C is chosen by drop down.

In a code-behind we group by a particular Value and then sort descending so that the highest value is on top of the grouping. Easy.

But then inside the grouping of Value are to be rows from the data that are not matched by Value but by a Search based on date range +- 5 minutes.

Example: client selects A

Grid groups by AValue and then sorts DESC
Inside Group[0] the client wants to Search all the GridData and display BValue and CValue that fall within a date range +- 5 minutes from Group[0].ADate

Right now I see SearchFilter inside the GridState class (for the whole Grid) but I think for what the client needs we would have a SearchFilter inside of GroupDescriptor (for that Group)?

Is this possible?

If that is not possible, would it be possible to use 1 GridData as the source for the Grid and another GridData as the source for the Grid that appears inside each grouping?

Note: for one row in the data, the max value may be A, B or C. But the date times in that row do not match up. They are 3 different date time values.

Grid

updated question on 20 May 2024