<SfTreeView TValue="JobCategory" ShowCheckBox="true" @ref="tree" AutoCheck="false">
<TreeViewEvents TValue="JobCategory" NodeExpanding="NodeExpanding"></TreeViewEvents>
<TreeViewFieldsSettings TValue="JobCategory" Id="Id" DataSource="@MyFolder" Text="Name" ParentID="ParentId" HasChildren="HasChild" Expanded="IsExpanded" IsChecked="IsChecked"></TreeViewFieldsSettings>
<TreeViewTemplates TValue="JobCategory">
<NodeTemplate>
<div>
<div class="treeviewdiv">
<div class="nodetext">
<span class="treeName">@((context as JobCategory).Name)</span>
</div>
</div>
</div>
</NodeTemplate>
</TreeViewTemplates>
</SfTreeView>
public void NodeExpanding(NodeExpandEventArgs args)
{
if (args.IsInteracted)
{
if (args.NodeData.Id == "1")
{
//Based on your requirement, you can fetch the data from server side.
MyFolder.Add(new JobCategory
{
Id = "4",
ParentId = args.NodeData.Id,
Name = "Music",
Count = 3
});
MyFolder.Add(new JobCategory
{
Id = "5",
Name = "Pictures",
ParentId = args.NodeData.Id,
Count = 5
});
}
}
} |
<div id="treeview">
<SfTreeView TValue="EmployeeData" @ref="tree" @bind-SelectedNodes="@selectedNodes">
<TreeViewFieldsSettings Id="Id" ParentID="Pid" DataSource="@ListData" Text="Name" HasChildren="HasChild"></TreeViewFieldsSettings>
<TreeViewEvents TValue="EmployeeData" NodeSelected="OnSelect" NodeClicked="nodeClicked"></TreeViewEvents>
<SfContextMenu TValue="MenuItem" @ref="menu" Target="#treeview" Items="@MenuItems">
<MenuEvents TValue="MenuItem" ItemSelected="MenuSelect"></MenuEvents>
</SfContextMenu>
</SfTreeView>
</div>
<SfDialog Width="250px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible">
<DialogTemplates>
<Header> Dialog </Header>
<Content> <SfTextBox @ref="textRef" Value="@NodeName" Placeholder='Node Text'></SfTextBox> </Content>
</DialogTemplates>
<DialogButtons>
<DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialog" />
<DialogButton Content="Cancel" OnClick="@cancelDialog" />
</DialogButtons>
</SfDialog>
@code
{
// Reference for treeview
SfTreeView<EmployeeData> tree;
// Reference for context menu
SfContextMenu<MenuItem> menu;
// Reference for text box
SfTextBox textRef;
string selectedId;
private bool IsVisible { get; set; } = false;
public string NodeName { get; set; } = "";
int index = 100;
public string[] selectedNodes { get; set; }
// Datasource for menu items
public List<MenuItem> MenuItems = new List<MenuItem>{
new MenuItem { Text = "Edit" },
new MenuItem { Text = "Remove" },
new MenuItem { Text = "Add" }
};
// Triggers when TreeView Node is selected
public void OnSelect(NodeSelectEventArgs args)
{
this.selectedId = args.NodeData.Id;
}
// Triggers when TreeView node is clicked
public void nodeClicked(NodeClickEventArgs args)
{
selectedId = args.NodeData.Id;
// get selected node text
this.NodeName = args.NodeData.Text;
selectedNodes = new string[] { selectedId };
}
// Triggers when context menu is selected
public void MenuSelect(MenuEventArgs<MenuItem> args)
{
string selectedText;
selectedText = args.Item.Text;
if (selectedText == "Edit")
{
// open edit dialog
this.IsVisible = true;
}
else if (selectedText == "Remove")
{
this.RemoveNodes();
}
else if (selectedText == "Add")
{
this.AddNodes();
}
}
// ok button function
private void CloseDialog()
{
// get modifed textbox value
this.NodeName = this.textRef.Value;
this.IsVisible = false;
// update to tree view data source
ListData.Where(x => x.Id == this.selectedId).ToList()[0].Name = this.NodeName;
}
// cancel button
private void cancelDialog()
{
this.IsVisible = false;
} |
private async Task GetPropertyList(string parentNodeId)
{
List<string> Nodes = new List<string>();
treedata.Remove(treedata.FirstOrDefault(n => n.nodeId == "02-01"));
await Task.Run(() => LoadProperties(parentNodeId)).ContinueWith(t =>
{
treedata.AddRange(t.Result);
});
} |