Questions on UI for Blazor Forum

1 answer

176 views

It would be nice to have templating abilities for an appointment on the calendar. I would like to add more than just title and description. For instance, to have aircraft identifier, arrival and departure airport codes and depart times.

Scheduler

answered on 16 Mar 2020

5 answers

471 views

[Solved] Bind Style based on Selected Node

For this TreeView definition, I want the button background to be black with white font when the TreeItem.Selected property is true. Then, I want the node to go back to a clear background with black font when when that property is false. How do I do this?

@using System.Collections.ObjectModel

@using Palmer.Doc.Models

@page "/tree"

<TelerikButton Primary="true" OnClick="CreateItem">Create item</TelerikButton>

<TelerikButton Primary="true" OnClick="DeleteItem">Delete item</TelerikButton>

<TelerikTreeView Data="@TreeData">

<TreeViewBindings>

<TreeViewBinding IdField="Id"

TextField="Text">

<ItemTemplate>

@{

<TelerikButton OnClick="@(() => OnClickHandler(context as TreeItem))">@((context as TreeItem).Text)</TelerikButton>

}

</ItemTemplate>

</TreeViewBinding>

</TreeViewBindings>

</TelerikTreeView>

@code{

public class TreeItem

{

public string Id { get; set; } = $"{Guid.NewGuid()}";

public string Text { get; set; }

public string ContextId { get; set; }

public ObservableCollection<TreeItem> Items { get; set; } = new ObservableCollection<TreeItem>();

public bool Expanded { get; set; }

public bool HasChildren { get; set; }

public bool Selected { get; set; }

}

#region Properties

public TreeItem SelectedItem { get; set; }

public ObservableCollection<TreeItem> TreeData { get; set; }

#endregion

#region Event Handlers

protected override void OnInitialized()

{

LoadHierarchical();

}

private void OnClickHandler(TreeItem context)

{

SelectedItem = context;

}

#endregion

#region Methods

private void CreateItem()

{

if (SelectedItem != null)

{

AddNode(SelectedItem, "New Item");

}

private void DeleteItem()

{

if (SelectedItem != null)

{

TreeItem parent = GetById(SelectedItem.ContextId);

if (parent != null)

{

parent.Items.Remove(SelectedItem);

SelectedItem = parent;

SelectedItem.HasChildren = SelectedItem.Items.Count > 0;

SelectedItem.Expanded = SelectedItem.HasChildren;

}

private void LoadHierarchical()

{

ObservableCollection<TreeItem> roots =

new ObservableCollection<TreeItem>()

{

new TreeItem { Text = "Item 1", Expanded = true },

new TreeItem { Text = "Item 2" }

};

AddNode(roots[0], "Item 1 first child");

AddNode(roots[0], "Item 1 second child");

AddNode(roots[1], "Item 2 first child");

AddNode(roots[1], "Item 2 second child");

TreeData = roots;

}

private void AddNode(TreeItem parent, string childText)

{

AddNode(parent, new TreeItem()

{

Text = childText

});

}

private void AddNode(TreeItem context, TreeItem child)

{

child.ContextId = context.Id;

context.Items.Add(child);

context.HasChildren = true;

context.Expanded = true;

SelectedItem = child;

}

public TreeItem GetById(string id)

{

TreeItem result = null;

// perform a recursive search starting with the root nodes

foreach (var treeItem in TreeData)

{

result = getById(id, treeItem);

if (result != null) break;

}

return result;

}

/// <summary>

/// Perform a recursive search using the given node

/// </summary>

/// <param name="id"></param>

/// <param name="parent"></param>

/// <returns></returns>

private TreeItem getById(string id, TreeItem node)

{

TreeItem result = null;

if (node.Id == id)

{

result = node;

}

else

{

foreach (TreeItem child in node.Items)

{

result = getById(id, child);

if (result != null) break;

}

return result;

}

#endregion

}

TreeView

answered on 16 Mar 2020

1 answer

855 views

Zero Records Message

I would like to display a message where rows would be displayed in grid, when there are no records returned from the data source. Basically, a message with graphics and hyperlink that direct the user to a page to enter a new record. Is there any feature of the grid that would support this thy of workflow? Row Template maybe?

Grid

answered on 16 Mar 2020

4 answers

550 views

[Solved] Grid pager not showing proper button style

The pager for my Blazor UI Grid has been working just fine for over a month but now it is missing the button box around the 1 when I view the first page. The second page has a box around it like a typical button. When I click on the 2 button to display page 2, the 2 button no longer has a box around it but the 1 button does. So it seems to be a css issue with the currently selected page.

<TelerikGrid Data="@GridData"
TotalCount="@Total"
Sortable="true"
Pageable="true"
PageSize="@PageSize"
OnRead="@OnReadHandler">
<GridToolBar>
<TelerikButton OnClick="@(() => SelectAccount(null))" Icon="add">Add Account</TelerikButton>
</GridToolBar>
<GridColumns>
<GridCommandColumn Width="200px" Resizable="false">
<GridCommandButton OnClick="@((args)=> SelectAccount(args.Item as AccountModel))" Icon="edit">Edit</GridCommandButton>
<GridCommandButton OnClick="@((args)=> ShowDeleteConfirmationDialog(args.Item as AccountModel))" Icon="delete">Delete</GridCommandButton>
</GridCommandColumn>
<GridColumn Field="@(nameof(Account.AccountName))" Title="Account Name" />
<GridColumn Field="@(nameof(Account.AccountType))" Title="Account Type" />
<GridColumn Field="@(nameof(Account.OwnerName))" Title="Account Owner" />
<GridColumn Field="@(nameof(Account.Status))" Title="Status" />
</GridColumns>
</TelerikGrid>

Grid

answered on 16 Mar 2020

1 answer

704 views

[Solved] Pass context to Click Handler

How can I pass the context of a TreeView's ItemTemplate to a click handler? This is what I have:

<TelerikTreeView Data="@TreeData">

<TreeViewBindings>

<TreeViewBinding IdField="Id"

TextField="Text">

<ItemTemplate>

@{

<TelerikButton OnClick="@OnClickHandler">@((context as TreeItem).Text)</TelerikButton>

}

</ItemTemplate>

</TreeViewBinding>

</TreeViewBindings>

</TelerikTreeView>

@code {

public class TreeItem

{

public string Id { get; set; } = $"{Guid.NewGuid()}";

public string Text { get; set; }

public ObservableCollection<TreeItem> Items { get; set; } = new ObservableCollection<TreeItem>();

public bool Expanded { get; set; }

public bool HasChildren { get; set; }

public bool Selected { get; set; }

}

private void OnClickHandler(TreeItem context)

{

}

TreeView

answered on 12 Mar 2020

5 answers

773 views

Get Series Label on mouseover

Hey all,

I have a Blazor chart which has about four series on it and each series has a hundred or so points. If I turn on the series labels, they all turn on and it makes my chart unreadable. Is there a way to have them only appear when you either mouse over a marker on the series or when you click on the marker in the series? This sounds easy to do but I can't seem to manage it with the Blazor chart. Any and all help will be appreciated. Thanks.

Cheers,

Jimmy

Charts

answered on 09 Mar 2020

6 answers

706 views

Grid Error after SelectedItemsChanged is fired

Hi,

I am getting the following exception from the grid and cannot understand why. The collection supplied to the function is definitely not empty and my function exits without a throw. Is there a way to understand why the code inside the grid is throwing an error? Then the circuit crashes and the blazor application is now dead.

If I use a GridCommandColumn no errors are raised.

Unhandled exception rendering component: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')<br>System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index'

)<br>   at System.Collections.Generic.List`1.get_Item(Int32 index)<br>   at Telerik.Blazor.Components.Grid.GridDataCellBase`1.get_Column()<br>   at Telerik.Blazor.Components.Grid.GridContentCell`1.get_BoundColumn()<br>   at Telerik.Blazor.Components.Grid.GridContentCell`1.OnClick()<br>   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)<br>   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)<br>fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]<br>      Unhandled exception

in circuit '-1BdfTDXKpRyAHNMXnaoanw8GipVDkrJ6NXuvg48GmA'.<br>System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index'

)<br>   at System.Collections.Generic.List`1.get_Item(Int32 index)<br>   at Telerik.Blazor.Components.Grid.GridDataCellBase`1.get_Column()<br>   at Telerik.Blazor.Components.Grid.GridContentCell`1.get_BoundColumn()<br>   at Telerik.Blazor.Components.Grid.GridContentCell`1.OnClick()<br>   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)<br>   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Grid

answered on 06 Mar 2020

1 answer

299 views

Binding to Observable Collection

According to this Link, CRUD functionality for the TreeView control is available starting with version 2.7.0. Do you have a working example you could share?

Link

TreeView