Questions on UI for Blazor Forum

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.7K+ 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

177 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

316 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

803 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

820 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

428 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

answered on 24 Mar 2020

1 answer

135 views

any other way to data bind than via @bind-Value?

Hello,

I am using Telerik DDL for Blazor (2.6.1).

For now it works as expected.

Right now, for what I could see, you can only databind to the selected VALUE (via bind-Value property).

Is there a way that I missed, to databind via the selected ITEM?

I use this code:

At the moment, I can only access to the prop1 property of the selected MyItem element (using @bind-Value).

I can obviously deduct the MyItem element from the collection via LinQ,

but I would definitelyprefer to have another binding property that directly returns the MyItem element to me.

In other words, something similar to the SelectedItem from MS components.

Is there a way to do that? If not, is it something that you plan to release in the future?

Thx in advance

A

DropDownList

answered on 23 Mar 2020

2 answers

361 views

Export from Grid?

Hi

Any way to export a Grid to Excel or PDF? Can it be used with Telerik Reporting?

thx

Grid

answered on 23 Mar 2020

1 answer

638 views

Dropdown in Command Column with Row Select

I would like to have a dropdown in the CommandColumn (or a column that is editable), but still be able to select the row from one of the other non-editable columns. This is for an action like setting the state of the record (completed, in-work, etc.), placing it in-line edit, or even deleting. It seems that you can have one or the other; in-cell editing, or row select. Am I missing something here? Maybe Templates in a CommandColumn would be the solution?

Grid

answered on 23 Mar 2020