Questions on UI for Blazor Forum

1 answer

212 views

Finally updated to the telerik blazor 2.9.0 release, but now the combobox does not bind to the model correctly. The best error is "WASM: Microsoft.JSInterop.JSException: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'."

The markup from the razor form:

<TelerikComboBox Data="@SelectableClaims" TItem="ClaimModel" TValue="int" ValueField="Number" Placeholder="Claim #" ClearButton="true" Width="150px" TextField="Name" ValueChanged="@((int num) => SelectClaim(claim, num))"></TelerikComboBox>

However, I tried the telerik code in the documentation, it produces the same error. The full error is reproduced below.

blazor.webassembly.js:1 WASM: Unhandled exception rendering component:
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: Microsoft.JSInterop.JSException: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM: TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at e.value (https://kendo.cdn.telerik.com/blazor/2.8.0/telerik-blazor.min.js:38:23963)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at new e (https://kendo.cdn.telerik.com/blazor/2.8.0/telerik-blazor.min.js:38:20476)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at r (https://kendo.cdn.telerik.com/blazor/2.8.0/telerik-blazor.min.js:1:6519)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at Object.r (https://kendo.cdn.telerik.com/blazor/2.8.0/telerik-blazor.min.js:38:18001)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at https://localhost:5001/_framework/blazor.webassembly.js:1:9740
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at new Promise (<anonymous>)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at Object.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.webassembly.js:1:9709)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at _mono_wasm_invoke_js_marshalled (https://localhost:5001/_framework/wasm/dotnet.3.2.0-preview2.20159.2.js:1:162942)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at do_icall (wasm-function[6008]:0x10e0aa)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:     at do_icall_wrapper (wasm-function[1886]:0x51cc2)
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:   at System.Threading.Tasks.ValueTask`1[TResult].get_Result () <0x3031c70 + 0x0002c> in <filename unknown>:0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:   at Telerik.Blazor.Components.Popup.TelerikPopupBase.OnAfterRenderAsync (System.Boolean firstRender) <0x3716860 + 0x00124> in <filename unknown>:0
p.printErr @ blazor.webassembly.js:1
blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask (System.Threading.Tasks.Task taskToHandle) <0x2f484a8 + 0x000c2> in <filename unknown>:0

ComboBox

answered on 27 Mar 2020

3 answers

3.7K+ views

right alignment

Is there a way to right align the text in both edit and display modes?

Thanks … Ed

NumericTextBox

answered on 27 Mar 2020

4 answers

3.5K+ views

Combobox in Grid Column

Hey everyone!

I'm currently focusing a lot on creating components and pages with the help of Telerik Blazor UI.
One problem/question that poped-up recently is the following :

I've been trying to include a Telerik Combobox inside a grid to limit the user to a set of values when creating a new row.

I've been trying to do so with the Template component like the following :

<GridColumn Field="@nameof(ConfigDefinitionsPatins.Face)" Title="Face">

<Template Context="ctxPatin">

@{

var patin = ctxPatin as ConfigDefinitionsPatins;

<TelerikComboBox Value="patin.Face" Data="patin.Face" Placeholder="Sur le ..." TextField="@nameof(ConfigDefinitionsPatins.Face)" Id="face">

</TelerikComboBox>

}

</Template>

</GridColumn

But here's the result comes out negative. You can have a look at the attached file.

What am I doing wrong?

Thanks in advance and stay safe!

Grid

answered on 25 Mar 2020

5 answers

153 views

Version 2.9 problem

Hi,

I upgraded my project to Blazor WebAssembly 3.2.0 Preview 2

blazor.webassembly.js:1 WASM: TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

at e.value (/_content/telerik.ui.for.blazor/js/telerik-blazor.js:38:23963)
at new e (/_content/telerik.ui.for.blazor/js/telerik-blazor.js:38:20476)
at r (/_content/telerik.ui.for.blazor/js/telerik-blazor.js:1:6519)
at Object.r (/_content/telerik.ui.for.blazor/js/telerik-blazor.js:38:18001)
at /_framework/blazor.webassembly.js:1:9740
at new Promise (<anonymous>)
at Object.beginInvokeJSFromDotNet (/_framework/blazor.webassembly.js:1:9709)
at _mono_wasm_invoke_js_marshalled (/_framework/wasm/dotnet.3.2.0-preview2.20159.2.js:1:162942)

General Discussions

answered on 24 Mar 2020

1 answer

244 views

Get ID of parent (FK) on Create

Hey everyone!

I'm currently focusing a lot on creating components and pages with the help of Telerik Blazor UI.

One problem/question that poped-up recently is the following :

Let's say I have a Multi-Hierarchy grid reprensenting Orders with a list of Products for each. If i'm adding a product using a grid command column, how do i manage to get the ID of the Order under which the product was added?

Thanks in advance and stay safe!

Grid

answered on 24 Mar 2020

1 answer

709 views

Using TelerikWindow with colspan

I followed the default grid popup example with custom form but I'm stuck with a horizontal form. I need to manage column spanning with in the form elements (Bootstrap 4 + Kendo Material) so that fields with longer values can be displayed easily:

<TelerikWindow Visible="@(SelectedProject != null)" Modal="true">

<WindowTitle>

@{

if (!string.IsNullOrWhiteSpace(SelectedProject?.ProjectNumber))

{

<strong>Project @SelectedProject.ProjectNumber</strong>

}

else

{

<strong>View Project</strong>

}

</WindowTitle>

<WindowContent>

<EditForm Model="@SelectedProject" OnValidSubmit="@SaveProject" class="k-form">

<DataAnnotationsValidator />

<fieldset>

<legend>Project Details</legend>

<div class="form-row">

<div class="col">

<TelerikTextBox @bind-Value="@SelectedProject.ProjectNumber" Label="Project Number" Width="100%"></TelerikTextBox>

</div>

<div class="col">

<TelerikTextBox @bind-Value="@SelectedProject.ProjectName" Label="Name" Width="100%"></TelerikTextBox>

</div>

<div class="col">

</div>

<div class="col">

</div>

<div class="form-row">

<div class="col">

<TelerikTextBox @bind-Value="@SelectedProject.ProgrammeSponsor" Label="Sponsor" Width="100%"></TelerikTextBox>

</div>

<div class="col">

<TelerikTextBox @bind-Value="@SelectedProject.ProgrammeLead" Label="Lead" Width="100%"></TelerikTextBox>

</div>

<div class="col">

<TelerikTextBox @bind-Value="@SelectedProject.ProjectManager" Label="Manager" Width="100%"></TelerikTextBox>

</div>

<div class="col">

</div>

<div class="form-row">

<div class="col">

<TelerikTextBox @bind-Value="@SelectedProject.Status" Label="Status" Width="100%"></TelerikTextBox>

</div>

<div class="col">

<TelerikTextBox @bind-Value="@SelectedProject.Funding" Label="Fund" Width="100%"></TelerikTextBox>

</div>

<div class="col">

<TelerikTextBox @bind-Value="@SelectedProject.Gate" Label="Gate" Width="100%"></TelerikTextBox>

</div>

<div class="col">

<TelerikTextBox @bind-Value="@SelectedProject.DaDeliveryStage" Label="DA Status" Width="100%"></TelerikTextBox>

</div>

</fieldset>

<fieldset>

<legend>Additional</legend>

<div class="form-row">

<div class="col">

<TelerikTextBox @bind-Value="@SelectedProject.ProjectNumber" Label="Project Number"></TelerikTextBox>

</div>

<div class="col">

<TelerikTextBox @bind-Value="@SelectedProject.ProjectName" Label="Name"></TelerikTextBox>

</div>

</fieldset>

<fieldset>

<legend>Team Preferences</legend>

<div class="form-row">

<div class="col">

<TelerikTextBox @bind-Value="@SelectedProject.ProjectNumber" Label="Project Number"></TelerikTextBox>

</div>

<div class="col">

<TelerikTextBox @bind-Value="@SelectedProject.ProjectName" Label="Name"></TelerikTextBox>

</div>

</fieldset>

<div class="form-row">

<ValidationSummary />

<TelerikButton Icon="save" Primary="true" ButtonType="@ButtonType.Button">Close</TelerikButton>

</div>

</EditForm>

</WindowContent>

</TelerikWindow>

In order to show field evenly, I added empty col-divs. But I want to merge instead. For example, the first row, I want ProjectName to span three columns. I have a rather condensed form requirement here.

Grid

answered on 24 Mar 2020

2 answers

753 views

Problem with TelerikComboBox and NullReferenceException

Hello,

I have setup a ServerSide Blazor Project. I have tried many different options by i always get NullReferenceException.

My Blazor html

<TelerikComboBox Data="@ProductsList" Value="@Filters.ProductId"

Placeholder="Επιλογή Project"

TextField="Title"

ValueField="Id"

Id="CbProject"

ValueChanged="@( (System.Guid? id) => ProjectSelected2(id) )">

</TelerikComboBox>

My exception

NullReferenceException: Object reference not set to an instance of an object.

Telerik.Blazor.Components.RootComponent.TelerikRootComponentFragmentBase.Dispose()

Microsoft.AspNetCore.Components.Rendering.ComponentState.Dispose()

Microsoft.AspNetCore.Components.RenderTree.Renderer.Dispose(bool disposing)

Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)

Microsoft.AspNetCore.Components.RenderTree.Renderer.Dispose(bool disposing)

Microsoft.AspNetCore.Components.RenderTree.Renderer.Dispose()

Microsoft.AspNetCore.Mvc.ViewFeatures.StaticComponentRenderer.PrerenderComponentAsync(ParameterView parameters, HttpContext httpContext, Type componentType)

Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.PrerenderedServerComponentAsync(HttpContext context, ServerComponentInvocationSequence invocationId, Type type, ParameterView parametersCollection)

Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.RenderComponentAsync(ViewContext viewContext, Type componentType, RenderMode renderMode, object parameters)

Microsoft.AspNetCore.Mvc.TagHelpers.ComponentTagHelper.ProcessAsync(TagHelperContext context, TagHelperOutput output)

Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner.<RunAsync>g__Awaited|0_0(Task task, TagHelperExecutionContext executionContext, int i, int count)

AspNetCore.Views__Blazor_Index.ExecuteAsync() in Index.cshtml

+

<component type="typeof(CenterConsole.Blazor.Pages.App)" render-mode="ServerPrerendered" />

Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context) Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, bool invokeViewStarts) Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context) Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, string contentType, Nullable<int> statusCode) Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, string contentType, Nullable<int> statusCode) Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ActionContext actionContext, IView view, ViewDataDictionary viewData, ITempDataDictionary tempData, string contentType, Nullable<int> statusCode) Microsoft.AspNetCore.Mvc.ViewFeatures.ViewResultExecutor.ExecuteAsync(ActionContext context, ViewResult result) Microsoft.AspNetCore.Mvc.ViewResult.ExecuteResultAsync(ActionContext context) Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeResultAsync>g__Logged|21_0(ResourceInvoker invoker, IActionResult result) Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|29_0<TFilter, TFilterAsync>(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted) Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context) Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext<TFilter, TFilterAsync>(ref State next, ref Scope scope, ref object state, ref bool isCompleted) Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeResultFilters>g__Awaited|27_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted) Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|24_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted) Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context) Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted) Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeFilterPipelineAsync>g__Awaited|19_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted) Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker) Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)

....

.

ComboBox

answered on 24 Mar 2020

3 answers

362 views

Drag & Drop Events

Hi,

I don't see listed any support to have drop events on the scheduler. I have a requirement where I have a list of things (lets say tasks) and they need to be allocated to days. I did create a day list component but thought a week view calendar maybe a better end user experience.

Can I have a list of things on the right and be able to drop them onto the calendar at a specific date and get the relevant task attributes so that I can update the record in the persistence layer to assign that task to the date?

Even just a simple demo to point me in the right direction would be handy. If this is not possible I will continue on my own component that uses a list and the user "selects" the active day and marks items in the grid and clicks an "add" button to assign those tasks to the selected day.

Scheduler