Questions on UI for Blazor Forum

2 answers

390 views

Grid changes pages after selecting new row

I'm having a problem with selecting a row after changing pages that is reproducible with the attached code.

To reproduce, click on any row on the first page, 'Employee 5' for example.

Once 'Employee 5' is highlighted, navigate to page 4 using the selector at the bottom.

On page 4, click on 'Employee 35'. The grid will immediately jump back to page 1. If you return to page 4 you will see that 'Employee 35' is selected (highlighted), it just didn't stay on that page. Is this a bug or am I doing something wrong?

@page "/gridtest"

@inject IJSRuntime JsInterop

<TelerikGrid Data=@GridData

Page="currentPage"

SelectionMode="GridSelectionMode.Single"

@bind-SelectedItems="SelectedItems"

Pageable="true" PageSize="10"

Height="500px"

Class="@theGridClass">

<GridColumns>

<GridColumn Field=@nameof(Employee.Name) />

<GridColumn Field=@nameof(Employee.Team) Title="Team" />

</GridColumns>

</TelerikGrid>

<div class="row justify-content-center" style="margin-top:5px;">

<TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => SelectItem(1, 5))">Select 5</TelerikButton>

<TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => SelectItem(2, 15))">Select 15</TelerikButton>

<TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => SelectItem(3, 25))">Select 25</TelerikButton>

<TelerikButton ButtonType="ButtonType.Button" OnClick="@(() => SelectItem(4, 35))">Select 35</TelerikButton>

</div>

@code {

string theGridClass { get; set; } = "theSpecialGrid";

int currentPage = 1;

async Task SelectItem(int page, int rowId)

{

// Select Grid Page

currentPage = page;

// Select Row

SelectedItems = GridData.Where(item => item.EmployeeId == rowId).ToList();

await Task.Delay(20);//rougly one rendering frame so this has the chance to render in the browser

await JsInterop.InvokeVoidAsync("scrollToSelectedRow", "." + theGridClass);

}

public List<Employee> GridData { get; set; }

public IEnumerable<Employee> SelectedItems { get; set; } = Enumerable.Empty<Employee>();

protected override void OnInitialized()

{

GridData = new List<Employee>();

for (int i = 0; i < 55; i++)

{

GridData.Add(new Employee()

{

EmployeeId = i,

Name = "Employee " + i.ToString(),

Team = "Team " + i % 3

});

}

public class Employee

{

public int EmployeeId { get; set; }

public string Name { get; set; }

public string Team { get; set; }

}

Grid

answered on 27 Mar 2020

1 answer

257 views

[Solved] ComboBox breaks when binding to model

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.9K+ 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.8K+ views

[Solved] 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

182 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

322 views

[Solved] 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

818 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

829 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

438 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