The Angular-slickgrid is encountering an issue where it is unable to access the property "hostView" as it

Hey there developers,

I've been experimenting with the angular slickgrid library and attempting to incorporate the rowDetailView feature it offers.

The issue I'm facing is that while I can expand the view by clicking on it, I'm unable to close it. Whenever I try to toggle the rowDetailView open/close, I encounter 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)
    ...

Below are my gridOptions settings:

this.gridOptions = {
  enableAutoResize: true,
  enableSorting: true,
  ...
};

This is the simulateServerAsyncCall() method I'm using:

simulateServerAsyncCall(item: any) {
  console.log('this is the item passed to the stimFunc: ' + JSON.stringify(item));
  ...
}

If you need to access my frontend code, here it is:

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

I'm stuck trying to figure out if I overlooked something or if there's another underlying issue causing this problem.

Appreciate the assistance!

angulartypescriptangular-slickgrid

Answer №1

Hey there! I finally managed to solve the issue:

So, when using angularslickgrid and adding gridoptions, one of the requirements for rowDetailView is to have a process method that returns a new promise. It took me a while to figure this out, but after closely examining the demos, I noticed that the promise being resolved in the demo is actually the same parameter passed to the method (simulateServerAsyncCall()) which triggers my process.

For anyone facing a similar problem in the future, take note of what @ghiscoding mentioned: Make sure to add your component to both the declarations and entryComponents arrays in your app.module.ts. In your component where your angular-slickgrid is defined under the gridOptions:

`

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


The method should return the same item passed to it as the new promise :


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

`

This solution worked for me and now my angular-slickgrid rowDetailView is functioning perfectly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Different methods to prompt TypeScript to deduce the type

