DevOps, CI/CD and Automation

Hi,

When including an oj-table that has a dynamic visible property, I've noticed unexpected behavior. This happens if the visible data-bind is directly on the oj-table, or on a parent container.

In the example shown below, I have used the infinite scroll cookbook recipe (copied and pasted into a band new oracle jet 4.1 project). As you can see in the second example where I have a visible property bound to a button that switches the state to true, the column headers are no longer fixed, and as a result the infinite scrolling fetch fails to work.

In a different example (which I don't currently have to hand) I found that the scroll bar vanished after visible had been set to true.

I imagine this is something to do with the table being hidden when some of the initialization logic for tables are ran, and it not binding onto the component correctly? I could be wrong though.

I managed to get around this by using a switcher component instead of using data-bind visible.

Table Working as expected

Table not working as expected

view code:

<oj-button data-bind="click: toggleTable">Show Table</oj-button>

<div>

\<oj-table id="table" aria-label="Departments Table" data='\[\[dataprovider\]\]' columns='\[{"headerText": "Department Id",

           "field": "DepartmentId"},

          {"headerText": "Department Name",

           "field": "DepartmentName"},

          {"headerText": "Location Id",

           "field": "LocationId"},

          {"headerText": "Manager Id",

           "field": "ManagerId"}\]' scroll-policy='loadMoreOnScroll' scroll-policy-options='{"fetchSize": 10}' style='height: 200px;'

  data-bind="visible: tableVisible">

</oj-table>

viewModel: (not going to copy and paste the full table array, its direct from the cookbook):

self.tableVisible = ko.observable(false);

self.toggleTable = function(){

self.tableVisible(true);

}

thanks,

Dan Curtis