I have a button in my table component which when clicked I'd like to apply a filter on the data to look at the rows and if the isSelected property is true then display only those rows. I have a custom filter which I attach to the ID column ...
const selectedRowFilter = (rows, ids, filterValue) => {
if(filterValue) {
return rows.filter((row) => {
return row.isSelected;
});
}
return rows;
};
const columns = React.useMemo(
() => [
{
Header: 'ID',
accessor: 'id',
filter: 'selectedRowFilter',
}, etc...
I then call the filter programatically on click of a button using setFilter ...
setFilter('id', true);
The issue I have is when the table is reloaded when I edit the data for example the filter is re applied but the row.isSelected values are at this point undefined. Any help appreciated. This could be an issue due to the useRowSelected plugin having to be after the useFilters plugin.
https://codesandbox.io/s/new-breeze-uzhv8
I am facing a problem in extjs grid . I have two grid column one is name and another is displayName but I want to sorting by name in both column means I displayName as well as name. When user apply sort in both column parameters pass by grid is sort= name in both case.
[
{
header: 'Name',
dataIndex: 'name',
shortable: true
},
{
header: 'DisplyName',
dataIndex: 'displayName',
shortable: true
}
]
IMO, you can do that in beforesort event handle function of grid's store.
Like this:
// here is the key point
listeners: {
beforesort: function(st, sorters) {
console.log(sorters, st);
if (sorters.length == 1 && sorters[0].property == 'displayName') {
sorters[0].property = 'name';
}
}
}
// here is the key point end
a live example
I am working in extjs4. I have gridview as-
{
xtype : 'grid',
id : 'g2',
store : 'qb.qbquestionoptionStore',
columns : [ {
text : 'Options',
dataIndex : 'option',
flex : 1
}, {
text : 'Answer',
dataIndex : 'isAnswer',
flex : 2.5
},{
header : 'edit',
renderer : function(val) {
return 'Edit';
}
},
Above grid is showing option and isAnswer field. I am also having addoption button. When i am clicking on this button,its showing new option creation window as-
on click of its save button i want to add thses new option and isAnswer fields value in above grid.I have retrived thses newly inserted field values by code-
var win = button.up('window');
form = win.down('form');
record = form.getRecord(), values = form.getValues();
console.log(values.option);
console.log(values.isAnswer);
So how to insert these values in above grid?
There is separation between data and view in ExtJs. All data related stuff is handled via stores and models. So if you want to insert new row into the grid you should insert it into the corresponding store:
var store = Ext.getStore('qb.qbquestionoptionStore');
store.add(form.getValues());
I want to iterate through store and make grid columns dynamically. When I use columns.push method in the onLoad event of Store, I got this error: "headerCtCfg is undefined". This is my code:
Ext.define('App.view.UserList' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.userlist',
store: 'Users',
initComponent: function() {
var store = Ext.getStore( this.store );
store.on('load', function () {
var columns = this.columns = [];
columns.push( {header: 'H', dataIndex: '0'} );
Thank you in Advance
Try to add this.callParent(arguments) before doing anything else in your initComponent function. This way view gets completely created and you will be able to access columns.
Also I suggest to look at reconfigure method of tableview to change store and columns on the fly.
Update: Try to use Ext.apply instead of columns.push:
Ext.apply(this, {
columns: [ list of your columns ]
});
Update2: load() is async. So you might consider creating grid first with dummy column, then load store and replace it with new data.
Can someone please throw some light on how to go about rendering an hyperlink in the cells of a particular column in ExtJS?
I have tried binding the column to a render function in my JS, from which I send back the html:
SELECT
However, with this, the problem is that, once I hit the controller through the link, the navigation is successful, but subsequent navigations to the data-grid show up only empty records.
The records get fetched from the DB successfully through the Spring MVC controller, I have checked.
Please note that this happens only once I use the row hyperlink in the extJS grid to navigate away from the grid. If I come to the grid, and navigate elsewhere and again come back to the grid, the data is displayed fine.
The problem only occurs in case of navigating away from the grid, using the hyperlink rendered in one/any of the cells.
Thanks for your help!
This is for ExtJS 4 and 5.
Use a renderer to make the contents look like a link:
renderer: function (value) {
return ''+value+'';
}
Then use the undocumented, dynamically generated View event cellclick to process the click:
viewConfig: {
listeners: {
cellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {
var linkClicked = (e.target.tagName == 'A');
var clickedDataIndex =
view.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex;
if (linkClicked && clickedDataIndex == '...') {
alert(record.get('id'));
}
}
}
}
Try something like this:
Ext.define('Names', {
extend: 'Ext.data.Model',
fields: [
{ type: 'string', name: 'Id' },
{ type: 'string', name: 'Link' },
{ type: 'string', name: 'Name' }
]
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{
text: 'Id',
dataIndex: 'Id'
},
{
text: 'Name',
dataIndex: 'Name',
renderer: function (val, meta, record) {
return '' + val + '';
}
}
...
...
...
However my thanks to - ExtJS Data Grid Column renderer to have multiple values
Instead of using an anchor tag, I would probably use plain cell content styled to look like an anchor (using basic CSS) and handle the cellclick event of the GridPanel to handle the action. This avoids dealing with the anchor's default click behavior reloading the page (which is what I'm assuming is happening).
I created a renderer so it looked like you were clicking on it.
aRenderer: function (val, metaData, record, rowIndex, colIndex, store){
// Using CellClick to invoke
return "<a>View</a>";
},
But I used a cell event to manage the click.
cellclick: {
fn: function (o, idx, column, e) {
if (column == 1) // Doesn't prevent the user from moving the column
{
var store = o.getStore();
var record = store.getAt(idx);
// Do work
}
}
}
For these purposes I use CellActions or RowActions plugin depending on what I actually need and handle cell click through it.
If you want something that looks like an anchor, use <span> instead and do what #bmoeskau suggested.
You can use 'renderer' function to include any HTML you want into cell.
Thanks guys for your response.
AFter debugging the extJS-all.js script, I found the issue to be on the server side.
In my Spring MVC controller, I was setting the model to the session, which in the use-case I mentioned earlier, used to reset the "totalProperty" of Ext.data.XmlStore to 0, and hence subsequent hits to the grid, used to display empty records.
This is because, ext-JS grid, checks the "totalProperty" value, before it even iterates through the records from the dataStore. In my case, the dataStore had data, but the size was reset to null, and hence the issue showed up.
Thanks to all again for your inputs!