Wijmo Grid Issue - Upgrade to Angular 9

Posted by: kapil.r.shah on 1 July 2020, 2:00 am EST

  • Posted 1 July 2020, 2:00 am EST - Updated 3 October 2022, 7:02 am EST

    We recently upgraded Wijmo Grid to Angular 9 and have a issue.

    We are showing Before and After Data on the Wijmo Grid

    When I click the first “+” icon , it does not expand to show the data.

    When I click the second “+” icon, it shows the first “+” icon data.

    When I click the third “+” icon, it shows the second “+” icon data.

    This issue did not show up in Angular 7

    I am using “@grapecity/wijmo.all”: “^5.20193.0”,

    “wijmo”: “^5.20193.0”,

    
     initGrid(grid: wjcGrid.FlexGrid) {
        const self = this;
        // tslint:disable-next-line:no-unused-expression
        this.detail = new wjcGridDetail.FlexGridDetailProvider(grid, {
          detailVisibilityMode: wjcGridDetail.DetailVisibilityMode.ExpandMulti,
          createDetailCell: function(row) {
            const AuditLogId = row.dataItem.AuditLogId;
            console.log(AuditLogId);
    
            // filtering is done here because the api returns all the data
            self.auditLogDetailsDataCollectionView = new wjcCore.CollectionView(
              [],
              {
                filter: function(item) {
                  console.log('filtering');
                  return item.AuditLogId === AuditLogId;
                }
              }
            );
            //  self.LogDetails$ =  self.auditService.getAuditLogDetails(AuditLogId);
            self.store.dispatch(new fromStore.LoadAuditLogDetails(AuditLogId));
            self.LogDetails$ = self.store.select(fromStore.getAuditLogDetail);
            self.LogDetails$.subscribe(data => {
              console.log(data);
              self.auditLogDetailsDataCollectionView.sourceCollection = data;
            });
            console.log('before source changes');
    
            // First div is to show the user that data is loading
            // Second is to create the grid
            const cell = wjcCore.createElement(`<div>
                <div>Loading...</div>
                <div style="display: none"></div>
                </div>`);
            const gridChild = new wjcGrid.FlexGrid(cell.children[1], {
              columns: [
                { header: 'Property Name', binding: 'PropertyName', width: '*' },
                {
                  header: 'Before Edit',
                  binding: 'OriginalValue',
                  width: '4*',
                  wordWrap: true,
                  multiLine: true
                },
                {
                  header: 'After Edit',
                  binding: 'NewValue',
                  width: '4*',
                  wordWrap: true,
                  multiLine: true
                }
              ],
              headersVisibility: wjcGrid.HeadersVisibility.Column,
              isReadOnly: true,
              autoGenerateColumns: false,
              allowResizing: 'Both'
            });
            self.auditLogDetailsDataCollectionView.sourceCollectionChanged.addHandler(
              function() {
                const c0 = cell.children[0] as HTMLDivElement;
                c0.style.display = 'none';
                if (
                  gridChild instanceof wjcGrid.FlexGrid &&
                  gridChild.hostElement
                ) {
                  gridChild.itemsSource = self.auditLogDetailsDataCollectionView;
                  gridChild.hostElement.style.display = 'block';
                  grid.autoSizeRows(0, grid.rows.length - 1, false, 0);
                  gridChild.invalidate();
                  gridChild.autoSizeRows(0, gridChild.rows.length - 1, false, 0);
                  setTimeout(() => {
                    grid.autoSizeRows(0, grid.rows.length - 1, false, 0);
                  }, 15);
                }
              }
            );
            return cell;
          },
          rowHasDetail: function(row) {
            return (
              row.dataItem.Action === 'Update' &&
              row.dataItem.TypeFullName !== 'Governor Vote' &&
              row.dataItem.AuditLogDetails.length > 0
            );
          }
        });
        grid.rows.defaultSize = 34;
        grid.columnHeaders.rows.defaultSize = 34;
      }
    
    
    
    
    
    
    
    
  • Posted 1 July 2020, 2:17 am EST

    
     <wj-flex-grid  #gridDetail (initialized)="initGrid(gridDetail)" (itemsSourceChanged)="change(gridDetail)" [itemsSource]="auditDataCollectionView" [autoGenerateColumns]="false" [isReadOnly]="true" [allowResizing]="'Both'" style="width: 100%; font-size:10px"  >
    
                  <wj-flex-grid-column [header]="'Date'" [binding]="'EventDateUTC'" [format]="'MM/dd/yyyy hh:mm:ss tt'" [width]="'*'" ></wj-flex-grid-column>
                  <wj-flex-grid-column [header]="'Application'" [binding]="'ApplicationName'" [allowResizing] = "false" [width]="'*'" ></wj-flex-grid-column>
                  <wj-flex-grid-column [header]="'Category'" [binding]="'TypeFullName'" [allowResizing] = "false" [width]="'*'"></wj-flex-grid-column>
                  <wj-flex-grid-column [header]="'Activity Type'" [binding]="'Action'" [allowResizing] = "false" [width]="'*'" ></wj-flex-grid-column>
                  <wj-flex-grid-column [header]="'User'" [binding]="'UserName'" [allowResizing] = "false" [width]="'*'"  ></wj-flex-grid-column>
                  <wj-flex-grid-column [header]="'Activity'" [binding]="'Description'" [wordWrap] = "true" [multiLine]="true" [width]="'4*'">
    
    
                 <ng-template  wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item" [autoSizeRows]="false">
                   <ng-container *ngIf="item.Url !== null" >
                       <a  target="_blank" href="{{item.Url}}">{{item.Description}}</a>
                   </ng-container>
                   <ng-container *ngIf="item.Url === null">
                   {{item.Description}}
                   </ng-container>
                </ng-template>
    
              </wj-flex-grid-column>
    
          </wj-flex-grid>
    
    
    
  • Posted 1 July 2020, 4:04 am EST

    On debugging , I see in the console, that since the data is observable, initially self.sourceCollecself.auditLogDetailsDataCollectionViewcollection does not contain data and then after millisec , the data is populated.

    I think if I put the condition if self.sourceCollecself.auditLogDetailsDataCollectionViewcollection.length > 0 then only show the GridDetail it should work

    Where should I put this condition ?

    Thanks

    Kapil

  • Posted 1 July 2020, 4:43 am EST

    I am using “@grapecity/wijmo.all”: “^5.20193.0”,

    “wijmo”: “^5.20193.0”,

    Is their a higher version for Wijmo which supports Angular 9 which might help?

    Thanks

    Kapil

  • Posted 1 July 2020, 8:23 am EST

    Update:

    I am retriving the data correctly but still the wjcGridDetail.FlexGridDetailProvider does not show the detail data on clicking the “+” icon. Is this Angular 9 issue ?

    Please advice?

  • Posted 1 July 2020, 9:06 pm EST

    Hello Kapil,

    First of all, why are you using two different packages of Wijmo. In your package.json file, please remove the “wijmo” dependency and update your project to use @grapecity/wijmo package by going through the blog below:

    https://www.grapecity.com/blogs/wijmo-npm-package-changes

    The files in Wijmo package are not compatible with Angular 9. Any version greater than 19v3 of @grapecity/wijmo.xxx is compatible with Angular 9.

    Regarding your issue, we are sorry but we were unable to replicate the issue at our end. Pleaser refer to the sample attached that we used to replicate the issue.

    Can you please let us know whether we are missing something in order to replicate the issue? We cannot investigate the issue without reproducing it, so if you could modify the sample so that it replicates the issue, it will be really helpful for us.

    Also, is there any error thrown on the console? Can you also provide the actual version of Wijmo which you are using (the version of wijmo in package-lock.json file)?

    Regards,

    Ashwin

    flexgrid.zip

  • Posted 2 July 2020, 2:11 am EST - Updated 3 October 2022, 7:02 am EST

    Hi Ashwin,

    I have removed “wijmo”: “^5.20193.0” from package.json and only using “@grapecity/wijmo.all”: “5.20201.680” in dependencies.

    Please let me know whether I am using the correct version for Angular 9

    In package-lock.json, I have the following libraries for wijmo grid and other libraries.

    
     "@grapecity/wijmo.angular.grid": {
          "version": "5.20201.680",
          "resolved": "https://nexus.frb.gov/repository/npm/@grapecity/wijmo.angular.grid/-/wijmo.angular.grid-5.20201.680.tgz",
          "integrity": "sha512-uppY3yZ6fe4XlTMf23Xv7kPXqtnkDRAdBWnzm2VEEuMPOywsqUu8FLoFmP0LmGmCOZ0ovAheMaJL/DUAnEgGGg==",
          "requires": {
            "@grapecity/wijmo": "5.20201.680",
            "@grapecity/wijmo.angular.base": "5.20201.680",
            "@grapecity/wijmo.grid": "5.20201.680",
            "@grapecity/wijmo.grid.detail": "5.20201.680",
            "@grapecity/wijmo.input": "5.20201.680"
          }
        },
        "@grapecity/wijmo.angular.grid.detail": {
          "version": "5.20201.680",
          "resolved": "https://nexus.frb.gov/repository/npm/@grapecity/wijmo.angular.grid.detail/-/wijmo.angular.grid.detail-5.20201.680.tgz",
          "integrity": "sha512-o3qlmfPWyRJjs8SD/wXS0PNeorsyfg3yowvpk87iYK83ci6JKv/PLp5O9Hv7Um248TVVOy7wTWBFvuxbbGeK+A==",
          "requires": {
            "@grapecity/wijmo": "5.20201.680",
            "@grapecity/wijmo.angular.base": "5.20201.680",
            "@grapecity/wijmo.grid": "5.20201.680",
            "@grapecity/wijmo.grid.detail": "5.20201.680"
          }
        },
    
    

    I could not get your sample to build. But looked at the code and see some difference. Not sure if its causes the issue

    Sample Code :

    
    headersVisibility: wjcGrid.HeadersVisibility.All,
    					isReadOnly: true,
    					autoGenerateColumns: false,
    					itemsSourceChanged: (s) => {
    						setTimeout(() => {
    							grid.autoSizeRows();
    							gridChild.invalidate();
    						}, 100)
    					}
    				});
    
    				self.products.sourceCollectionChanged.addHandler(function (
    					s,
    					e
    				) {
    					var c0 = cell.children[0] as HTMLDivElement;
    					c0.style.display = "none";
    					gridChild.itemsSource = self.products;
    					gridChild.hostElement.style.display = "block";
    				})
    
    
    

    My Code :

    
     headersVisibility: wjcGrid.HeadersVisibility.Column,
              isReadOnly: true,
              autoGenerateColumns: false,
              allowResizing: 'Both'
            });
            self.auditLogDetailsDataCollectionView.sourceCollectionChanged.addHandler(
              function() {
                const c0 = cell.children[0] as HTMLDivElement;
                c0.style.display = 'none';
                if (
                  gridChild instanceof wjcGrid.FlexGrid &&
                  gridChild.hostElement
                ) {
                  gridChild.itemsSource = self.auditLogDetailsDataCollectionView;
                  gridChild.hostElement.style.display = 'block';
                  grid.autoSizeRows(0, grid.rows.length - 1, false, 0);
                  gridChild.invalidate();
                  gridChild.autoSizeRows(0, gridChild.rows.length - 1, false, 0);
                  setTimeout(() => {
                    grid.autoSizeRows(0, grid.rows.length - 1, false, 0);
                  }, 5);
                }
              }
            );
    
    

    I do not get any error on the console.

    I see that the data is there. When I click the “+” handler , it seems the data is there but does not expand. Is there a way to increase the height.

  • Posted 2 July 2020, 2:12 am EST - Updated 3 October 2022, 7:02 am EST

  • Posted 2 July 2020, 2:41 am EST

    package-lock.json

    
     "@grapecity/wijmo": {
          "version": "5.20201.680",
          "resolved": "https://nexus.frb.gov/repository/npm/@grapecity/wijmo/-/wijmo-5.20201.680.tgz",
          "integrity": "sha512-cMElRKAdYfvMlIqK7iurwjWciwqMlccw3QXg6vu++HQKXa2bqeYtVRmGFj0ZjYobwC0TVy9nsH/9IoO3c03Tyw==",
          "requires": {
            "@grapecity/wijmo.styles": "5.20201.680"
          }
        },
        "@grapecity/wijmo.all": {
          "version": "5.20201.680",
          "resolved": "https://nexus.frb.gov/repository/npm/@grapecity/wijmo.all/-/wijmo.all-5.20201.680.tgz",
          "integrity": "sha512-T3VxD7YhE/5RPYe0TFC9ZK7JWtK7NSzBzjXmeJ1MO1E3UhuRRVeHNjAYHZbak+0nFFzQaf1Fj5y8fvGpHUZm1A==",
          "requires": {
            "@grapecity/wijmo.angular.all": "5.20201.680",
            "@grapecity/wijmo.angular2.all": "5.20201.680",
            "@grapecity/wijmo.knockout.all": "5.20201.680",
            "@grapecity/wijmo.purejs.all": "5.20201.680",
            "@grapecity/wijmo.react.all": "5.20201.680",
            "@grapecity/wijmo.vue2.all": "5.20201.680",
            "@grapecity/wijmo.webcomponents.all": "5.20201.680"
          }
        },
     
    
    
    
  • Posted 2 July 2020, 5:35 pm EST

    Hello Kapil,

    It seems that your issue is due to the height of the row. If you will refer to the my sample, you will observe that I have added an itemsSourceChanged event on the child grid which will resize the rows. But, you have already added a setTimeout method to auto-size rows. You will need to increase this timeout to about 100.

    gridChild.autoSizeRows(0, gridChild.rows.length - 1, false, 0);
    setTimeout(() => {
    	grid.autoSizeRows(0, grid.rows.length - 1, false, 0);
    }, 100);
    

    Let me know whether this works for you.

    ~regards

  • Posted 5 July 2020, 1:22 am EST

    Hi Ashwin,

    I changed the timeout to 100 and it did not work. I refactored the code to use itemsSourceChanged event and commented out my code .

    Its working but not perfectly.

    When I click the “+” icon for the first time , it does not show the details but when I click the same “+” again , it starts working properly.

    Is the "ItemsourcChanged Event introduced for Angular 9 ?

    Is the issue related to timeout event?

    I do not see any errors on console.log

    Please advice

    Please advice

    
     headersVisibility: wjcGrid.HeadersVisibility.Column,
             isReadOnly: true,
             autoGenerateColumns: false ,
             allowResizing: 'Both' ,
        [b]     itemsSourceChanged: (s) => {
       					setTimeout(() => {
       						grid.autoSizeRows();
       						gridChild.invalidate();
       					}, 200);
       				}
    
           });
        [/b]   self.auditLogDetailsDataCollectionView.sourceCollectionChanged.addHandler(
             function(s,e) {
               const c0 = cell.children[0] as HTMLDivElement;
               if (
                 gridChild instanceof wjcGrid.FlexGrid &&
                 gridChild.hostElement
               ) {
                 c0.style.display = 'none';
                 gridChild.itemsSource = self.auditLogDetailsDataCollectionView;
                 gridChild.hostElement.style.display = 'block';
               /*   grid.autoSizeRows(0, grid.rows.length - 1, false, 0);
                 gridChild.invalidate();
                 gridChild.autoSizeRows(0, gridChild.rows.length - 1, false, 0); */
                /*  setTimeout(() => {
                   grid.autoSizeRows(0, grid.rows.length - 1, false, 0);
                 }, 5); */
               }
             }
           );
    
    
    
    
  • Posted 5 July 2020, 6:32 pm EST

    Hi Kapil,

    Can you let me know what exactly happens when you click on the ‘+’ icon for the first time? Is the detail displayed but it’s height is very small to notice?

    Regarding itemsSourceChanged, this event is added when the FlexGrid was created initially so it is not added in angular 9 but it has been there since the start.

    Can you please make sure that this event is fired? You can add a console.log statement inside this event handler and if it is logged in the console, then this event is fired and if not then it is not fired.

    ~regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels