Hello Matt,

Here is a Plnkr that demonstrates your requirements: https://plnkr.co/edit/kuMxieGBuLaBkiwwau5G?p=preview

1. This can be done with " headerCssClass " option which is set in the " rendering " event.
2. The code works, but it needs to be executed in the " dataRendering " event so that the ui.owner.dataSource is available for use.
3. You can show loading timer in " tupleMemberExpanding " and hide it in " tupleMemberExpanded ". Keep in mind that the JavaScript executing will block the UI and you won't see the progress indicator.
4. In " dataSourceInitialized " event use the " expandTupleMember " API

Here is the grid configuration:

        this.optsGrid = {
            dataSource: this.data,
            height: "630px",
            width: "100%",
            autoGenerateColumns: false,
            allowSorting: true,
            allowHeaderRowsSorting: true,
            allowHeaderColumnsSorting: true,
            firstSortDirection: "ascending",
            firstLevelSortDirection: "ascending",
            levelSortDirections: [
                { levelUniqueName: "[Item_Id].[Item_Id].[Item_Id]", sortDirection: "descending" }
            ],
            defaultRowHeaderWidth: 130,
            allowResizing: true,
            gridOptions: {
                defaultColumnWidth: 100,
                features: [
                    {
                        name: "Resizing",
                        allowDoubleClickToResize: true,
                    }
                ],
                                        dataRendering: function (evt, ui) {
                        // return if the column collection is not generated yet
                        if (ui.owner.options.columns && ui.owner.options.columns.length === 0) {
                            return;
                        }
                        for (var i = 0; i < ui.owner.options.columns.length; i++) {
                            if (ui.owner.dataSource.data()[0] && $.isNumeric(ui.owner.dataSource.data()[0][ui.owner.options.columns[i].key])) {
                                ui.owner.options.columns[i].columnCssClass = "right-align";
                            }
                        }
                    },
                rendering: function (event, object) {
                    for (var i = 0; i < object.owner.options.columns.length; i++) {
                        object.owner.options.columns[i].headerCssClass = "center-align";
                        switch (object.owner.options.columns[i].headerText) {
                            case "Sold Dollars":
                                object.owner.options.columns[i].formatter = function (val, rec) {
                                    return jQuery.ig.formatter(val, "number", "currency");
                                };
                                break;
                            case "Sold Units":
                                object.owner.options.columns[i].formatter = function (val, rec) {
                                    return jQuery.ig.formatter(val, "number", "#########0");
                                };
                                break;
                        }//end switch
                    };
                }
            },
            dataSourceInitialized: function(evt, ui) {
              ui.owner.expandTupleMember("rowAxis", 0, 0, true);
            },
            tupleMemberExpanding: function(evt, ui) {
              //show progress indicator here
            },
            tupleMemberExpanded: function(evt, ui) {
              //hide progress indicator here
            }
        }

Hope this helps,
Martin Pavlov
Infragistics, Inc.

Martin Pavlov
I tried your code but it not run for me, i put debugger in the dataSourceInitialized event and it not call to this event, even i was do the same with others event and all work fine.

pls help