Questions on UI for Blazor Forum

1 answer

2.5K+ views

Is there a way to hide the header? I'm trying to use the Grid as a ListBox and it almost works using an empty span for the <HeaderTemplate>

<TelerikGrid SelectionMode="@GridSelectionMode.Multiple"
Data=@AvailableSerialNumbers
Pageable="false"
Sortable="false"
SelectedItemsChanged="@((IEnumerable<TSerialNumberDto> serialNumbers) => OnSelectSerialNumbers(serialNumbers))"
SelectedItems="@SelectedSerialNumbers"
>
<GridColumns>
<GridColumn Field="Number">
<HeaderTemplate>
<span class="k-display-flex k-align-items-center">

</span>
</HeaderTemplate>
</GridColumn>
</GridColumns>
</TelerikGrid>

However it leaves just a little bit of a bar at the very top that I can't get rid up...seems like there should be a way to hide that.

Grid

answered on 18 May 2020

3 answers

461 views

Grid.SetState() doesn't work with observable collection

Hello,

when I try to sort a grid, bound to an observable collection, it doesn't work. The function SetState does not exit

Best Regards

Grid

answered on 15 May 2020

3 answers

1.5K+ views

Cant find

In this example
https://docs.telerik.com/blazor-ui/getting-started/server-blazor

This part,

When I run my app, I get a 404 on telerik-blazor.js

Where is the _content folder?

Also, this section

Get a 404 on all.css

General Discussions

answered on 15 May 2020

1 answer

1.1K+ views

Hide Expand Arrow

Is there a way to hide the expand arrow on just the top level items? They do have children. A second option would be suggestion on how to expand a background to include the arrow, so it is not off to the side without effecting sub items. Picture attached with icon off to side.

I echo the need to apply custom styling up higher in the element like this thread references would be helpful as well. https://www.telerik.com/forums/styling-issue

Thank you.

Menu

answered on 15 May 2020

12 answers

2.5K+ views

TelerikBlazorDemos - missing package Telerik.Documents.SpreadsheetStreaming

I am not able to compile demo application TelerikBlazorDemos.csproj. The license is trial. I have configured all package sources including local and server Telerik.

The error during build is below:

Unable to find package Telerik.Documents.SpreadsheetStreaming. No packages exist with this id in source(s): AppData folder, DevExpress, Esri, https://dotnet.myget.org/F/aspnetcore-dev/api/v3/index.json, https://dotnet.myget.org/F/blazor-dev/api/v3/index.json, Local Telerik, Microsoft Visual Studio Offline Packages, nuget.org, nuget.telerik.com TelerikBlazorDemos C:\Program Files (x86)\Progress\Telerik UI for Blazor 2.13.0\demos\TelerikBlazorDemos\TelerikBlazorDemos.csproj

General Discussions

answered on 15 May 2020

2 answers

1.9K+ views

Multi-line text in grid cell

Hello,

I need to display a multi-line text in a grid cell. How must I format it?
If I try to replace \n\r with <br />, the "<br />" test is displayed in the output.

Grid

answered on 15 May 2020

5 answers

660 views

Treeview and navigation problem

Hello,

I'm working on a hosted webassembly project with .net core 3.2 RC1 and Visual Studio 16.6.0 Preview 6

I would like to use the treeview to present a search result hierarchically and navigate to an other page when the user clicks on a child item.

I use the templates and <a> tag.

The problem is that if i use <a href="customerPage">test url</a> for example, it throw an exception when i click on the link and the page "customerPage" is not rendered.

The issue is the same with a <NavLink> tag.

If i use the <a> tag with the onclick event associated to the NavigationManager in a code behind function, it seems to work, but i can see an exception in the the browser's console.

To reproduce the problem, I have created a new Hosted Client Side project.

I added a treeview in the index.razor file and use the code of your "Flat Data" demo to populate the treeview and update the counter page to pass a CounterValue parameter.

I took some screenshot after clicking on the different links.

Here is the code :

Index.razor

@page "/"<h1>Hello, world!</h1> Welcome to your new app. <SurveyPrompt Title="How is Blazor working for you?" /><TelerikTreeView Data="@FlatData"> <TreeViewBindings> <TreeViewBinding ParentIdField="Parent" ExpandedField="IsExpanded"> <ItemTemplate> @{ var item = (context as TreeItem); <span>(a href) <a href="counter/@item.Id">id:@item.Id</a>  |  </span> <span> (navlink)<NavLink href="counter">no id</NavLink>  |  </span> <span> (a onclick) <a href="javascript:void(0)" @onclick="@( _ => Navigate(item))">id:@item.Id</a></span> } </ItemTemplate> </TreeViewBinding> </TreeViewBindings></TelerikTreeView>

Index.razor.cs

using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Components; namespace BlazorApp2.Client.Pages { public partial class Index { public IEnumerable<TreeItem> FlatData { get; set; } [Inject] private NavigationManager NavigationManager { get; set; } public class TreeItem //most fields use the default names and will bind automatically in this example { public int Id { get; set; } public string Text { get; set; } public int? Parent { get; set; } //this is a non-default field name public bool HasChildren { get; set; } public bool IsExpanded { get; set; } //this is a non-default field name } protected override void OnInitialized() { FlatData = LoadFlat(); } private void Navigate(TreeItem item) { var uri = $"counter/{item?.Id.ToString() ?? ""}"; NavigationManager.NavigateTo(uri); } private List<TreeItem> LoadFlat() { List<TreeItem> items = new List<TreeItem>(); items.Add(new TreeItem() { Id = 1, Text = "Parent 1", Parent = null, // indicates a root (zero-level) item HasChildren = true, // informs the treeview there are children so it renders the expand option IsExpanded = true // an item can be expanded by default }); items.Add(new TreeItem() { Id = 2, Text = "Parent 2", Parent = null, // indicates a root item HasChildren = true, IsExpanded = false }); items.Add(new TreeItem() { Id = 3, Text = "Parent 3", Parent = null, // indicates a root item HasChildren = false, //there will be no children in this item IsExpanded = true // will not have an effect if there are no children }); items.Add(new TreeItem() { Id = 4, Text = "Child 1 of Parent 1", Parent = 1, // the parent will be the first item HasChildren = false, IsExpanded = false }); items.Add(new TreeItem() { Id = 5, Text = "Child 2 of Parent 1", Parent = 1, // the parent will be the first item HasChildren = true, IsExpanded = true }); items.Add(new TreeItem() { Id = 6, Text = "Child 1 of Child 2", Parent = 5, // the parent will be the first child of the first root item HasChildren = false, IsExpanded = false }); items.Add(new TreeItem() { Id = 7, Text = "Child 1 of Parent 2", Parent = 2, // the parent will be the second root item HasChildren = false, IsExpanded = false }); return items; } } }

Counter.razor

@page "/counter"@page "/counter/{counterValue:int}"<h1>Counter</h1><p>Current count: @CounterValue</p><button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

Counter.razor.cs

using Microsoft.AspNetCore.Components; namespace BlazorApp2.Client.Pages { public partial class Counter { [Parameter] public int CounterValue { get; set; } private void IncrementCount() { CounterValue++; } } }

TreeView

answered on 14 May 2020

1 answer

63 views

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

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

914 views

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