Angular 7.x, ag-grid 19.1.4, ag-grid: invalid colDef property 'singleClickEdit' - ag-grid-angular

I'm locked to ag-grid-enterprise 19.1.4. I'm getting the warning:
ag-grid: invalid colDef property 'singleClickEdit'
Yet looking at the source-code for 19.1.4, the interface export interface ColDef has the property.
This is a column definition:
{
headerName: 'Foo', field: 'foo_data', editable: true,
valueSetter: this.valSetter,
valueGetter: this.valGetter,
singleClickEdit: 'true',
cellEditor: 'agRichSelectCellEditor', cellEditorParams: this.getFooList
},
Everything works as expected when running the application. I get single-click editing. However the warning is unexpected.

Related

ReactTable - Error: Text strings must be rendered within a <Text> component

I am trying to import data into a ReactTable. Currently, I am just using test data to set the table up and ensure it is displaying how I want it to.
I am getting the following error:
Error: Text strings must be rendered within a <Text> component.
Here is the code for the table columns:
const columns = [{
Header: 'ID',
accessor: 'id',
}
,{
Header: 'Name',
accessor: 'name' ,
},
etc...
Code for table:
<ReactTable
data={this.state.data}
columns={columns}
/>
The data is printing correctly in the console, but when I implement the <ReactTable> I get the error above.

SailsJS update and mySQL custom ID column not working

In SailsJS, I created a model Profiles including a custom primary key as follows:
module.exports = {
tableName: 'tbl_profiles',
autoPK: false,
autoCreatedAt: false,
autoUpdatedAt: false,
attributes: {
user_id: {
type: 'integer',
size: 11,
columnName: 'user_id',
unique: true,
primaryKey: true,
},
...
Now, when calling the blueprint route to update a user profile, I get the following error:
ER_BAD_FIELD_ERROR: Unknown column 'tbl_profiles.id' in 'where clause'
Debugging this down (and seeing question SailsJS and mySQL custom ID name not working with blue prints not helping) I found out that the update is carried through all right in the db and that the record is changed but in the controller callback function an error and status 400 is raised nevertheless:
Profiles.update({user_id: req.param('id')}, req.body).exec(function(err, profile) {
if (err) {
return res.status(400).json(err);
} else {
return res.status(200).json(profile);
}
});
Tracing down the SQL involved in /node_modules/sails-mysql/node_modules/mysql/lib/protocol/sequences/Sequence.js:48:14, it seems the following statement is executed just after the update is finished (note the final WHERE clause):
SELECT `tbl_profiles`.`user_id`,
`tbl_profiles`.`lastName`,
`tbl_profiles`.`firstName`,
`tbl_profiles`.`date_of_birth`,
`tbl_profiles`.`address_line1`,
`tbl_profiles`.`address_line2`,
`tbl_profiles`.`zip_code`,
`tbl_profiles`.`city`,
`tbl_profiles`.`gender`,
`tbl_profiles`.`country_id`,
`tbl_profiles`.`phone`,
`tbl_profiles`.`user_id`
FROM `tbl_profiles` AS `tbl_profiles`
WHERE `tbl_profiles`.`id` = undefined
Where could I set SailsJS/Waterline to use the custom column ID? Setting autoPK true either in the beginning or the end of the model wouldn't do the trick..

SailsJS - How to specify string attribute length without getting error when creating record?

I'm using Sails 0.9.8 paired with MySQL and wanting to do something like this
localhost:1337/player/view/<username of player>
instead of
localhost:1337/player/view/<id of player>
So I put something like this in the model:
'username' : {
type: 'string',
unique: true,
minLength: 4,
maxLength: 32,
required: true
},
But I've got an error whenever I run sails lift:
{ [Error: ER_TOO_LONG_KEY: Specified key was too long; max key length is 767 bytes] code: 'ER_TOO_LONG_KEY', index: 0 }
So after I run through the modules, I discovered that it was because by default Sails give string-type attribute a length of 255 in the database. The given length can be overridden with 'size', but it causes another error when creating a record.
'username' : {
type: 'string',
unique: true,
minLength: 4,
maxLength: 32,
size: 32,
required: true
},
The error caused when creating a record:
Error: Unknown rule: size
at Object.match (<deleted>npm\node_modules\sails\node_modules\waterline\node_modules\anchor\lib\match.js:50:9)
at Anchor.to (<deleted>\npm\node_modules\sails\node_modules\waterline\node_modules\anchor\index.js:76:45)
at <deleted>\npm\node_modules\sails\node_modules\waterline\lib\waterline\core\validations.js:137:33
The question is, how do I specify the size of the string column (so that I can use the unique key) without getting an error when creating a record?
You could work around this by defining custom validation rules via the types object. Specifically the given problem could be solved by defining a custom size validator that always returns true.
// api/models/player.js
module.exports = {
types: {
size: function() {
return true;
}
},
attributes: {
username: {
type: 'string',
unique: true,
minLength: 4,
maxLength: 32,
size: 32,
required: true
}
}
}
The marked answer is quiet old. As per the latest sails version (1.0.2 as of the date of writing this answer),
I used the columnType attribute like this:
attributes: {
longDescription: {
type: 'string',
columnType: 'text'
}
}

Extjs 4: Render store data into Ext.form.Panel without using MVC framework

Below you will find an Ext.form.Panel that has two fields. I chose two random fields in my model that have data. They are not rendering in the form. Note that I am not using MVC in the Extjs framework in this code. How can I get these fields to render? I've pasted the relevant output from the store.data.toSource() to show that I do in fact have data in my store, and only a single record. To view the image with a little larger resolution, right click it and view in another tab.
NOTE: .toSource() only works in Mozilla Firefox
I've tried executing this after creating the form, but it didn't work:
taskForm.getForm().loadRecord(store.getAt(0));
Code:
var taskForm = Ext.create('Ext.form.Panel', {
title: 'Task',
id: 'form1',
width: 600,
height: 200,
bodyPadding: 10,
renderTo: 'TaskEditForm',
store: store,
style: {
'position': 'fixed',
'top': '100px',
'left': '10px'
},
items: [{
xtype: 'label',
labelAlign: 'right',
name: 'project_id',
fieldLabel: 'Project ID',
width: 100
}, {
xtype: 'label',
labelAlign: 'right',
name: 'user_responsible',
fieldLabel: 'User',
width: 100
}],
buttons: [{
text: 'Save Task Detail',
handler: function (btn) {
alert(store.data.toSource());
}
}]
});
========
Edit: #Evan
This code gives the error below:
taskForm.getForm().loadRecord(store.getAt(0));
Error:
TypeError: record is undefined
...
return this.setValues(record.data); // ext-all-debug.js (line 109529)
Line 109529:
loadRecord: function(record) {
this._record = record;
return this.setValues(record.data);
},
Have you read the documentation? store.data is a MixedCollection that holds a bunch of records. The documentation for the load method says:
A class which handles loading of data from a server into the Fields of
an Ext.form.Basic.
You can't just throw in random parameters and expect stuff to work.
What you probably want is:
form.getForm().loadRecord(store.getAt(0)); // Load the first store record into the form

Filtering a comboxes remote store locally in ExtJs

I have an ExtJs combobox. Its store loaded using JSON (using MyStore class below). I want to load all the values to the store, and then filter them with the text entered in the combo's textfield (preferably using the typeAhead feature).
The problem is that I want to do the filtering on the client side (combo's mode property is 'remote', by default). I don't want my combo to reload its store every time I type something.
How can I do that?
Thanks.
Here's my store class :
MyStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(jsonUrl, storeId, id, description, isAutoLoad, cfg) {
cfg = cfg || {};
GenericStore.superclass.constructor.call(this, Ext.apply({
storeId: storeId,
root: 'result',
url: jsonUrl,
autoLoad: isAutoLoad,
fields: [
{
name: id
},
{
name: description
}
]
}, cfg));
}
});
And the combo :
xtype: 'combo',
fieldLabel: 'The Combo',
width: 150,
store: myStoreData,
valueField: 'id',
displayField: 'name',
minChars : 0,
editable : false,
itemId : 'my-combo'
To achieve this you must:
Construct MyStore class with "isAutoLoad" config option as "true"
In your combobox config set the "mode" config option to "local" (see Built the combo config code bellow for another config)
Here is my short example:
Construct myStoreData variable
var myStoreData = new MyStore({
autoLoad: true, //so the store will load automatically
...any_other_config_option...
});
Built the combo config
{
xtype: 'combo',
fieldLabel: 'The Combo',
width: 150,
store: myStoreData,
// myStoreData is already loaded before as it have 'autoLoad' config set to true
// and act as localstore to populate the combo box item
// when the combo "mode" config set to 'local'
valueField: 'id',
displayField: 'name',
minChars : 0,
editable : true, //before was editable : false,
itemId : 'my-combo',
mode: 'local', // by default this was mode: 'remote'
typeAhead: true // by default this was typeAhead: false
}
You will want to use the store.filter() method. You can use this to use user-entered information to filter your store that the combo box uses. This is taken from the ExtJS API documentation for data.store.
store.filter([
{
property : 'name',
value : 'Ed',
anyMatch : true, //optional, defaults to true
caseSensitive: true //optional, defaults to true
},
//filter functions can also be passed
{
fn : function(record) {
return record.get('age') == 24
},
scope: this
}
]);
In my case I had to add the config option lastQuery:'' to the combo.
explanation : http://progex.wordpress.com/2010/03/26/extjs-combo-dropdown-does-not-filter-on-first-trigger/
Add listener to your store on 'load' event, do filtering, by removing or flagging records, if removing it is clear load to combo component, if flagging you need to recognize those flaggs in combo and display or not...
It hard to go with more details if I do not see your code for store and combo, so I can give you only general idea