Consider the following code snippet: function Foo(num: number) { switch (num) { case 0: return { type: "Quz", str: 'string', } as const; case 1: return { type: "Bar", 1: 'value' } as const; default: thr ...

typescript

Exploring the TypeScript handbook: Utilizing rootDirs for Virtual Directories

Exploring the concept of Virtual Directories with rootDirs in the handbook, we find an interesting example demonstrating how modules can be imported from different source folders by combining multiple rootDirs. // File Structure src └── views ...

typescript

Guide to setting a default value in a asynchronous list within an ng-select (Angular 2+, ng-select, and rxjs)

I recently started using ng-select and incorporated the typeahead feature to fetch server data as the user types. This is how I implemented it: I created an observable for the list of agents which gets updated whenever a new string is inserted agents$: Ob ...

angularbehaviorsubjectrxjs-observablesangular-ngselect

Conceal the Angular Material toolbar (top navigation bar) automatically when scrolling downwards

In my Angular application, the main navigation consists of a standard toolbar positioned at the top of the page. My goal is to have this navigation bar smoothly scroll up with the user as they scroll down, and then reappear when they scroll back up. I at ...

cssangulartypescriptuser-experience

Is it possible to integrate Firebase Storage into a TypeScript/HTML/CSS project without the use of Angular or React?

For my project, I am aiming to create a login and register page using TypeScript. Currently, my code is functioning well even without a database. However, I would like to implement Firebase for storing user credentials so that the login process becomes mor ...

javascripthtmltypescriptfirebasefirebase-storage

Encountering issues with npm install @angular/material for installing angular2 material package

Attempting to install angular2 material using the command npm install @angular/material: [xxx@Latitude-E5550 quickstart]$ npm install @angular/material [email protected] /home/xxx/quickstart └── @angular/[email protected] npm ...

angularnpmangular-material

Having trouble finding the right path. Is there an issue with Angular routing?

After successfully creating a simple application, I decided to write test cases for it. My first attempt was to work on the routing part of the application. Check out the code on StackBlitz The routing code snippet is as follows: Main module: export cons ...

javascriptangularjasmine

The issue persists in Angular 5 and asp.net MVC where the ID number continues to increase despite being deleted

Currently, I am using Angular 5 (VS CODE) for the front-end and asp.net mvc/entity framework (VS2017) for the back-end. My CRUD methods are functioning properly; however, I have encountered an issue where the ID of a newly created row keeps increasing even ...

c#asp.netasp.net-mvcangulartypescript

Issue encountered: Jest database test does not end when using testcontainers

I am currently in the process of testing my database within my Node application written in Typescript. I have implemented Postgres 15 and Testcontainers for this purpose. Strangely, my code functions correctly when executed manually, with all clients being ...

node.jstypescriptpostgresqltesting

Developing a personalized validation function using Typescript for the expressValidator class - parameter is assumed to have a type of 'any'

I'm seeking to develop a unique validation function for express-validator in typescript by extending the 'body' object. After reviewing the helpful resource page, I came across this code snippet: import { ExpressValidator } from 'expre ...

typescriptexpressexpress-validator

Receiving user input in Angular 6 for a function

Need help getting input from a text box and passing it to a function. Encountering the error message "_co.randomCode is not a function." New to Angular and have tried various approaches but can't seem to solve this issue. app.component.html <div ...

angular

acquire tabulations from every single document within the templates on DocuSign

When using Docusign, it is possible to retrieve tabs data for a specific document within a template by specifying the documentId. However, I have not been able to locate a method to obtain tabs data for all documents contained within a template. ...

node.jstypescriptdocusignapi

I lost my hovering tooltip due to truncating the string, how can I bring it back in Angular?

When using an angular ngx-datatable-column, I added a hovering tooltip on mouseover. However, I noticed that the strings were too long and needed to be truncated accordingly: <span>{{ (value.length>15)? (value | slice:0:15)+'..':(value) ...

angulartypescripttooltip

Modifying a chosen row within a table using Angular

Currently, I am working on developing a To-Do list application using Angular 11. The application includes a Bootstrap table where data is displayed upon clicking the add button. Each row in the table contains icons for delete, edit, save after editing, and ...

angularbootstrap-4

Using Angular Material to create a data table with a fixed footer and paginator feature

I am facing a challenge with displaying the sum of rows data in the footer section of an Angular Material Table that has fixed footer and header, as well as a paginator. How can I calculate the sum of rows data to show in the footer? https://i.sstatic.net/ ...

angularangular-material

Assign the chosen option in the Angular 2 dropdown menu to a specific value

Currently, I am utilizing FormBuilder in order to input values into a database. this.formUser = this._form.group({ "firstName": new FormControl('', [Validators.required]), "lastName": new FormControl('', [Validators.required]), ...

angulartypescripthtml-selectangular2-formbuilder

Learn how to subscribe to Azure Event Grid using Angular without the need for a backend service layer

I am currently working on an Angular project and I am looking to set up Azure Event Grid subscription directly from the client-side without the need for a backend service. After exploring different options, I have not yet found a straightforward solution. ...

javascriptangularazureazure-eventgrid

Angular2: PrimeNG - Error Retrieving Data (404 Not Found)

I'm facing an issue with using Dialog from the PrimeNG Module. The error message I keep getting is: Unhandled Promise rejection: (SystemJS) Error: XHR error (404 Not Found) loading http://localhost:4200/node_modules/primeng/primeng.js I followed the ...

angularjstypescriptxmlhttprequesthttp-status-code-404primeng

Error message 2339 - The property 'toggleExpand' is not recognized on the specified type 'AccHeaderContextProps | undefined'

When utilizing the context to share data, I am encountering a type error in TypeScript stating Property 'toggleExpand' does not exist on type 'AccHeaderContextProps | undefined'.ts(2339). However, all the props have been declared. inter ...

reactjstypescriptreact-context

Switching templates within a component based on conditions in Angular 2

Situation: I am working with a component called COMP that needs to load one of two templates, which are named TEMPLATE_1 and TEMPLATE_2. The choice between the two is based on the type of user who is logged in - either an ADMIN user or a NORMAL user. Can ...

angularangular2-routing