How to reposition the listview item

[patuku]

Hi there,

I'm trying to reposition the item inside listview but I never make it, I try updating by didInsertElement method on item object and call updatePosition to reflect the changes. But it seems does not affected.

I'm using Ember 1.11.0 and Ember-CLI 0.2.2

import Ember from 'ember';
import ListView from 'ember-list-view';
import ListItemView from 'ember-list-view/list-item-view';

var win = Ember.$(window);
var w   = win.width();
var h   = win.height();

var ListViewOneLine     = ListView.extend({
    width               : w,
    height              : h,
    rowHeight           : 46,
    itemViews           : {
        "cat"           : ListItemView.extend({
            classNames      : ['cat'],
            rowHeight       : 46,
            templateName    : "activity-row",
            _didInsertElement: function() {
                this.set('rowHeight', this.$().height());
                this.rowHeight = this.$().height();
                var parent  = this.get("parentView");
                var idx     = this.get("contentIndex");
                var pos     = parent.positionForIndex(idx);
                pos.x       = pos.x + 100;
                this.updatePosition(pos);
            }.on('didInsertElement')
        }),
        "dog"           : ListItemView.extend({
            classNames      : ['dog'],
            rowHeight       : 46,
            templateName    : "activity-row",
            _didInsertElement: function() {
                this.set('rowHeight', this.$().height());
                this.rowHeight = this.$().height();
                var parent  = this.get("parentView");
                var idx     = this.get("contentIndex");
                var pos     = parent.positionForIndex(idx);
                pos.x       = pos.x + 100;
                this.updatePosition(pos);
            }.on('didInsertElement')
        }),
    },
    heightForIndex      : function(idx) {
        return this.itemViewForIndex(idx).proto().rowHeight;
    },
    itemViewForIndex    : function(idx) {
        return this.itemViews[this.get('content').objectAt(idx).type];
    }
});

export default ListViewOneLine;

Any method I have to call to do this? Thanks in advance

[tim-evans]

This is unsupported. Could you explain your use case so we can figure out how to creat cowpaths for you to do this?

[patuku]

@tim-evans we want to create a timeline with a various type of data and below each data will show up the comments from all participants, which means each item will have their own rowHeight. I'm trying to update the position after the element available at DOM, since ember-listview using CSS transition. Is that doable? or maybe we can do it another way?

[stefanpenner]

we likely need to add hooks to invalidate the height externally..

[patuku]

Can you point me the direction how to invalidate the rowHeight and updatePosition correctly? so maybe I can do some PR also if I can add the method.

[stefanpenner]

This is something that may get added once @taras has a chance to help me finish syncing pack branch into master.

[patuku]

Okay then, I think I have to wait until it happened ... Thanks anyway, good work.

[drewcovi]

@stefanpenner any recommended paths forward for something like this?

We're in a project faced with a ton of data in some accordion style rows, so this would be a huge win. The only other solution I can think of is to rebuild the entire dataset inserting the drawer where needed, but the drawer would still need to be a known height since we can't dynamically update rowHeight...