Solution
Please note that my sample code is using ASP.NET Core tag helper of jQWidgets. But it totally works on native Javascript/jQuery.
1. View (Index.cshtml)
@model IEnumerable<TinyShoppingCart.Server.Presentation.Admin.ViewModels.ViewProductCategoryViewModel>
<!-- Tree view-->
<jqx-tree id="tree" width="100%" itemsMember="Children" displayMember="Name" valueMember="Id" source="Model"></jqx-tree>
2. View Model
public class ViewProductCategoryViewModel
{
public int Id {get;set;}
public string Name {get;set;}
public int? ParentId {get;set;}
public IEnumerable<ViewProductCategoryViewModel> Children {get;set;}
}
3. Controller (ProductCategoryController)
public IActionResult Index()
{
var productCategories = _productCategoryRepository.TreeListAsync(x => x.ParentId == null);
IEnumerable<ViewProductCategoryViewModel> viewModel = _mapper.Map<IEnumerable<ProductCategory>, IEnumerable<ViewProductCategoryViewModel>>(productCategories.Result);
return View(viewModel);
}
Basically, the logic get data from database.
4. JavaScript (Important!!!!)
- Step 1: Get tree element by database ID
function getTreeElement(databaseId) {
var elements = $("#tree").jqxTree("getItems");
for(var i = 0; i < elements.length; i++) {
var element = elements[i];
if(element.value === databaseId) {
return element;
}
}
return null;
}
- Step 2: Select the element that we found at step 1
var selectElement = getTreeElement("1");
if(selectElement != null) {
$("#tree").jqxTree("selectItem", selectElement);
$("#tree").jqxTree("expandItem", selectElement)
}
Done!
Hope this helps