Hi,
is it possible to combine combobox with paging ?
Seems like this should be simple, but it's eluding me. Basically, I have a treeview and button. If teh user has selected a node and then clicks on my button,
how do I tell which node is active?
Thanks … Ed
Looking at your components for the first time and downloaded the 30 day trial today. I note in Visual Studio 2019 that you set <LangVersion> to 7.3 for each of the samples and the VS templates I've installed.
Is this a requirement to stay compatible with your package?
The big pull for us with C# 8 is nullable reference types. I suppose I can just turn it on and wait for Telerik components to be incompatible.
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
}
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>