Questions on UI for Blazor Forum

1 answer

86 views

[Solved] Congrats on R2 2020

I'd like to take a moment to thank & congratulate Telerik's Blazor team on the release of R2 2020;

Your great and hard work, makes up productive. And I see a lot more new stuff coming up by year end.

Thank you guys!

..Ben

General Discussions

answered on 14 May 2020

3 answers

2.2K+ views

[Solved] Conditional Row Formatting

Marin:

I need to format Grid content on a row by row basis and using the RowTemplate am able to get close to what I want but it's breaking the Select and Hover behavior.

What is the best way to do this?

@page "/"

@page "/formatting"

<style>

.mygrid-formatting th.k-header {

padding: 5px;

}

.mygrid-formatting .k-master-row td {

padding: 2px 4px;

border-bottom: 1px solid rgba(33, 37, 41, 0.15);

line-height: 1.25rem;

vertical-align: @_verticalAlignment;

}

.mygrid-formatting .k-grid-table .k-master-row {

background-color: @_backGroundColor;

}

.mygrid-formatting .k-grid-table .k-master-row:hover {

background-color: rgba(220, 238, 239, 0.50);

}

.mygrid-formatting .k-grid-table .k-master-row.k-alt {

background-color: @_backGroundColor;

}

.mygrid-formatting .k-grid-table .k-master-row.k-alt:hover {

background-color: rgba(220, 238, 239, 0.50);

}

</style>

@if (showForm)

{

<TelerikGrid Data="@GridData"

Class="mygrid-formatting"

Height="600px"

SelectionMode="GridSelectionMode.Single"

Pageable="true"

PageSize="30"

RowHeight="30"

Sortable="true">

<RowTemplate Context="sample">

<td style="@RowStyle(sample.Id)">@sample.Id</td>

<td style="@RowStyle(sample.Id)">@sample.Name</td>

<td style="@RowStyle(sample.Id)">@sample.LastName</td>

<td style="@RowStyle(sample.Id)">@sample.HireDate.ToShortDateString()</td>

</RowTemplate>

<GridColumns>

<GridColumn Field="@(nameof(SampleData.Id))" Title="ID" />

<GridColumn Field="@(nameof(SampleData.Name))" Title="Name" />

<GridColumn Field="@(nameof(SampleData.LastName))" Title="Last Name" />

<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hired" />

</GridColumns>

</TelerikGrid>

}

@code {

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

bool showForm = false;

string _verticalAlignment = "Center";

string _backGroundColor = "White";

protected override async Task OnInitializedAsync()

{

GridData = await GetData();

showForm = true;

}

private string RowStyle(int id)

{

string style = string.Empty;

if (id <= 15) style = "color: red; background-color: white;";

else if (id <= 30) style = "color: DarkBlue; background-color: AliceBlue;";

else if (id <= 45) style = "color: green; background-color: Khaki;";

else style = "color: Indigo; background-color: Lavender;";

return style;

}

private async Task<List<SampleData>> GetData()

{

return Enumerable.Range(1, 100).Select(x => new SampleData

{

Id = x,

Name = $"name {x}",

LastName = $"Surname {x}",

HireDate = DateTime.Now.Date.AddDays(-x)

}).ToList();

}

public class SampleData

{

public int Id { get; set; }

public string Name { get; set; }

public string LastName { get; set; }

public DateTime HireDate { get; set; }

}

Grid

answered on 14 May 2020

3 answers

1.0K+ views

[Solved] How do I include a bearer/access token?

I'm testing the Upload component and I'm using bearer tokens on my APIs. How do I include the bearer token in the TelerikUpload component?

Thanks.

Upload

answered on 13 May 2020

3 answers

248 views

[Solved] Been a while since using Blazor is it production ready now?

Last point I was using Blazor there was still some that suggested not using it in a production environment, whether the Telerik controls or the reliance on the beta versions of .net core and/or Visual Studio 2019. Are all those issues gone now?

General Discussions

answered on 13 May 2020

2 answers

541 views

[Solved] Does not show after calling JSRuntime.Invoke

Hi..

I have the following code.

After JSRuntime is called the AnimationContainer does not show. I get a screen flicker.

Any idea how I can show the Animation Container after opening (downloading a file)

thanks again!

await JSRuntime.InvokeAsync<object>("open", URI, "_blank");

await AnimationContainer.ShowAsync();
StateHasChanged();

await Task.Delay(5000);

await AnimationContainer.HideAsync();
StateHasChanged();

AnimationContainer

answered on 11 May 2020

4 answers

488 views

[Solved] Tooltip on ALL Inputcheckboxes

Hi

How can I apply the same ToolTip on all InputCheckBox controls

thx in advance

Tooltip

answered on 11 May 2020

4 answers

2.6K+ views

[Solved] Upload and display image on form

Hi

Are there any samples/ideas of how to - uploading an image and then displaying the image on a form?

I'm trying to upload and image to CosmosDB and then show the uploaded image on a form.

thx in advance

Upload

answered on 11 May 2020

1 answer

502 views

TValue for ValueExpression

Hello,

I'm currently using a TextBox in one of my forms.

The problem is that the "Value" of the text box is made from a combinaison of different variables, with "ToString()", I cannot bind it to a specific string value.

The [Required] attribute is on a class, which does not contain a string value.

The purpose would be to be able to link "ValueExpression" to any variable like you can do with the validation message " <ValidationMessage For="@AnyTypeRequiredValue"/>". Like this we will be able to have the field colored in red when the class is not filled and when it's not necesseraly a string.

Hope you understood my problem.

Have a nice day

TextBox