Questions on UI for Blazor Forum

5 answers

154 views

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

246 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

711 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

759 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

365 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

116 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

333 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

614 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

1 answer

98 views

Components with Javascript turned off

Will a Visual Studio created project using the Telerik extensions still require javascript to run in the browser. I'm trying this out with the server-hosted Blazor project and it does not seem to carry out the button action when Javascript is turned off. The following code is what is running on the Index.razor page in the generated app.

--------------------------------------------------------------------------------------------------------------------------------------------------------

<TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton>

<br />

@helloString

@code {
MarkupString helloString;

void SayHelloHandler()
{
string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
helloString = new MarkupString(msg);
}

General Discussions

answered on 20 Mar 2020

9 answers

1.3K+ views

Grid Filtering

Hi,

in the demo https://demos.telerik.com/blazor-ui/grid/filtering an extra filter row is always shown and the possible filter operators (==, !=, >, < , ...) are missing. How can I filter age > 40?

I need a filter similar to the Kendo UI grid: Filter button in column header and extra filter popup window with all operators, similar https://dojo.telerik.com/oQIyaHuD . Is that possible?

Best regards,

Peter

General Discussions

answered on 19 Mar 2020