Tableview scrolltoindex or scrolltotop is not able to show from the table from top

You must Login before you can answer or comment on any questions.

Hi, I am using titanium sdk version 2.1.0.GA IOS simulator host operating system is MacOS. Titanium Studio, build: 2.1.0.201206251749.

I am trying to show my data using table view which seems quite trivial. The data is rendered properly but i want the scroll to start from the top of the table. i tried scrolltotop and scrolltoindex.I also tried styling and setting animation to true. But no luck. Below is the sample code First i create a table view

var aTableView = Ti.UI.createTableView({
 
        backgroundColor : '#fff',
        backgroundImage : 'ui/common/images/background.png',
        width : 500,
        height : 1500, 
        top : -7,
        backgroundColor : 'transparent',
        transform : t,
        style : Titanium.UI.iPhone.TableViewStyle.PLAIN,
 
    });
Then i create an array of data to be added and add it to the window
aTableView.data = array;
        aTableView.scrollToIndex(1, {
            position : Titanium.UI.iPhone.TableViewScrollPosition.TOP,
            animated : true
        });
        win.add(aTableView);
        win.open();
The window that renders it shows the table from the center. I want it from the top. Any help greatly appreciated. thanks in advance.

3 Answers

Accepted Answer

I am not sure if you are trying to use animations, transforms or scrolltoindex to fix a non-existant problem.

But a few things jump out from your original code that makes me think that you may not be using tables as they are intended.

You have used backgroundColor twice and added a transform property without any reference to it.

You have a width of 500, which in itself is not an issue but means that when displayed on iPhones and most Androids the table will be too wide to display.

You have a height of 1500, which means that most of the table will not be visible on most (almost all) devices. You may have placed this table on a scrollview to compensate but it would be very difficult to try and scroll the table separately from the underlying scrollview.

By setting both the width and height to Ti.UI.FILL then the table will fill the entire window not already covered by the status bar, title bar and tab bar. The rows will automatically scroll within that view - you do not need to compensate for number of rows you have.

The table will automatically show the first rows at the top of the screen. 

var aTableView = Ti.UI.createTableView({
    backgroundColor: 'transparent',
    height: Ti.UI.FILL, 
    style: Ti.UI.iPhone.TableViewStyle.PLAIN,
    width: Ti.UI.FILL
});
win.add(aTableView);
 
var array = [
    { title: 'One' },
    { title: 'Two' },
    { title: 'Three' },
    { title: 'Four' },
    { title: 'Five' },
    { title: 'Six' },
    { title: 'Seven' },
    { title: 'Eight' },
    { title: 'Nine' },
    { title: 'Ten' },
    { title: 'Eleven' },
    { title: 'Twelve' },
    { title: 'Thirteen' }
];
 
aTableView.setData(array);

— answered 10 months ago by Malcolm Hollingsworth
answer permalink
2 Comments

  • Thanks so much guys. I kind of fixed it by making the window size to auto and tableview to Ti.Ui.Fill. I have declared the transform above the code.Forgot to paste it here.My bad.

    But,Now i am getting the table start from not the first but the second row. Any light on this.

    — commented 10 months ago by Shashank Dass

  • Re-paste your revised code so we can see if anything jumps out.

    When you say the table starts from the second row, does this mean the first row is not displayed at all, even after scrolling up and down?

    If it is not displaying at all then until I have seen the revised code check these two things; (both of these may be obvious to you - but just guessing for the minute)

    1. Make sure the top property is not a negative number on the tableview. If there is any top try removing it temporarily to see if anything changes.
    2. Verify your array variable definitely has the first row you are not seeing or you are not accidentally overwriting it. If you are building your array from a loop, confirm you are starting at the beginning.

    Also you should try not to use width/height auto as its meaning can be confused depending on where it is placed.

    — commented 10 months ago by Malcolm Hollingsworth

I think you might be confusing the scroll position of the tableview with its position in its parent view (or parent window).

scrollToIndex() is designed to scroll a particular row of the tableview into view. So if you needed the TableView to scroll to row 45, for example, you could do that.

If you want the tableview itself to be at the top of your window, you need to specify that like this: 

var aTableView = Ti.UI.createTableView({
    top: 0,
    left: 0,
    right: 0,
    height: 200,
...
}
Setting top to 0 puts the TableView at the top of the view that you add it to. (this assumes that your window is using the default layout of composite; not something like vertical, in which case top means something different).

Note that I set left and right to 0 to make sure the TableView fills the width of its parent view. I gave it an arbitrary height of 200, because I'm not sure what sort of interface you're trying to create. I see you are setting your TableView to a height of 1500. I am guessing that you're trying to make it big enough to accomodate all the rows. You don't need to do that. Just set the TableView to the height you want to see on the screen, and it will be able to hold as many rows as you give it.

Thanks so much Malcolm. I have used scrolltoindex somewhere later in the code.i fixed this by removing it. Also i have taken note of your suggestion. I am now in favour of using it as a percentage. I guess that should be ok.

Your Answer

Think you can help? Login to answer this question!