Ag-grid throws error: this.gridOptionsWrapper.getNodeChildDetailsFunc is not a function - ag-grid

I have updated my ag-grid to version 24.1.0 but in chrome console it throws errors which says: this.gridOptionsWrapper.getNodeChildDetailsFunc is not a function and no columns is visible in grid.
Downgrade to 24.0.0 does not work either.
If I downgrade to 23.2.0 it works.
Anyone else have this type of issue?
I can't understand how to fix it.
There should be a ag-grid under the "Refresh" button.

I had a similar error this.gridOptionsWrapper.getIsGroupOpenByDefaultFunc is not a function and it was because I had a mismatch in my versions of ag-grid-[community/enterprise/react]

I had a similar problem and after some trial and error I found that it was because I had set [modules]="AllModules" on my grid instance. I was importing AllModules from enterprise and I think that caused an issue; I am guessing the enterprise version is missing getNodeChildDetailsFunc which community presumably has. I am using angular but I don't believe that matters in this case.
Configuration with the issue:
// typescript
import { AllModules } from '#ag-grid-enterprise/all-modules';
<!-- Corresponding HTML -->
<ag-grid-angular
(gridReady)="onGridReady($event)"
(selectionChanged)="onSelectionChanged($event)"
[gridOptions]="gridOptions"
[modules]="AllModules">
</ag-grid-angular>
Configuration that worked:
<ag-grid-angular
(gridReady)="onGridReady($event)"
(selectionChanged)="onSelectionChanged($event)"
[gridOptions]="gridOptions">
</ag-grid-angular>

Related

EJS giving error "Error: property value expected" when used inside a style attribute

I am trying to set a background color on my div based on a a color send down by my server. I can't solve this with classes because the color value could be any legal color value. However, VSCode is giving me an error when I type the following. Is EJS not allowed to use with css related stuff?
<div style="background-color: <%= display_color %>;"></div> // Error: property value expected
This is an ESLint error. ESLint is a linting tool. It can help you find and fix (mostly/usually) stylistic problems with your code. It's highly configurable, and can also be used to auto-fix some problems for you.
As you already found, you can disable the lint warning for a single site/line like so:
<div <% /* eslint-disable css-propertyvalueexpected */ %> style='background-color: <%= display_color %>;'></div>
If you want to disable the warning once and for all, create an ESLint configuration file and do it there.
If you haven't installed the ESLint NPM package to use it that way, you're probably getting this because of one of your VS Code extensions.

custom styling broken after upded to v4

