Space between Each Tableviewrow Titanium Alloy

Question

How to get space between TableViewRow has show in above image.

Window.js

for(var i=0;i < election.length ;i++){
//  
    tblRow_Election[i] = Titanium.UI.createTableViewRow({
        height:(Ti.Platform.osname == 'ipad')?'280':'140',
        width:Titanium.Platform.displayCaps.platformWidth,
        left:(Ti.Platform.osname == 'ipad')?'20':'10',
        right:(Ti.Platform.osname == 'ipad')?'20':'10',
        color:'red',
        touchEnabled: true, 
        borderRadius:'4',
        borderWidth:'1',
        borderColor:'green',

    }); 

        data.push(tblRow_Election[i]);
}

    $.tbl_ElectionList.data = data;

Window.tss

"#tbl_ElectionList":{

    top:'40',
    height:'auto',
    backgroundColor:'transparent',
    left:'10',
    right:'10', 
    style:Titanium.UI.iPhone.TableViewStyle.GROUPED,
    borderColor:'green',
    separatorInsets: {
      left:0,
      right:0,
  },
}

Window.xml

<Alloy>
    <Window id="ElectionWin" class="ElectionWindow" >
        <View class="container" id = "view_Election" backgroundColor="white">
            <TableView id="tbl_ElectionList">
            </TableView>    
    </View>
    </Window>
</Alloy>

Unable to get gap between each row . Can any one advice me how to achieve the gap between each tableviewRow.

@All Thanks in Advance

Answer 1

First you have to set the separator style to none, so that you can define gaps yourself, you can set this in the table' tss, I would also not use the grouped style as this further constrains your styling:

"#tbl_ElectionList":{
    top:'40',
    height:Ti.UI.SIZE,
    left:'10',
    right:'10', 
    separatorStyle : Titanium.UI.iPhone.TableViewSeparatorStyle.NONE,
    borderColor:'green'
}

Try adding rows that way and you should see the gaps

var containerrow = Titanium.UI.createTableViewRow({
    height:(Ti.Platform.osname == 'ipad')?'280':'140',
    width: Ti.UI.FILL
}); 

// This innerView will be set in the middle of the row
// It will hold your main row content
// We make it smaller than the row to give padding
var innerView = Ti.UI.createView({
    width : '80%',
    height : '80%',
    color:'red',
    borderRadius:4,
    borderWidth:1,
    borderColor:'green'
 });
 containerrow.add(innerView);
 // Add to the table data
 data.push(containerrow);

Then of course set the data as you did before.