Expanding a cell renders over the top of the item below it

[marc]

 

I have created a custom ​SummaryViewCell by extending TKListViewCell. This has a default height and shows summary information. Upon being selected it reloads the the item and switches to use a DetailedViewCell which has an increased height.

Whilst this detailed cell displays correctly, it renders over the top of the cell below it. See screenshot attached.

Does TKListView support mixed height cells? Am i missing something fundamental?

thanks in advance for your help.

[Jack]

Hi Marc,

Thank you for your interest in our components.

Yes, TKListView supports cells with different height. However, the default linear layout supports only cells with equal height. The item height is specified by the itemSize property of the layout. Consider the following sample:

TKListViewLinearLayout *layout = (TKListViewLinearLayout*)listView.layout;
layout.itemSize = CGSizeMake(0, 50);

You should use TKListViewStaggeredLayout if you want to use cells with different size. It defines a delegate where you can specify the height for every cell. The code snippet below demonstrates this:

TKListViewStaggeredLayout *layout = [TKListViewStaggeredLayout new];
layout.delegate = self;
layout.spanCount = 1;
listView.layout = layout;

- (CGSize)staggeredLayout:(TKListViewStaggeredLayout*)layout sizeForItemAtIndexPath:(NSIndexPath*)indexPath
{
    if (indexPath.row == 1) {
        return CGSizeMake(0, 100);
    }
    return CGSizeMake(0, 50);
}

I hope this helps. Should you have other questions, we will be glad to assist.

Regards,
Jack
Telerik

[marc]

Thank you for the response, that has worked perfectly.

[Bhauvik T]

Hi all,

My project need to be implemented similar like your . Can you or anyone show me how to change the height of the row that we selected in order to display more data detail of this row. ? When we select another row , the last row will go back to normal . 

[Jack]

Hi,

You should adopt TKListViewLayoutDelegate and override itslistView:layout:sizeForItemAtIndexPath: method:

let dataSource = TKDataSource()

override func viewDidLoad() {

    dataSource.itemSource = [ "Item 1", "Item 2", "Item 3" ]

    let listView = TKListView(frame: self.view.bounds)
    listView.autoresizingMask = UIViewAutoresizing(rawValue: UIViewAutoresizing.FlexibleWidth.rawValue | UIViewAutoresizing.FlexibleHeight.rawValue)
    listView.dataSource = dataSource
    self.view.addSubview(listView)

    let layout = listView.layout as! TKListViewLinearLayout
    layout.delegate = self
}

func listView(listView: TKListView, layout: TKListViewLinearLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    if indexPath.row == 1 {
        return CGSize(width:100, height:100)
    }
    return CGSize(width:100, height:50)
}

You can invalidate the layout by calling the invalidateLayout method:

layout.invalidateLayout()

Should you have any further questions, we will be glad to help.

Regards,
Jack
Telerik