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

[MA8731174]

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:

• hide a full row in a Grid Layout?

• collapse its height (similar to CSS display: none)?

• or dynamically modify grid definitions at runtime?

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

[MA8731174 · Accepted solution]

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..