Roku Developer Program

[btpoole]

When using the markgrid how can I get the columns to shift to be visible? I have 4 columns, there is content for the 5th, if I scroll to the 4th and then scroll again how can I pull the 5th column into the 4th position or something like it.? I have done this but by slicing my array again and setting the content all over. Takes time this way since it has to go thru the complete array and parse from the new location. I figure there has to be a way to pull the content from columns off screen to on screen. Any help greatly appreciated.


EDIT: Ok, so really don't know if this is the only way to shift columns to bring the content of a column into view or not but my method follows:
1. To bring the 5th column into view, set columnwith of first column to 0.
2. Set 5th column to whatever width the first column was.
Like I said, not sure if there is another method or better method, so far I have not found it.

EDIT 2: Well I thought I had it figured out based on my first edit by using the following code

m.columnFocused=m.ProgramMarkupGrid.itemFocused MOD m.ProgramMarkupGrid.numColumns
IF m.columnFocused >= 3
counter= m.columnFocused - 3
temp=[]
     for i=0 to m.programmarkupgrid.numcolumns - 1
         if i <= counter
         temp[i]= 0          'set column width to 0
         else
         temp[i]= 312        'set column width to 312
         end if
    end for
m.programmarkupgrid.columnwidths= temp

end if

My logic is that when the user scrolls across (left to right) the grid and enters the 4th column (3rd focused item), the if statement sets the counter, in the first case it would be 0.  An array (temp) is created  resulting in the array [0,312,312,312,312,312,312,312]. There are total of 8 columns in the grid. So, the first column (focus 0)  width is set to 0, shrinking that column so the 5th column comes into view. This works. The problem occurs as the user scrolls to column 5 (4th focused item). The counter sets to 1, so the for loop creates the array [0,0,312,312,312,312,312,312]. I have verified this multiple times with print statements, but the column is not displayed as 0. The first (0 focused) shrinks but the second (1 focused) remains 312 and the next column content is overlayed on it ending up with a column over a column. If I continue to scroll, the array continues to replace 312 with 0 from the first position on. The content continues to be pulled into view but the first column on the left side of the grid continues to be overlayed. If I scroll back (right to left) the columns "unstack".  Can I get some help as to why the columns seem to stack over each other. The above code is fired from the  onFocusChanged which from the debugger screen looks like it fires 2 times for each sroll position with exception of the very first. The temp array only changes once. The onFocusChanged is only present in one ObserveField and fires when itemfocused changes.

Debugger:
foucs  0
foucs  1
foucs  1
foucs  2
foucs  2
foucs  3
foucs  3   counter  0
<Component: roArray> =
[
    0
    312
    312
    312
    312
    312
    312
    312
]
foucs  0
foucs  3
foucs  3   counter  0
<Component: roArray> =
[
    0
    312
    312
    312
    312
    312
    312
    312
]
foucs  4
foucs  4   counter  1
<Component: roArray> =
[
    0
    0
    312
    312
    312
    312
    312
    312
]
foucs  0
foucs  4
foucs  4   counter  1
<Component: roArray> =
[
    0
    0
    312
    312
    312
    312
    312
    312
]

[btpoole]

Since encountering the problem and doing more reading I came across the thread https://forums.roku.com/viewtopic.php?f=34&t=96092&hilit=horizFocusAnimationStyle&start=15 which basically details the exact same problem. I tried the horizFocusAnimationStyle setting also but no luck. Really curious as to how the epggrid component that no longer has documentation is able to scroll across the grid pulling a cell at a time into view without the collision of cells. I thought it was doing what I am trying to do by changing the column width.

[btpoole]

Anybody? Any ideas on how to scroll a grid to get non visible cell to visible? Any body with knowledge of the epggrid component and how it brings cells into focus?
Thanks

[btpoole]

Well since no reply, is there anyway to print the function in the epggrid component that moves cells.?

[btpoole]

For all of those who have encountered the problem, the solution is set the cell width to -1 instead of 0 in the code at top. No more overlapping of cell content.

[parag]

I have the same problem. However, even with setting the width the -1, the first visible element in the grid moves to the right and the effect is additive. How did you solve that issue? I am surprised that this does not work similar to RowList.

[btpoole]

"parag" wrote:
I have the same problem. However, even with setting the width the -1, the first visible element in the grid moves to the right and the effect is additive. How did you solve that issue? I am surprised that this does not work similar to RowList.

Not completely sure I have done it as it should be done but it works. I also set the the itemspacing=[0,6] for those items moving off the screen to the left. I also kept those column width=0. You might have to play around with your numbers depending on your grid and column sizes to get to work. You would think that a scrolling grid would be an easy thing to accomplish but not so, well as far as I can tell not as easy as it should be.

[parag]

Thanks for your answer. I will give it a try. It would have been so much simpler had Roku folks just provided a horizontal scrolling label list or simply the ability to set an orientation for it. BTW, since RowList does scroll, did you try using a RowList instead?

[btpoole]

"parag" wrote:
Thanks for your answer. I will give it a try. It would have been so much simpler had Roku folks just provided a horizontal scrolling label list or simply the ability to set an orientation for it. BTW, since RowList does scroll, did you try using a RowList instead?

I think I tried every component available, but for the app I needed the grid. Actually to get the desired operation and look, I combined a markuplist and (2) markupgrids. The list is controlled by one of the grids. I'm sure there are coders that could do it in a more efficient manner, but it  works as needed.