Select a jqxtree node using item id in data base

Question

0.00/5 (No votes)

See more:

Hello

I have a table in SQL Data Base named "Groups". with fields :

Id Title ParentId

the values are shown in jqxTree correctly, but I need to when user clicks on a Product to Update it, jqxTree select the current node for the Group of that product so the user can change it or not.

thanks in advance

What I have tried:

JavaScript

$('#jqxTree').jqxTree('selectItem', element);

or

JavaScript

$('#jqxTree').jqxTree('select_node', element);

where element is the "Id" field for Product Group. I can get the Id correctly but it will not select the group in jqxTree.

Posted 5-Nov-16 19:35pm

Ali Majed HA

Updated 12-Jul-18 20:53pm

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Kornfeld Eliyahu Peter · Answer 1 · 2016-11-06T00:28:00

Solution 1

According to the documentation[^] it should be

JavaScript

$('#jqxTree').jqxTree('selectItem', element);

where element is the LI tag...

Posted 6-Nov-16 0:28am

Kornfeld Eliyahu Peter

Comments

Ali Majed HA 7-Nov-16 2:40am

Hello and Thanks, but I have red the document carefully. Yes, by li Tag it is like that, but what about using JSON data a sresource for tree?

natuan8687 · Answer 2 · 2018-07-12T20:54:00

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) {
    // Firstly, we get all items of tree using "getItems" method
    var elements = $("#tree").jqxTree("getItems");

    // Loop through all items 
    for(var i = 0; i < elements.length; i++) {
        var element = elements[i];
        // element.value is a database ID corresponding with this element. Please note that we set "valueMember" for the tree is "Id" property of the model named ViewProductCategoryViewModel in View
        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