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.
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 implement filtering in my grid.Panel component. The filtering works fine (date, string and numbers) but I can not uncheck the "Filters" checkbox by clicking on it. As far as I have seen in the Ext js documentation there is nothing that I should add extra to be able to uncheck the Filters checkbox (see image below)
When I click on the Filters checkbox, nothing happens, no error also. The only way to disable this particular "Wholesaler" filter is if I go to the text box and remove the entry. This of course would be just fine, but at the date filters, I also can not click the checkbox and thus can not remove the filter once applied (see image below) The only way to remove it is to refresh the page.
I am using Ext JS version 5.1.2, and here is the sample code:
{
dataIndex: 'Wholesaler',
text: 'Wholesaler',
filter: {
type: 'string'
},
}
And the Panel componenet itself:
Ext.apply(this, {
region: 'center',
api: new Dextop.api('sample'),
border: false,
plugins: 'gridfilters',
columns: sample.getController().getGridColumns(),
storeOptions: {
autoLoad: false
}
});
Any help is appreciated!
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 !
I am new to Dojo and trying to complete a page with a set of dynamically created datagrids.
Each grid is created as follows :
membersGrid = new dojox.grid.DataGrid({
query: { id: '*'},
structure: membersLayout,
store: membersStore,
autoWidth: true,
autoHeight: true,
initialWidth: '650px',
rowSelector: '5px',
rowsPerPage: 20,
selectable: true
}, 'membersGridNode'+index.toString());
I have a dynamically created button under each grid that triggers a click event when pressed. From this event I am able to get my data grid index.
function performCopyAction (button) {
var gridName = "membersGridNode"+button.id;
var grid = dijit.byId(gridName);
...
From here on the idea is to get the object and get access to the selected row on the datagrid. However, "grid" is null. I have tried a plethora of ways to get the grid object from Google searching but I am struggling to figure out what I am doing wrong.
when you create and widgets/dijits dynamically or declaratively you need to specify the id attribute as shown below. If id attribute is not provided then the dojo dijit systems assigns a unique id.
membersGrid = new dojox.grid.DataGrid({
id: 'grid',
....
....
then access the dijit anywhere as
var grid = dijit.byId('grid');
I am using Datatables grid in one of my application because it has a relatively exhaustive API for event dispatching and customization . But I am facing a problem now , the grid's height depends on the number of records to be displayed . How can I customize it so that it maintains the height even if records are deleted and continue to show empty cells from where the record was deleted ? Thanks .
Is there any better grid plugin than datatables which provides the features supported by datatables and where I would not face such problem .
You can add this into your table initialisation like so:
$(document).ready(function() {
$('#example').dataTable( {
"sScrollY": "200px",
"bPaginate": false,
"bScrollCollapse": false
} );
} );
Where the sScrollY value will define the constant height of the table and bScrollCollapse set false will prevent the table from shrinking to fill empty cells.
You need to modify the CSS in order to achieve that. Other option is jqGrid.
http://www.trirand.com/blog/jqgrid/jqgrid.html