Working with groups in LEADTOOLS v18 HTML5 Annotations

You can add more than one Annotation object to the same group by setting the object’s groupName property to a specific name as follows:
+-------------+
var rectObj = new lt.Annotations.Core.AnnRectangleObject();
var rectObj2 = new lt.Annotations.Core.AnnRectangleObject();
var rectObj3 = new lt.Annotations.Core.AnnRectangleObject();
…
rectObj.set_groupName("Group1");
rectObj2.set_groupName("Group1");
                  
rectObj3.set_groupName("Group2");
+-------------+
When using the above code, you will have two groups (Group1 and Group2):
- Group1 contains two rectangle objects (rectObj and rectObj2).
- Group2 contains one rectangle object (rectObj3).

Now, if you want to show\hide a specific group, you can do this as follows:
+-------------+
var MyObjects = _automation.get_container().get_children();                        

for (var i = 0; i < MyObjects.get_count(); i++)
{
var child = MyObjects.get_item(i);
var groupName = child.get_groupName();
                         
if(groupName.localeCompare("Group1") == 0)
{
alert("Group1");
child.set_isVisible(false);
}
else
{
alert("Group2");
child.set_isVisible(true);
_automation.selectObject(child);
}
}
+-------------+
The above code will hide all objects in Group1.

I am attaching a small LEADTOOLS v18 HTML5 project that shows how you can work with groups.

Thanks,
Maen Badwan
LEADTOOLS Technical Support