Questions on UI for Blazor Forum

3 answers

577 views

Hello Team;

There is an upcoming feature on the roadmap called "Blazor Dashboard Template".
For our Admin App, we need a Dashboard with layout (Side/top menu, Header, Footer, Body and etc.). Before we spend the time and build this from ground up, we are hoping this component will save us some time.

My question is, is there a similar control/component in other Telerik platforms that we can look at a demo, to get an idea what's coming up? If yes, could you please provide a link?
If not, is it possible to get more detail information on how it will work and what we should expect?

Thanks!

General Discussions

answered on 19 May 2020

1 answer

2.5K+ views

How to: Hide Header?

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

504 views

[Solved] 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.6K+ 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.2K+ views

[Solved] 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.7K+ views

[Solved] 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

2.0K+ views

[Solved] 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

699 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

80 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