Questions on UI for Blazor Forum

1 answer

1.6K+ views

I've created a simple dashboard using the Dashboard Project Template and was wondering what's the best approach to having the dashboard update either on a timed basis or data being updated?

Should each Blazor Component handle it's own refresh or should we look at doing this at layout level?

Cheers

Charts

answered on 23 Nov 2020

1 answer

307 views

Ctrl+Click -> New Tab

I've been testing the Telerik Blazor out and one thing that seems to be missing is the ability to Ctrl+Click to open items in a new tab.

Is there a way to use OnClick with event args so you can see if ctrl+click was used?

Menu

answered on 20 Nov 2020

2 answers

473 views

Date category - cannot get date value in tooltip

Hi,

This is a bit weird, and it might even be a framework problem. I have a date series line chart which has a date category axis and a numeric value axis. It's all working fine. I wanted to add a tooltip template so that when the user hovers over a point it shows the date and the value. I can display the value fine, but the date is always set to DateTime.MinValue for some odd reason.

My class is called UiVami and looking at my code, I can see the list of values is being created OK. Nowhere else do I ever change the Date value. In an attempt to debug it, I changed my class to have immutable properties with a constructor that throws an exception when the DateTime passed in is equal to DateTime.MinValue. This exception is being hit when I hover the mouse over a point - suggesting that something in the grid/framework is creating a new UIVami and setting the DateTime to null!

public class UiVami

