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

Exploring matching routes with Next.js + Jest

Issue with Unit Testing MenuItem Component Despite my efforts to achieve 100% coverage in my component unit tests, I have encountered an uncovered branch specifically within the MenuItem component. To offer more insight, here is the parent component that ...

reactjstypescriptunit-testingnext.jsts-jest

Adding an element within an ngFor iteration loop

I'm currently working on a code snippet that displays items in a list format: <ul> <li *ngFor="#item of items">{{item}}</li> </ul> These items are fetched from an API through an HTTP call. Here's the code snippet for tha ...

javascriptangularangular2-directives

Navigating Through the Angular Migration Journey

As I was researching how to integrate ES2020 with Angular, I came across the following useful link: https://angular.io/guide/migration-update-module-and-target-compiler-options The document begins by stating "This migration adjusts the target and module s ...

angular

Best practices for utilizing forwardRef and next/dynamic in next.js version 13.4 with the "react-email-editor" component

I've been attempting to utilize the "react-email-editor" library in a Next.js project. My goal is to copy the email content generated within the editor to the clipboard. Since the library relies on browser interaction and the use of the "window" objec ...

reactjstypescriptnext.js

What methods are available to restrict the values of properties to specific keys within the current type?

I am looking to declare an interface in typescript that is extensible through an indexer, allowing for the dynamic association of additional functions. However, I also want sub properties within this interface that can refer back to those indexed functio ...

typescripttypescript-types

What is the best way to pass a conditional true or false value to React boolean props using TypeScript?

I am currently utilizing the Material UI library in combination with React and Typescript. Whenever I attempt to pass a conditional boolean as the "button" prop of the component, I encounter a typescript error stating: Type 'boolean' is not assi ...

reactjstypescriptmaterial-ui

Executing additional code after all tests have finished in Mocha.js

In the world of MochaJS testing, it is customary to have before and after blocks for setup and teardown operations. But what if we want to execute an extra cleanup step after all test files have been processed? This is crucial to ensure that any lingering ...

javascriptnode.jstypescriptunit-testingmocha.js

Typescript: Subscribed information mysteriously disappeared

[ Voting to avoid putting everything inside ngOnit because I need to reuse the API response and model array in multiple functions. Need a way to reuse without cluttering up ngOnInit. I could simply call subscribe repeatedly in each function to solve the p ...

angulartypescriptasynchronousrxjs

What is the best way to verify both a null value and a length simultaneously within a template condition?

There is a data that can be null or an empty array, but the template should still be rendered if leaseApDto is not null or has a length greater than 0. I attempted to use the condition model.leaseApDto !== null || model.leaseApDto.length !=== 0, but they ...

angulartypescript

Tips for setting up chrome-app typings in Typescript 2

I am looking to eliminate the typings in our Typescript project. After successfully removing most typings dependencies with Typescript 2, I'm left with just one for chrome-app: https://github.com/uProxy/uproxy/compare/master...fortuna:master When usi ...

typescriptgoogle-chrome-extensionnpmgoogle-chrome-apptypescript-typings

Maintain query parameters in Angular6 while routing with canActivate

When using Auth guard to verify login status and redirecting to the login page if a user is not logged in, there seems to be an issue with losing all query parameters during the redirection process. I attempted to preserve the query params by adding { qu ...

javascriptangularangular6angular-routing

Dealing with race conditions in Angular 2 nested resolvers and managing them effectively using RX

Back with an intriguing predicament! Currently, I am in the process of developing an angular2 application using RXjs observable data stores to supply data to my app. Upon launch, if a user is logged in, the app resolvers fetch the relevant user data and po ...

angularrxjsangular2-routingangular2-services

Type 'ɵɵComponentDeclaration' must be provided with at least 7 but no more than 8 type arguments

Recently, in my project, I encountered an issue with the ng-particles v3.5.3 library on my login and sign-in pages. The problem arose suddenly and was displayed in my terminal as follows: Error: node_modules/ng-particles/lib/ng-particles.component.d.ts:18: ...

angularnpmyarnpkg

The custom validation in nestjs is throwing an error due to an undefined entity manager

I've been working on developing a custom validation for ensuring unique values in all tables, but I encountered this error: ERROR [ExceptionsHandler] Cannot read properties of undefined (reading 'getRepository') TypeError: Cannot read proper ...

node.jstypescriptvalidationnestjsnestjs-typeorm

Display your StencilJs component in a separate browser window

Looking for a solution to render a chat widget created with stenciljs in a new window using window.open. When the widget icon is clicked, a new window should open displaying the current state while navigating on the website, retaining the styles and functi ...

javascriptreactjstypescriptfrontendstenciljs

Displaying images dynamically in React from a source that is not public

There are 3 image options being imported, determined by the value in the state which dictates which of the 3 to display. import csv from '../../images/csv.svg'; import jpg from '../../images/jpg.svg'; import png from '../../images/ ...

reactjstypescript

What is the best way to extract the value from an anchor element?

To retrieve the value from an input tag, we can use <id>.value like this: <input type="text" #solutionInput (keyup)="0"><br> <solutionDetail [solutionName]="solutionInput.value" > </solutionDetail> Here, 'solutionInput& ...

htmlangular

ESlint is unable to parse typescript in .vue files

After using vue ui to build my project, here is the content of my package.json: "@vue/cli-plugin-eslint": "^4.1.0", "@vue/cli-plugin-typescript": "^4.1.0", "@vue/eslint-config-standard": "^4.0.0", "@vue/eslint-config-typescript": "^4.0.0", "eslint": "^5.1 ...

typescriptvue.jseslint

"Unfortunately, SockitIO is repeatedly running into issues with being blocked by

I keep encountering an error in my application (using Node.js as API) and Angular 8 as frontend. The error message says: Access to XMLHttpRequest at 'http://localhost:3000/socket.io/?EIO=3&transport=polling&t=NQJpoTm' from origin 'ht ...

node.jsangularexpresssocket.io

When using Sequelize, you may notice that extra spaces are automatically added at the end of the DataTypes.CHAR data type

Here is an example of how I structure my Store.ts file: import {DataTypes, Model, ModelAttributes} from "sequelize"; export default class Store extends Model { declare id: number declare name: string declare phone: string } export const S ...

typescriptpostgresqlsequelize.js