After update from v3 to v4.8.3 do not work customizing components. My goal is to override Select component to get text color 'red'.
const styles = theme => ({ temp: { fontSize: 12, color: "red" })
...
<Select classes={{ root: classes.temp }} ....> ...</Select>
but MuiInputBase-input class always stay on top.
https://i.imgur.com/JGK7J89.png
I see that there are diffrents in styles loading by html head import, my current version(v4) is:
https://i.imgur.com/gAlECET.png
I see that import is doubled, and overrides my custom style.
On v3 all mui styles imports was placed on top of list and not mixed vs custom styles. I cant find more info to get solution and reason of doubling imports. where error may arise?
edit:
i must give some more details...
Problem appered after a big legacy project was updated. For represet my problem, i cut most of code and create demo on codesandbox .
Unfortunately it work fine on codesandbox, and dont let see a problem. if i download zip and start it - i have my problem. Tried on two machine ubuntu 18.04 and MacOS, both have that problem - colour red dont applied to second select. Some more detail are in issue if it will helpfull for someone. Reason in solution below
I have created sandbox for you where you can see the overwritten menu items.
Code sandbox: https://codesandbox.io/s/override-select-component-material-ui-c1io6?fontsize=14&hidenavigation=1&theme=dark
The reason was that nested component has wrong import statement. Wrong import that was work "properly" in v3 for some reason:
import InputBase from "#material-ui/core/InputBase/InputBase";
must be:
import InputBase from "#material-ui/core/InputBase";
becouse it, my styles was overriding by base style

Visual Studio Code with Native Script does not recognize all Native Script components

Visual Studio Code with Native Script does not recognise Native Script components sometimes in the component XML. I have one from the official tutorial and in it the ActionBar is recognized - but GridLayout is not:
'GridLayout' is not a known element:
1. If 'GridLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component.
XML looks like this:
<ActionBar title="Groceries">
<!-- On iOS devices, <ActionItem>s are placed from left to right in sequence; you can override that (as the code above does) by providing an ios.position attribute. -->
<ActionItem text="Share" (tap)="share()" android.systemIcon="ic_menu_share_holo_dark" ios.systemIcon="9" ios.position="right"></ActionItem>
</ActionBar>
<GridLayout rows="auto, *">
<!-- add-bar necessary since we moved the page up 20 over the status bar on iOS-->
<GridLayout row="0" columns="*, auto" class="add-bar">
<TextField #groceryTextField [(ngModel)]="grocery" hint="Enter a grocery item" (returnPress)="add()" col="0"></TextField>
<Image src="res://add" (tap)="add()" col="1"></Image>
</GridLayout>...
It seems totally arbitrary since for example StackLayout is no problem in another XML in same project.
As suggested in the error log make sure that you have included NO_ERRORS_SCHEMA in the respective NgModule (if using lazily loaded modules include the schema there as well)
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
#NgModule({
schemas: [NO_ERRORS_SCHEMA],
//... more code follows here
Side note: it might be just an incomplete snippet but still... the parent GridLayout does not have an enclosing tag
In my case, it was happening just for one component html though NO_ERRORS_SCHEMA was included in respective module of that file, deleting and creating that file solved the issue for me strange but it did happen.

Babel error: JSX value should be either an expression or a quoted JSX text

I'm getting an error from Babel when trying to compile my JSX code into JS. I'm new to react so apologies if this is an obvious issue, I wasn't able to find anything about it that seemed related. I'm attempting to use props in this chunk of code, and pass a pageTitle prop to my FieldContainer component. This is giving me an issue, though, that isn't letting the code compile to JS. I discovered in my searching that prop values should be passed between {}, but adding these did not help. Any ideas? Thanks!
It's hard to tell what you are trying to do here, but as the error says, the value of an attribute must be an expression {foo} or quoted text "foo".
In this case
Child={<LoginForm />}
or
Child={LoginForm}
is probably what you want.
I got this error because I failed to quote a property inside of the JSX:
<span aria-hidden=true ...
should have been
<span aria-hidden="true" ...
Just faced same issue, I was writing
component="Contacts"
resolved it by rewriting it as:
component={Contacts}

Errors when I return false inside html tags. Eclipse does not like returns outside functions or methods

Eclipse PDT is outputting errors every time it encounters a Return statement outside a function or method. See below the exact error message:
Cannot return from outside a function or method.
As an example I am including a code snippet below:
<form onsubmit="insertAbbr();return false;" action="#">
Eclipse doesn't like the return false; inside the tag.
After a lot of research I found a number of suggestions on how to fix it:
Attempt 1: call a Javascript function to return false
<form onsubmit="insertAbbr();javascript: function () {return false;};" action="#">
Same error.
Attempt 2: change the way I call the Javascript function
<form onsubmit="insertAbbr();javascript: return false;" action="#">
Same error.
And to add to the confusion, when I do check on all major browsers, the original syntax with return false; works without any errors.
Can anyone help me figure out how to resolve this issue? If I can help it, I would like to avoid turning off the validation or hiding the error in Eclipse.
Unfortunately, this appears to be a known bug in Eclipse:
https://bugs.eclipse.org/bugs/show_bug.cgi?id=353209
I haven't been able to find a workaround, but at least this confirms that it's not something you're doing wrong.