topic Re: How to Show/Hide Rows in a Grid Layout Dynamically? in Vuforia Studio

How to Show/Hide Rows in a Grid Layout Dynamically?

MA8731174 — Thu, 04 Dec 2025 13:38:58 GMT

Hi everyone,

I’m working with the Grid Layout in Vuforia Studio and I’m trying to dynamically show or hide specific rows.

The problem I’m facing:

I cannot dynamically change the row or column class.
I also cannot set their height/size to 0px at runtime.
Simply hiding the widget inside the cell doesn’t help, because the row and column space remains visible.

My goal is simple:
I want all rows to exist in the layout, but I want to toggle their visibility (visible/invisible) without leaving empty space.

Is there any workaround or method to:

Any suggestions or best practices would be greatly appreciated.
Thank you!

MA8731174 — Thu, 04 Dec 2025 14:40:09 GMT

After some testing i am able to find my own solution for this issue.

class (application)

.hideRowDynamic div.row[data-hide="true"] {
display: none !important;
}

Assign this class to gridLayout on which you would like to have this behaviour -> hideRowDynamic

home.js

$scope.hideRow = function (rowIndex) {

let widget = document.querySelector('[widget-id="gridLayout-77"]');

if (!widget) return;

let rows = widget.querySelectorAll("div.row");

if (rows[rowIndex - 1]) {
rows[rowIndex - 1].setAttribute("data-hide", "true");
}
};

call the function on button click or in angular.element(document).ready(function () { })

$scope.hideRow("7");

It would for example hide the 7th row from grid layout..