{

public DateTime Date { get; }

public decimal Value { get; }

public UiVami(DateTime date, decimal value)

{

if (date == DateTime.MinValue)

{

throw new Exception("arrgh");

}

Date = date;

Value = value;

}

I'm actually binding via this type which contains a list of of VAMIs:

public class UiVamiSet

{

public string InstrumentName { get; set; }

public List<UiVami> Vamis { get; set; }

}

Here's my code for the chart:

<TelerikChart @ref="@_vamiChart" Width="100%" Height="100%">

<ChartSeriesItems>

@foreach (var vamiSet in _uiVamiSets)

{

<ChartSeries Type="ChartSeriesType.Line" Name="@vamiSet.InstrumentName"

Field="@nameof(UiVami.Value)" CategoryField="@nameof(UiVami.Date)"

Data="@vamiSet.Vamis">

<ChartSeriesMarkers Visible="false"></ChartSeriesMarkers>

<ChartSeriesTooltip Visible="true">

<Template>

@{ var dataItem = context.DataItem as UiVami; }

<div>

<strong>@vamiSet.InstrumentName</strong>

</div>

<div>

@dataItem.Date - @dataItem.Value

</div>

</Template>

</ChartSeriesTooltip>

</ChartSeries>

}

</ChartSeriesItems>

<ChartValueAxes>

<ChartValueAxis NarrowRange="true">

</ChartValueAxis>

</ChartValueAxes>

<ChartCategoryAxes>

<ChartCategoryAxis Type="ChartCategoryAxisType.Date">

<ChartCategoryAxisLabels Step="3">

<ChartCategoryAxisLabelsRotation Angle="-45" />

</ChartCategoryAxisLabels>

</ChartCategoryAxis>

</ChartCategoryAxes>

<ChartTitle Text="Fund Performance"></ChartTitle>

<ChartLegend Position="ChartLegendPosition.Bottom">

</ChartLegend>

</TelerikChart>

Any help appreciated!
Thanks.

Charts

answered on 19 Nov 2020

3 answers

136 views

Searching in FilterRow with Template for foreign value

Hi there,

We are currently evaluating Telerik UI for Blazor. We are creating a component which uses the Grid to show data of type A. The class for type A has a foreign ID reference to type B. Right now we are showing the display name for this foreign value using the <Template> tag. This works great, but when searching using the Grid's FilterRow it seems the Grid is still searching in the foreign ID instead of its display name.
I've tried using FilterDescriptors as per the documentation, but unfortunately did not get this to work.

King regards,
Davin

Grid

answered on 19 Nov 2020

11 answers

309 views

OnSuccess not being called when response body is large

I have implemented the upload control to allow user's to upload a new avatar to their profile. In my SaveUrl I convert their uploaded file to a base64 string and return that string as the body of the Request's response. The problem is that the OnSuccess action is never called when I come back. If i simply return a blank string (or something short like "Hello World", it is called just fine, so the problem appears to be that the base64 string is rather long. I have not figured out why this is happening. Any help would be appreciated.

[HttpPost("saveavatar")]

[DisableRequestSizeLimit]

public async Task<IActionResult> SaveAvatar(IFormFile avatar)

{

string returnString = null;

if (avatar != null)

{

using var stream = new MemoryStream();

await avatar.CopyToAsync(stream);

byte[] croppedImageBytes = imageHelper.ScaleImage(stream, 80, 100, ImageFormat.Png);

string avatarBase64 = Convert.ToBase64String(croppedImageBytes);

returnString = $"data:image/png;{avatarBase64}";

}

return Content(returnString);

}

private void OnAvatarSuccess(UploadSuccessEventArgs e)

{

string content = e.Request.ResponseText;

if (e.Operation == UploadOperationType.Upload)

{

staffMember.Avatar = content;

}

Upload

answered on 18 Nov 2020

6 answers

1.0K+ views

[Solved] Bug? AutoComplete inside EditForm - infinite loop with OnParametersSet

Hi, I'm trialling the latest version at the moment (v2.15.0) with a WebAssembly project and I've encountered an odd issue.

Essentially, when I have a component with a Guid parameter, and a TelerikAutoComplete component inside an EditForm there's some kind of render loop happening on the page. The browser tools show the DOM being updated constantly and the OnParametersSet override is being called constantly. Tested in MS Edge 83.

Moving the AutoComplete outside the EditForm or changing the parameter to something else such as an Int32 causes the issue to no longer present itself.

Not sure if this is being caused by the Telerik component or a bug in Blazor itself, but I imagine it's a fairly common scenario.

Simple reproduction code below.

@page "/customers/test/{Parameter1:guid}"

@if (Model != null)

{

<EditForm Model="Model">

<TelerikAutoComplete Data="@Fruit"

Filterable="true"

@bind-Value="@Model.SelectedFruit"

ValueField="@(nameof(SimpleObject.DisplayName))" />

</EditForm>

}

@code {

[Parameter]

public Guid Parameter1 { get; set; }

public SimpleTestModel Model { get; set; }

public IEnumerable<SimpleObject> Fruit { get; set; }

protected override async Task OnInitializedAsync()

{

await Task.Delay(100);

this.Fruit = new SimpleObject[]

{

new SimpleObject(1, "Lemon"),

new SimpleObject(2, "Orange"),

new SimpleObject(3, "Kiwi")

};

}

protected override async Task OnParametersSetAsync()

{

Console.WriteLine("ParametersSet");

await Task.Delay(100);

this.Model = new SimpleTestModel();

}

public class SimpleTestModel

{

public string SelectedFruit { get; set; }

}

public class SimpleObject

{

public SimpleObject(int id, string name)

{

this.Id = id;

this.DisplayName = name;

}

public int Id { get; set; }

public string DisplayName { get; set; }

}

AutoComplete

answered on 17 Nov 2020

8 answers

1.0K+ views

[Solved] Individual cell back color

Hi,

I'd like to be able to set the backcolor on a cell by cell basis. I think the way is to do this with a template, but I don't know how to get the <td> element to style.

Any pointers would be greatly appreciated.

Thanks .. Ed

Grid

answered on 16 Nov 2020

3 answers

276 views

[Solved] Telerik Blazor Application Template JavaScript Error in Edge

I created a new project as follows:

Telerik C# Blazor Application, Hosting Model Type: Web Assembly, Target Framework .NET 5.0, CRUD, Form, Chart

Before making any changes, I tried to run it. It works in Chrome, but in Edge the page only shows:

Loading...

In the browser's Developer Tools I see:

Syntax error in blazor.webassembly.js

I'm using Visual Studio Community 2019 version 16.9.0 Preview 1.0.

Any idea how to resolve this?

Thanks,

Tim

General Discussions

answered on 16 Nov 2020

2 answers

109 views

UpdateHandler does not get triggered when entering first value in grid

Hi,

now I discovered another Problem depending on my last Thread: https://www.telerik.com/forums/avoid-multiple-calls-of-async-updatehandler-when-pressing-enter

Your solution works fine as long as I do not enter the very first value in my grid and it makes no difference which row is changed.
When I enter the first value then the UpdateHandler does not get triggered. Only my ChangeHandler.

Do you have an idea why this is happening?

Grid

answered on 15 Nov 2020

3 answers

2.0K+ views

[Solved] Dropdowns within column template

What is the best way to handle dropdowns sitting in a grid within a column template?

@bind-Value doesn't work well because it sets the selected value of every dropdown in the grid.

I want to be able to send the class object from the current row in the grid to a method on dropdown change, and also know what the new value is of the dropdown.

DropDownList

answered on 13 Nov 2020