Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

  • 'docked' header node for grouped grid

    Hello, I wonder if there's an easy way to have the header nodes for a grouped grid to 'dock' below the grid's header when, while scrolling, it would disappear.

  • #2
    Actually I'm experimenting with a naive but functional solution like that:

    Code:
    isc.Label.create({
        ID: "dockedLabel", width: 600,
        baseStyle: "groupNode"
    });
    
    isc.ListGrid.create({
        ID: "companyList",
        width: 600, height: 525,
        alternateRecordStyles: true,
        autoFetchData: true,
        dataSource: orderItemLocalDS,
        canEdit: true, editEvent: "click",
        showAllRecords: true,
        groupByField: ["category", "shipDate"],
        groupStartOpen: "all",
        canMultiGroup: true,
        sortField: "shipDate",
        sortDirection: "ascending",
        fields: [
            {name: "orderID", includeInRecordSummary: false},
            {name: "itemDescription"},
            {name: "category"},
            {name: "shipDate"},
            {name: "quantity"},
            {name: "unitPrice"},
            {
                name: "Total", type: "summary",
                recordSummaryFunction: "multiplier",
                align: "right",
                formatCellValue: function (value) {
                    if (isc.isA.Number(value)) {
                        return value.toCurrencyString("$");
                    }
                    return value;
                }
            }
        ],
        initWidget: function () {
            dockedLabel.setHeight(this.cellHeight);
            dockedLabel.setSnapOffsetTop(this.headerHeight);
            this.gridComponents = ["header", dockedLabel, "body"]
            this.Super("initWidget", arguments);
        },
        whenScrolled: function () {
            var firstRow = this.getVisibleRows()[0];
            firstRow++;
            var firstRecord = this.getRecord(firstRow);
            var groupHeaderRecords = [];
            var childRecord = firstRecord;
            for (var index = firstRow - 1; index >= 0; index--) {
                var record = this.getRecord(index);
                if (record.isFolder) {
                    if (record.groupMembers.contains(childRecord)) {
                        groupHeaderRecords.addAt(record, 0);
                        childRecord = record;
                    }
                }
            }
            var groupTitle = "";
            for (var index = 0; index < groupHeaderRecords.getLength(); index++) {
                var groupHeaderRecord = groupHeaderRecords.get(index);
                groupTitle += " " + groupHeaderRecord.singleCellValue; // groupValue or singleCellValue ?
            }
            if (groupTitle !== "") {
                dockedLabel.setContents(groupTitle.trim())
            }
        }
    });
    
    companyList.observe(companyList, 'scrolled', 'observer.whenScrolled()');
    but of course you could do something way cooler :-)

    Comment


    • #3
      Looks like you've pretty much solved it (and using the gridComponents API is what we would have recommended).

      Comment

      Working...
      X