No waterfall for DataTable?

I've just started using a simple DataTable component and have extended it to allow for special handling of headers (meaning row 0 is treated specially).

Everything is working well, but as soon as I put my component inside a Drawer component, it starts throwing ''Uncaught TypeError: this.$[n].waterfall is not a function".

I have moved everything at the jsfiddle link below. Am I just using this thing wrong?

https://jsfiddle.net/jfilling/gyepo5va/

Comments

  • I know this doesn't answer your question but maybe it helps you solve your problem.

    I created a DataTable derivative that has a header and scroller, and is sortable. It's based on moon.DataTable - I imagine you could modify it easily for enyo.DataTable.

    Here is the code (not optimized or properly documented!). You should pass in an array of components as headerComponents for whatever you want in header. You can pass in sortParam
    or sortFunc with each of the column header components, that will be applied against the collection. There's a known issue where a resize doesn't automatically occur if the Scroller is showing.
    
    enyo.kind({
        name:"opflo.DataTable",
        kind:"moon.DataTable",
        style:"margin-bottom:30px;",
    
        initContainer: function () {
            var ops = this.get('containerOptions'),
                nom = ops.name || (this.containerName);
            this.createChrome([ops]);
    
            if (this.headerComponents&&this.headerComponents.length){
                enyo.mixin(this.headerComponents[0], {name:"headerRow", kind:"moon.TableRow", ontap:"handleHeaderTapped"});
            }
            this.$.headerTable.createComponents(this.headerComponents, {owner:this});
            this.discoverControlParent();
            if (nom != this.containerName) {
                this.$[this.containerName] = this.$[nom];
            }
        },
    
        sortByColumnName: function(s,e){
            var columnName = e&&e.columnName;
            var direction = e&&e.direction?e.direction:"asc";
    
            var columnHeaderObject = this.$[columnName];
            if (columnHeaderObject){
    
                columnHeaderObject.addRemoveClass("desc", direction==="desc");
                this.handleHeaderTapped(s,{originator:columnHeaderObject});
            }
        },
    
        handleHeaderTapped: function(s,e){
            var o = e&&e.originator;
    
            if (o.kindName!=="moon.TableCell"||!this.collection||!this.collection.length){
                return;
            }
            var headerCS = this.$.headerRow.getClientControls();
            var sortColNum = 0;
            var sortParam = null;
            var sortFunc = null;
            var sortFuncParams = null;
            var sortAsc = true;
    
            for (var a=0; a<headerCS.length; a++) {
                var headerCell = headerCS[a];
                headerCell.removeClass("sort-arrow");
                if (o&&o===headerCell){
                    sortColNum = a;
                    sortParam = headerCell.sortBy;
                    sortFunc = headerCell.sortFunc;
                    sortFuncParams = headerCell.sortFuncParams;
                }
            }
            if (o&&(sortParam||sortFunc||sortFuncParams)){
                o.addClass("sort-arrow");
                sortAsc = !o.hasClass("desc");
                o.addRemoveClass("desc", sortAsc);
                this.collection.sortAsc = sortAsc;
                if (sortFunc){
                    this.collection.sort(enyo.bind(this.owner, sortFunc));
                }else if (sortParam){
                    this.collection.sort(function(a,b){
                        a = a.raw();
                        b = b.raw();
                        if (!a){
                            return -1;
                        }else if(!b){
                            return 1;
                        }else{
                            if (!a[sortParam]){
                                return sortAsc?-1:1;
                            }else if (!b[sortParam]){
                                return sortAsc?1:-1;
                            }else{
                                if (a[sortParam]<b[sortParam]){
                                    return sortAsc?-1:1;
                                }
                                if (a[sortParam]>b[sortParam]){
                                    return sortAsc?1:-1;
                                }
                            }
    
                        }
                        return 0;
                    });
                }else if (sortFuncParams){
                    this.collection.sort(enyo.bind(this.owner, sortFuncParams)(s,e));
                }
            }
            this.resize();
        },
    
        setHeaderTitle: function(s,e){
            var index = e&&e.index;
            var title = e&&e.title;
    
            var headerCS = this.$.headerRow.getClientControls();
            headerCS[index].setContent(title);
        },
    
        getHeaderColumns: function(s,e){
            return this.$.headerRow.getClientControls();
        },
    
        handleResize: function(s,e) {
            this.inherited(arguments);
    
            if (this.$.scroller.getStrategy().$.clientContainer){
                var classes = this.$.scroller.getStrategy().$.clientContainer.hasClass("v-scroll-enabled");
                this.$.headerTable.addRemoveClass("moon-scroller-client-wrapper v-scroll-enabled", classes);
                this.$.headerTable.resize();
            }
    
        },
    
        containerOptions: {
            kind:"FittableRows",
            classes:"enyo-fill",
            style:"width:100%;",
            fit:true,
    
            components:[
                {name:"headerTable", kind:"moon.Table", style:"width:100%;"},
                {	name:"scroller", kind:"moon.Scroller", fit:true,
                    components:[
                        {name: 'container', kind:"moon.Table", style:"width:100%;"}
                    ]
                },
            ]
    
        }
    
    });
    


    Cage
Sign In or Register to comment.