Can somebody suggest a way to get values in cellEditorParams from an api for agRichSelectCellEditor.
what i have is
{
headerName: "Name",
field: "Name",
cellRenderer: 'keyValueCellRenderer',
cellEditor: 'agRichSelectCellEditor',
cellEditorParams: (params) => {
let url ='/customers/new-customers;
if (params.data.CustomerType && params.data.CustomerType.Id)
url = url + '?type=' + params.data.CustomerType.Id;
// get data from url and have it pushed to editor select list
},
keyCreator: keyValueFilter,
filter: 'agSetColumnFilter',
editable: true, sortable: true
},
function keyValueFilter(param) {
return param.data && param.data.Text ? param.data.Text : ''
}
I have seen example for 'Reference Data' on ag-grid but that seems simple as data are already available before editing.
This code is in plain javascript but a solution in angular would be fine too.
Code (sorry it working in editor, not sure how use stackblitz )
https://stackblitz.com/edit/js-a4dkax
Thanks
Related
I'm using ag-grid enterprise and I would like to apply floating filters for all my columns. Sometimes the filter can be alphanumeric but in other cases it should only accept numbers.
I tried to manage this following this example from the ag-grid doc:
const gridOptions = {
columnDefs: [
{
field: 'age',
filter: 'agNumberColumnFilter',
filterParams: {
allowedCharPattern: '\\d\\-\\,',
numberParser: text => {
return text == null ? null : parseFloat(text.replace(',', '.'));
}
}
}
],
// other grid options ...
}
but it doesn't work... I was wondering if an extra configuration is needed for the allowedCharPattern to work.
This is how a colDef looks like in my project:
{
...commonProperties,
field: column.fieldName,
suppressSizeToFit: false,
sortable: true,
resizable: true,
minWidth: getMinWidth(column.fieldName),
width: column.colWidth,
filter: 'agTextColumnFilter',
floatingFilter: true,
floatingFilterComponentParams: {
suppressFilterButton: true,
},
filterParams: {
allowedCharPattern: '\\d\\-\\,',
numberParser: (text) => {
return text == null
? null
: parseFloat(text.replace(',', '.'))
},
},
}
Am I missing something?
thanks in advance
Use "agNumberColumnFilter" instead of "agNumberColumnFilter"
Please check if you are using latest version of ag grid. It was not working for me on older version. It started working after upgrading to latest version 27.2.0
I am trying to implement combobox select with "agRichSelectCellEditor" in Anuglar 8 and getting following error in console while trying to edit the field.
For reference: I am following https://plnkr.co/edit/PgRoxXgx7NL5epn2B1X9?p=preview this is an example.
{
headerName: "Prefix Code",
field: "prefixCode",
filter: true,
editable: true,
cellRenderer: "prefixCodeRenderer",
cellEditor: "agRichSelectCellEditor",
cellEditorParams: {
values: [1, 2, 3],
cellRenderer: "prefixCodeRenderer"
}
}
ERROR TypeError: Cannot read property 'componentFromFramework' of null
You probably have forgot to define the Framework components like the example
this.frameworkComponents = {
moodRenderer: MoodRenderer,
moodEditor: MoodEditor,
numericEditor: NumericEditor
};
Or if you did, please link a project with the code that is not working.
I am trying to validate a field in my ExtJs file by sending a hit to my controller.. all works fine and I get the result back.. but the problem is that I am unable to get the me.article in the code as it shows undefined so my logic in the controller does not return the result as expected.
Any help would be highly appreciated.
Note: this only happens for Shopware v.5.4.6. It works fine for Shopware 5.2.
Shopware.apps.Article.view.detail.Base.prototype.createLeftElements = function() {
var me =this, articleId = null, additionalText = null;
console.log('article', me.article);
if (me.article instanceof Ext.data.Model && me.article.getMainDetail().first() instanceof Ext.data.Model) {
articleId = me.article.getMainDetail().first().get('id');
additionalText = me.article.getMainDetail().first().get('additionalText');
}
me.nameField = Ext.create('Ext.form.field.Text', {
name: 'name',
dataIndex: 'name',
fieldLabel: me.snippets.name,
allowBlank: false,
enableKeyEvents:true,
checkChangeBuffer:700,
labelWidth: 155,
anchor: '100%',
vtype:'remote',
validationUrl: '{url controller="MyController" action="check"}',
validationRequestParam: articleId,
validationErrorMsg: '{s name=detail/base/number_validation}Validation Message.{/s}'
});
// .. some code here which is irrelevant
return [
me.supplierCombo,
me.nameField,
me.mainDetailAdditionalText,
me.numberField,
{
xtype: 'checkbox',
name: 'active',
fieldLabel: me.snippets.active,
inputValue: true,
uncheckedValue:false
},
{
xtype: 'checkbox',
name: 'isConfigurator',
fieldLabel: me.snippets.configurator.fieldLabel,
inputValue: true,
uncheckedValue:false
}
];
};
I am not that deep into ExtJS, but perhaps the CSRF-protection causes this problem? Perhaps you need to whitelist your controller.
https://developers.shopware.com/developers-guide/csrf-protection/#addition-to-backend-token-validation
I am very confused by the Sencha documentation for ExtJS. The documentation begins with a Getting Started guide which highlights and illustrates the importance on a suitable structure for the classes and source code of your application. But the provided examples then break all the conventions laid down by the Getting Started guide. Instead of code being broken down into appropriate Model, Store, View, etc. class files the examples are provided as a single file with example source code which is not easily re-usable in separate source files.
I started by following the Portal example (http://docs.sencha.com/ext-js/4-1/#!/example/portal/portal.html) as this is the sort of application I want to create. I wanted to enhance the Portal example and add in a screen which would display a grid and use a RESTful web service as the data backend. I have created the backend I just want to create the front-end. So I looked at the RESTful example (http://docs.sencha.com/ext-js/4-1/#!/example/restful/restful.html)
I have tried to copy the RESTful example into the recommended pattern of seperate classes e.g. Model, Store, View:
Model:
Ext.define('MyLodge.model.Member', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'email', type: 'string'},
{name: 'href', type: 'string'}
]
});
Store:
Ext.require('MyLodge.model.Member');
Ext.define('MyLodge.store.Members', {
autoLoad: true,
autoSync: true,
model: 'MyLodge.model.Member',
proxy: {
type: 'rest',
url: 'http://localhost:8888/rest/memberapi/members' ,
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
}
},
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;
if (name == 'Destroy' ) {
record = operation.records[0];
verb = 'Destroyed';
} else {
verb = name + 'd';
}
Ext.example.msg(name, Ext.String.format( "{0} member: {1}", verb, record.getId()));
}
}
});
View:
Ext.define('MyLodge.view.content.MemberGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.membergrid',
initComponent: function(){
var store = Ext.create('MyLodge.store.Members' );
Ext.apply( this, {
height: this.height,
store: store,
stripeRows: true,
columnLines: true,
columns: [{
id : 'name',
text : 'Name',
flex: 1,
sortable : true,
dataIndex: 'name'
},{
text : 'E-Mail',
width : 150,
sortable : true,
dataIndex: 'email'
},{
text : 'Href',
width : 200,
sortable : true,
dataIndex: 'href'
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new MyLodge.model.Member());
rowEditing.startEdit(0, 0);
}
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}]
});
this.callParent(arguments);
}
});
But I am not sure where to put the code to control the grid row selection and enable the Delete button:
grid.getSelectionModel().on('selectionchange', function(selModel, selections){
grid.down('#delete').setDisabled(selections.length === 0);
});
Also when I press the Add button I get the following error:
Uncaught TypeError: Object [object Object] has no method 'insert'.
Any help would be appreciated.
You are having scoping issues. Basically the variable store is defined only in the initComponent function and therefore of local function scope.
Your handler function has it's own scope. It is firing in the scope of the toolbar button. So if you say this in the handler it would refer to the button. Hence you can say this.up('panel').store - and that gives you the correct reference to the store backing your grid panel.
Another advice is not to implement everything at once. Write a little bit to see if it works and then add to it little by little.
RE: the docs examples, I agree that it's frustrating, but there's not many options. Having a fully-MVC-style implementation of each example would not only be onerous to produce, but would also probably make point of the example get lost in the structure.
RE: your question about the where to "put" the code to control the grid, I would recommend setting up a controller with listeners for the events on the grid in the control() section. This will let you decouple the handling of the events that are fired by your grid from the view itself.
I have the response json string returned from the first FS(filteringSelect) with the contents of the second , but i can't make it load it. I've tried with store.clearOnClose , but it doesn't work , my javascript is valid. How do you do this ?
Here is the code from my form with the 2 filteringSelects:
$category=new Zend_Dojo_Form_Element_FilteringSelect("category");
$category->setLabel("Category");
$category->setAttrib("id","category")
->setAttrib("onChange","
var cat=dojo.query('#category ')[0].value;
dojo.xhrPost({
url: 'getsubcategories',
handleAs: 'text',
content: { category:cat } ,
load: function(data, ioArgs) {
var store=subCatStore.store;
store.data=data;
store.close()
},
error: function(data,ioArgs) {
if(typeof data== 'error'){
console.warn('error');
console.log(ioArgs);
}
}
});
"
);
$category->setOptions(array(
"autocomplete"=>false,
"storeId"=>"category",
"storeType"=>"dojo.data.ItemFileReadStore",
"storeParams"=>array("url"=>"getcategories"),
"dijitParams"=>array("searchAttr"=>"name")
)
)
->setRequired(true);
$subCategory=new Zend_Dojo_Form_Element_FilteringSelect("subCategory");
$subCategory->setLabel("Sub Category")
->setAttrib("id","subCategory");
$subCategory->setOptions(array(
"autocomplete"=>false,
"storeId"=>"subCatStore",
"jsId"=>"subCatStore",
"storeType"=>"dojo.data.ItemFileReadStore",
"storeParams"=>array("clearOnClose"=>true,"url"=>"getsubcategories"),
"dijitParams"=>array("searchAttr"=>"name")))
->setRequired(true);
I've red on the net that this is the way to do it , get the element of the 2nd dropdown and
passed it values when 1st changes. Am i Wrong ?
Tnx for your attention.
i dont know about zf, but this is how we do in js :
new dijit.form.FilteringSelect({
id: "country",
name: "country",
store: countryStore,
required: false,
onChange: function(country) {
dijit.byId('state').query.countryId = country ;
},
searchAttr: "name"
},"country");