How to interpret element in using the ensurevisible method - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: element, ensurevisble, Tree

This topic contains 6 replies, has 2 voices, and was last updated by admin 1 week, 1 day ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

How to interpret element in using the ensurevisible method Posts
February 4, 2026 at 10:09 am How to interpret element in using the ensurevisible method #136490

Alastair Walker
Participant

I would appreciate some guidance on how to interpret the nature of ‘element’ in the sample script as:
$(‘#jqxTree’).jqxTree(‘ensureVisible’, element);
If the look at the record structure given in the sample html script, which is:
var source =
[
{ label: “Item 1”, expanded: true,
items:
[
{ label: “Item 1.1” },
{ label: “Item 1.2”, selected: true }
]
},
{ label: “Item 2” },
{ label: “Item 3” },
{ label: “Item 4”,
items:
[
{ label: “Item 4.1” },
{ label: “Item 4.2” }
]
},
{ label: “Item 5” },
{ label: “Item 6” },
{ label: “Item 7” }
];

How exactly should I interpret ‘element’ in this context?

Any guidance will be really appreciated!

Many thanks,

Alastair

February 4, 2026 at 10:29 am How to interpret element in using the ensurevisible method #136491

admin
Keymaster

Hi Alastair,

ensureVisible works with indexes i.e you need to pass the element’s index – 1, 2, etc.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

February 4, 2026 at 11:04 am How to interpret element in using the ensurevisible method #136492

Alastair Walker
Participant

Ok – thank you very much! The guidance is appreciated!

Alastair

February 4, 2026 at 11:32 am How to interpret element in using the ensurevisible method #136494

admin
Keymaster

Hi,

Sorry, the previous was for jqxTabs. For jqxTree, you need to pass HTML Element. Example: https://jsfiddle.net/jqwidgets/VvB6g/

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

February 4, 2026 at 12:05 pm How to interpret element in using the ensurevisible method #136495

Alastair Walker
Participant

I looked at the jsfiddle example – but I am none the wiser.

The xample I am trying to explore this issues is below:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>jQuery Button Sample1</title>

<link rel=”stylesheet” href=”../libraries/jqwidgetslibrary/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../libraries/jqwidgetslibrary/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../libraries/jqwidgetslibrary/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../libraries/jqwidgetslibrary/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../libraries/jqwidgetslibrary/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../libraries/jqwidgetslibrary/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”../libraries/jqwidgetslibrary/jqwidgets/jqxtree.js”></script>
</head>

<script type=”text/javascript”>

$(document).ready(
function ()
{
var source =
[
{ label: “Item 1”, expanded: true,
items:
[
{ label: “Item 1.1” },
{ label: “Item 1.2”, selected: true }
]
},
{ label: “Item 2” },
{ label: “Item 3” },
{ label: “Item 4”,
items:
[
{ label: “Item 4.1” },
{ label: “Item 4.2” }
]
},
{ label: “Item 5” },
{ label: “Item 6” },
{ label: “Item 7” }
];
// Create jqxTree.
$(‘#jqxTree’).jqxTree({ source: source, height: ‘100px’, width: ‘300px’ });

// Create Push Button.
$(“#jqxButton”).jqxButton({ width: ‘150’, height: ’25’});
// Subscribe to Click events.
$(“#jqxButton”).on(‘click’, function ()
{
alert(‘Button Clicked’);
$(‘#jqxTree’).jqxTree(‘ensureVisible’,8);
});
});

</script>

<div style=’width: 150px;’ id=’jqxWidget’>
<div id=’jqxTree’></div>
<div> <input type=”button” value=”Button” id=’jqxButton’ /></div>
</div>

</div>
</body>
</html>

If I can get this example to work – by selecting an item towards the end of the list, I think my misunderstanding will be resolved.

Many thanks,

Alastair

February 5, 2026 at 12:29 pm How to interpret element in using the ensurevisible method #136496

Alastair Walker
Participant

I have managed to resolve my own misunderstanding of how the tree ensureVisible method works.

I found a comment on this topic in a post in 2016. I copy the important text, as follows:

– … you need to get all of the elements of the jqxTree. You can do that using the getItems method from the jqxTree API.
– Iterate through them and check if the value is present.
– If it is, get the a reference to the element and using selectItem select that element. Every item that is returned from the getItems method, contains properties like “label” and “element”. “label” represents the actual text of the
of the current item(this will be compared to “CategoryINT” value that you get from the jqxGrid). “element” represents a reference to the
tag.
Alastair