I have a tree grid displaying groups and their children (there isn't nested groups inside groups, just plain children).
One column of the tree grid is a widget column. I saw in the documentation that the 'widget' property of a widget column could be a Ext.Widget or any Ext.component.
As I needed to display two buttons and one combobox in the column, I specified the widget of the widget column to be like this:
widget: {
xtype: 'container',
layout: 'column',
items: [{
xtype: 'button',
},{
xtype: 'combo',
displayField: 'name',
valueField: 'id'
},{
xtype: 'button'
}]
}
This works just fine. Now I use some custom filters by applying them on the treeStore of the treeGrid.
But sometimes (and I can't manage to know when exactly), I have this error in the console, and I can't open any groups anymore :
The console error (in yellow the calls to my custom filter methods on the tree store) :
The extjs code that caused the error:
Do you have any guess what this error could be, or by what it could be caused?
I don't have any guess about what could cause this as I am to new with extjs :/ !
Thanks a lot in advance !
Related
Hopefully you can help me with a problem that i have.
I'm using React Table on my site.
I'd like to use the properties filterable and sortable at the same time. I've noticed that when I use filterable, sortable doesn't work anymore. Can be a bug of React Table? Do you know how can I tackle this problem?
const columns = () => [
{
Header: 'Name',
accessor: 'name',
sortable: true,
},
{
Header: 'ID',
accessor: 'id',
width: 80,
sortable: true,
},
{
Header: 'Country',
accessor: 'country',
width: 100,
filterable: true,
Filter: ({ filter, onChange }) => (
// DROPDOWN WITH OPTIONS ...
),
},
]
You definitely can make a table filterable and sortable at the same time with react-table hooks. I created an example to illustrate it:
You don't need to pass sortable or filterable props to your array of columns. If you implemented filtering on your table and want to add sorting all you have to do is to follow next steps:
Import useSortBy hook
Call it inside useTable hook after useFilters hook : useTable(..., useFilters, useSortBy)
Add to your th element some UI which will show a user the order of sorting:
<span>
{column.isSorted ?
column.isSortedDesc
? " 🔽"
: " 🔼"
: ""}
</span>
I forgot to mention that i was using react-table v6. As some of you have said, definitely was possible to use filterable and sortable at the same time. Unfortunately it seems that this need to be done using a different row. If for example you want to filter by a dropdown, this is place underneath the column label.
After debugging a lot, I noticed that my problem came from CSS. The filterable row was on the top of the columns label and therefore, disabling the sortable function. Not sure if you have ever seen an example of how to tackle this. To replace the column label for the the select tag. If so.. i'll really appreciate if you share it.
Thanks a lot for your answers
This is a modification that shows how it can work for you (as your entire solution was not shared).
See: https://github.com/vaclav18/react-table/blob/master/examples/filtering/src/App.js
Live example is here:
https://react-table.tanstack.com/docs/examples/filtering
The live example is for filtering only - so the changes would be at:
line 3
line 277
line 347 The sortable: true is not necessary here
Please refer to /docs/src/pages/docs/api/useSortBy.md for more insight.
I am trying to display input fields when the user selects a certain element from the dropdown component. I tried to do this by adding an eventListener onto the dropdown component but this does not seem to work.
When I inspect the page and go to sources -> event listener breakpoint I see that it detects the mouse click event but when I try to add an eventListener I get the following error "Cannot read property 'addEventListener' of null". This is the code for the dropdown component:
{
PlaceHSolder: "",
Fields:[{
Name:"The color of the car",
Label: 'The color of the car',
Type:'Lookup',
Fields: ['id', 'color'],
FieldValues:[
{"id":"1", "color":"red",id: '1red'},
{"id":"2", "color":"blue",id: '2blue'},
{"id":"3", "color":"green",id: '3green'}
],
LabelField: 'color',
ValueField: 'id',
IsSingle: true,
triggerAction: 'all' ,
queryParam: 'q',
queryMode: 'remote',
listeners: {
select: function () {
console.log( this.getValue());
}
},
renderTo: document.body
}],
Required: false
}
I am unsure as to what exactly is wrong in my code as I am relatively new. To give a more clear explanation of what I want to do, here is a picture:
https://imgur.com/KVDh2Xp
In this picture I have a dropdown component where I want to select the blue element. After that I am planning to let go the dropdown and show various other labels and components depending on which text the user selects.
Using the inspection tool in Google Chrome shows me the following error:
https://imgur.com/a/SzSIKxr
Any help would be appreciated. Thanks.
I am using a kendo grid with grouping enabled with inline edit options. one column is using custom editor drop down list. when I am trying to group with that specific column I am getting error like Uncaught SyntaxError: Unexpected identifier I created a similar situation in following sample http://dojo.telerik.com/#jomet/EXeqE --try to group with category
You have to reference the field within Category that you want to group by when defining your columns in the widget initialization. You're referencing 'Category', but you need to reference 'Category.CategoryName'.
So in your Dojo example, change this:
{ field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
to this:
{ field: "Category.CategoryName", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
and you should be good to go!
I am trying to add some column header groups with sub columns in ExtJs, however I am having some difficulty...
I know that when we specify the config for a gridpanel, we can use a tree like structure to specify columns with sub groups i.e.
columns[{
text: 'column1',
columns[{
text: 'subcolumn'
}]
}}
This is fine, however, I am trying to do this dynamically when my gridpanel store loads
I have some code which creates a grid column on the fly
retCol = new Ext.grid.column.Column({
fixed: false,
hideable: false,
menuDisabled: true,
draggable: false,
sortable: false,
align: 'center',
text: monthName,
columns: []
});
The problem is, the newly created doesn't seem to have the value for columns that I supplied, it is hidden away in the initialConfig but it is of no use there :-/
Seen as this code creates the column header, if we don't have an array of columns, there is no way of adding sub columns. I tried adding to the 'items' config, but that doesn't work either :-/
Thanks for any help in Advance
Baz
If you want to add columns after the grid has been rendered you can use the grid reconfigure method.
I just read your question again, the reconfigure will also expect you the give your column config in the structure you posted. Not with the dynamically created headers.
You can build your column config dynamically though, after your store has loaded and pass the new config through reconfigure to your grid.
I am using a ExtJs Grid with the CellEditing plugin. It works perfectly except that invalid values are lost when it fails the validation I imposed on it.
For example, if I have a editable textfield in the grid that doesn't allow values over 10 characters, and the user enters "olympicssucks" the validation will fail and a red box will appear around the textfield. When the user clicks out of the field the value "olympicssucks" will be lost.
I want the grid to still save the invalid data, and keep the red box around it.
Another (maybe more clear) example:
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/cell-editing.html
Try editing the first cellvalue: "Adder's-Tongue" and make it empty. Notice the red box and validation message. Now click out of the box. The failed validation will revert the cell back to its original value, Adder's-Tongue.
tl;dr: My question, restated, is that I want to keep the invalid value, and yet still have validation displaying a red box around it. I'm sure its possible, but how is it done?
What I've tried:
I've looked into Ext.Editor and it seems promising because it has a config property called revertInvalid that does exactly what I want. Unfortunately, it seems that the CellEditing plugin does not seem to use Ext.Editor. I've tried providing a Ext.Editor into the Editor field of the grid column, but that produced un-editable text.
I've tried placing revertInvalid everywhere I could but this was always a far-shot.
Code:
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
var grid = {
xtype: 'grid', store: dataStore, plugins: [cellEditing],
columns: [
{
text: 'Items', dataIndex: 'items', flex: 1, sortable : false,
editor: {
xtype: 'textfield',
validator: function(value) { //custom validator to return false when value is empty and other conditions}
},
//...
],
tbar: [{
xtype: 'button', text: 'Add ' + type,
handler: function() {
dataStore.insert(0, {items: 'New ' + type});
cellEditing.startEditByPosition({row: 0, column: 0});
}
}]
}
This worked for me (Extjs 4.2):
Ext.override(Ext.Editor, { revertInvalid: false });
It very may well be that Sencha has not yet fully developed the revertInvalid field, and that its simple functionality does not yet work. To those looking for a workaround, you may have to mess with the CSS of the grid cell itself to custom-mark it as invalid.
see http://www.sencha.com/forum/showthread.php?271318-Ext.Editor-revertInvalid-false-what-is-the-expected-behavior&p=994118#post994118
to me it is a bug in ExtJs that you can fix by overriding the completeEdit function of Ext.editor