Questions on UI for Blazor Forum

3 answers

470 views

Hello, I'm having trouble getting nested grid and or column sizes to work.
If we use this as our example: https://docs.telerik.com/blazor-ui/components/grid/hierarchy

The nested grid, DetailTemplate, when expanded fills the row space as defined by the parent grid.

Even if I add Width parameters to the DetailTemplate Grid and GridColumn controls the DetailTemplate Grid and columns still fill the row space.

Looks funny to me to have the OrderId and DealSize columns in the DetailTemplate to be so large.
Is it possible to size the DetailTemplate Grid and column more appropriatly?

Thanks

Grid

answered on 23 Nov 2020

18 answers

1.6K+ views

[Solved] Passing Parameters to WebAPI

Hi there! My project is a fullstack Blazor application - server, client and shared projects. On my server project I have some custom logic for paging that I want to use in my Telerik Grid. My question is how am I supposed to use my server side paging instead of the built-in one in the TelerikGrid. The issue is that I want to send a request to the Server project(WebAPI) and pass some parameters to it(ex. page=2, limit=10). I get the parameters from the url(ex. "http://localhost:5000/api/Forecasts?Page=2&Limit=10") so I can send different request for every single page(I have large data source). Is there a way I can integrate my server-side paging logic with your TelerikGrid for Blazor?
Thank you in advance!

Grid

answered on 23 Nov 2020

1 answer

1.6K+ views

[Solved] Blazor Dashboard Project

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

311 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

479 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

142 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

315 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