Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
UI/alignment Issues in loading PivotGrid in angular2

I need some help in fixing the below issues which I am facing as listed below. I tried doing the changes as per some examples in forums but facing some issues in making it work.

1. My requirement is all the column headers should be center aligned but the RowHeaders should be left aligned. I tried with the below CSS changes but it center aligns both column and row headers. My requirement is to center align only Column headers.
.ui-iggrid th,.ui-iggrid th.ui-state-default,.ui-iggrid th.ui-state-hover,.ui-iggrid th.ui-state-active{text-align:center;white-space:pre-wrap;height:1.6em}

2. Numeric and currency values should be right aligned, text values should be left aligned. I tried applying the following code in the rendering event, but it doesn't work properly
if ([0] && $.isNumeric([0][ui.owner.options.columns[i].key])) {
ui.owner.options.columns[i].columnCssClass = "right-align";

3. Loading timer doesn't show on expand of the row/column headers. Especially when the grid has more number of rows, it takes time to load and during that time no loading timer is being displayed. how to show the timer on need basis?

4. How to expand the first row by default when the pivotgrid loads

Please find the sample code attached for your reference

  • 23953
    Verified Answer
    Offline posted

    Hello Matt,

    Here is a Plnkr that demonstrates your requirements:

    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 = {


                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) {



                            for (var i = 0; i < ui.owner.options.columns.length; i++) {

                                if ([0] && $.isNumeric([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");



                                case "Sold Units":

                                    object.owner.options.columns[i].formatter = function (val, rec) {

                                        return jQuery.ig.formatter(val, "number", "#########0");



                            }//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.

  • 0
    Offline posted in reply to 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