0

Good day fellow devs,

I'm using the angular slickgrid library and I've tried adding the rowDetailView functionality provided.

my problem is that I can click to exspand the view but I can't close the view. as soon as I click on the symbol again to close/open the rowDetailView I get the following error : 

ERROR
core.js:15723
TypeError: Cannot read property 'hostView' of undefined
core.js:15723
message:"Cannot read property 'hostView' of undefined"
stack:"TypeError: Cannot read property 'hostView' of undefined
    at RowDetailViewExtension.push../node_modules/angular-slickgrid/fesm5/angular-slickgrid.js.RowDetailViewExtension.onBeforeRowDetailToggle (http://localhost:4200/vendor.js:169190:48)
    at RowDetailView.<anonymous> (http://localhost:4200/vendor.js:169026:27)
    at Event.notify (http://localhost:4200/vendor.js:357049:35)
    at SlickGrid.handleClick (http://localhost:4200/vendor.js:355962:39)
    at Event.notify (http://localhost:4200/vendor.js:357049:35)
    at trigger (http://localhost:4200/vendor.js:361492:18)
    at HTMLDivElement.handleClick (http://localhost:4200/vendor.js:363417:7)
    at HTMLDivElement.dispatch (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js:2:42347)
    at HTMLDivElement.push../node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js.$event.dispatch (http://localhost:4200/vendor.js:351849:30)
    at HTMLDivElement.v.handle (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js:2:40348)"

here is my gridOptions: 

    this.gridOptions = {
      enableAutoResize: true,
      enableSorting: true,
      enableColumnReorder: false,
      enableFiltering: true,
      enablePagination: true,
      enableAsyncPostRender: true,
      asyncPostRenderDelay: 0,
      rowHeight: 50,
      enableCellMenu: true,
      rowSelectionOptions: {
        selectActiveRow: true,
      },
      enableRowDetailView: true,
      datasetIdPropertyName: 'id',
      rowDetailView: {
        process: (item) => this.simulateServerAsyncCall(item),
        loadOnce: true,
        singleRowExpand: true,
        useRowClick: false,
        panelRows: this.detailViewRowCount,
        preloadComponent: LoaderComponentComponent,
        parent: this,
        viewComponent: RowDetailViewComponent,
      },
      params: {
        angularUtilService: this.angularUtilService,
      }
    };

Here is the simulateServerAsyncCall() method I use: 

  simulateServerAsyncCall(item: any) {
    console.log('this is the item passed to the stimFunc: ' + JSON.stringify(item));
    return new Promise((resolve) => {

      if (this.businessClients === undefined) {
        console.log('this company has no sites');
        this.rowView.siteDataToPass = null;
      } else {
        console.log('its seems there might be a sight hiding somewhere');
        this.rowView.siteDataToPass = this.businessClients[item.tenantId].sites;
      }
      resolve(this.businessClients);
    });
  }

if my frontend is needed it is here : 

    <div id="companiesGrid" class="col" style="margin-top:15px">

      <angular-slickgrid appSlickgridTour gridId="compGridList" [columnDefinitions]="columnDefinitions"
        [gridOptions]="gridOptions" [dataset]="dataset" (onAngularGridCreated)="angularGridReady($event)">
      </angular-slickgrid>

    </div>

I just can't seem to figure out if I'm missing something or if something else is the problem.

thanks all.

Andre
  • 41
  • 5
  • Not sure if it's your issue, but you might have forgot to add the row detail component ( (that is the `viewComponent` one) into your App Module `entryComponents` array since it's a dynamic component. I saw that I missed that part in my [Wiki - Row Detail](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Row-Detail#app-module) so I updated it. If you can't find it then the best is to clone the Angular-Slickgrid-demos repo and try it from there – ghiscoding Jun 17 '20 at 21:32
  • Nope I do have my viewComponent added in both my declarations and entryComponents array hahah. I already cloned the demos and updated my code to fit the demo (hence the same process method name) – Andre Jun 18 '20 at 06:23
  • What is exactly is the process ? I understand its when you click to expand the row that you do an async call and if you log the results of the item it returns all the details from the row clicked. thats where I want to take the data and pass it to my viewComponent to populate my new angulargrid (companies have different employees so I''m creating a "nested grid" if you understand what I mean ahha – Andre Jun 18 '20 at 06:35

1 Answers1

0

Hello okay so I got it figured out:

when you use the angularslickgrid and you add your gridoptions and all those when you add the rowDetailView one of the requirements is to have the process method that returns a new promise. I couldn't really figure it out but then I rubber ducked the demos and saw the new promise he resolves in the demo is the same param passed to the method(simulateServerAsyncCall()) which fires on my process.

So for future readers if you having the same problem please note to what @ghiscoding said: add your component to both the declarations and entryComponents arrays in your app.module.ts. at your component where your angular-slickgrid is under the gridOptions :

`

enableRowDetailView: true, rowDetailView":{ .... .... process:(item) => this.yourMethod(item) //to resolve a new promise }

that method should return the same item that was passed to that method as the new promise : 

 yourMethod(item: any) {
    return new Promise((resolve) => {
      resolve(item);
    });
  }

`

this is what worked for me and got my angular-slickgrid rowDetailView working perfectly

Andre
  • 41
  • 5
  • 1
    Also just to point out, `simulateServerAsyncCall` is meant to be replaced by your own implementation. For demo purposes I use a lot of Promises just to simulate what that would look like with a real backend implementation, typically these Promises are to be replaced by your Http calls which are async calls. Oh any upvote of the lib is appreciated, if you haven't done that yet ;) – ghiscoding Jun 18 '20 at 18:28