extjs renderer not executed - javascript

Im using the modern toolkit with extjs 6.5.1.
I want to use the renderer property in a grid cell to use html. The renderer simply returns '<a>...</a>' but when I use this it will encode the html code so that the cell shows '<a>...</a>' instead of a link.
Regarding to the answers on this thread I will need a cell property with "encodeHtml" turned to false but as soon as I add a cell property the renderer wont get executed anymore (Even when I use EncodeHtml) and shows the data like there was no renderer property.
Why cant I use the renderer property anymore?
Heres my code:
{
xtype: 'gridcolumn',
renderer: function(value, record, dataIndex, cell, column) {
console.log('hello world');
return '<a>...</a>';
},
width: 30,
text: '...',
cell: {
xtype: 'textcell',
encodeHtml: false
}
}
What it looks like without encodeHtml

This behavior is because you specify
cell: {
xtype: 'textcell'
}
in the first place. Just remove it, and your renderer can return HTML. This should work:
{
xtype: 'gridcolumn',
renderer: function(value, record, dataIndex, cell, column) {
console.log('hello world');
return '<a>...</a>';
},
width: 30,
text: '...'
}
At least id does in my application, where I use renderers returning html to generate special formatting.
If you need to specify the cell property, because of something you didn't show in your code, use the default cell xtype instead: gridcell.

Related

Save column header filter in ag-grid in angular

I am working on an existing application in which they have used ag-grid library for angular for most of the grids that they have in their application. Now the ag-grid gives the functionality to filter the grid based on a column value by using the filter option in the column header. I am giving a link to that https://www.ag-grid.com/angular-data-grid/filtering-overview/. I wanted to implement a feature in which we can save the filter keyword that the user is searching for and when he comes back to the same grid the previous filter is already applied. for example https://plnkr.co/edit/?p=preview&preview here we can pick athlete and filter that by going to the column and searching a value so what I want is that if I search 'abc' I should be able to preserve that. is there a way to do that ? I am giving the colDef for the link above
this.columnDefs = [
{ field: 'athlete' },
{
field: 'age',
filter: 'agNumberColumnFilter',
maxWidth: 100,
},
{
field: 'date',
filter: 'agDateColumnFilter',
filterParams: filterParams,
},
{
field: 'total',
filter: false,
},
];
this.defaultColDef = {
flex: 1,
minWidth: 150,
filter: true,
};
}
Any kind of help is appreciated, thanks :)
You can save the filter applied by using the Grid Event onFilterChanged. Inside here you can get the filterModel by calling api.getFilterModel(). In the plunkr below we are showcasing this by saving the filter model to local storage and restoring it by applying it inside the Grid Event onFirstDataRendered
onFilterChanged(params) {
const filterModel = params.api.getFilterModel();
localStorage.setItem('filterModel', JSON.stringify(filterModel));
}
onFirstDataRendered(params) {
const filterModel = JSON.parse(localStorage.getItem('filterModel'));
if (filterModel) {
params.api.setFilterModel(filterModel);
}
}
See this implemented in the following plunkr
You may also find the following documentation pages relevant:
Saving and Restoring Filter Models
Grid Events
To apply existing filters to ag-grid, it can be done using by setting up filterModel on gridApi.
gridApi.getFilterInstance("fieldName").setModel({
"filterType":"equals", //type of filter condition
"type":"text", //Type of column [text/number/date]
"filter":"value" //Value need to be applied as filter.
})
Similarly onFilterChanged event you can capture changes and apply filter dynamically.

How to split binding string ExtJS

How can I split string and get length if she bind?
I tried this, but displayed value is empty:
{
xtype: 'displayfield',
fieldLabel: __('sending_to'),
bind: {
value: '{recipients.split("\n").length}'
}
}
You can use formulas to put more logic in it. And about your question, here's the FIDDLE

Unable to Render Empty(null) column inside Grid in Extjs

I'm using Extjs for rendering some information inside grid. Columns properties are like:
SEValue: {
dataIndex: "SEValue",
header: MCW.lr.s_lbl_sevalue,
hidden: false,
renderer: MCW.common.DeviceHelper.renderSEValue,
infoGroup: 30
},
Below method is used for manipulation of rendered values:
MCW.common.DeviceHelper.renderSEValue = function (value) {
if (value) return value;
return "Not Available";
};
Problem is that, whenever column value is '' or Null in DB, it doesn't show that column and in case of any value it shows the column.
M.b. need in field dataIndex: "SEValue", from which to draw the column's value set allowNull = true?

store add - does not work

I have a simple grid, which looks like so:
{
xtype: "grid",
columns: [{
header: 'Title', flex: 1, dataIndex: 'Title'
}],
store: Ext.create('Ext.data.Store', {
fields:['id', 'Title']
})
}
And I have a function (attached to a button) which, I believe, should populate this grid with some data. It does it like so:
grid.store.removeAll();
records = [{"id":"1", "Title", "Hello world"}];
grid.store.add(records);
grid.store.load();
console.log(grid.store.getCount());
But for some insane reason, the store is empty and grid.store.getCount() echoes "0". What the heck is going on? PS. I'm using ExtJS 6.
EDIT
If however I slightly change my code to this:
...
store: Ext.create('Ext.data.Store', {
autoLoad: false,
fields:['id','Title'],
data:[{"id": 1,"Title": "Hello world"}]
})
...
//and in function just one line of code:
grid.store.load();
then it starts working. So, it seems like the whole problem is with store.add. It does not do what it should.
Just remove grid.store.load().
The load marks the store as needing a load, but if your adding records using add that is not what you need.
Working example: https://fiddle.sencha.com/#fiddle/1fbv

Extjs store isn't loaded after changing active tab

I have a grid.panel on the side with table names and I'd like to show the table(or it's structure) when the user clicks on it, in another grid.panel inside a tab view.
what i did:
in the actionlistener
var store = Ext.data.StoreManager.lookup('Tables');
currentTable = store.findRecord('name',record.get('name'));
var structureView = Ext.ComponentQuery.query('structure')[0];
structureView.showTable(currentTable);
in the view
showTable: function(table) {
this.storeObj.getProxy().url = '/tables/stucture/' + table.data.name;
this.storeObj.load();
this.update();
}
In the Tables store I have table descriptors, with some basic data like name, etc. and the list with table names displays the content of this store. So I look up the Tables store and get the tabledescriptor and pass it to the view, which then loads the store('Columns' in this case) with the data it will display. And all this works fine until I switch tabs. After changing the active tab and then changing back data is not refreshed on clicking on another table's name and I get this: Uncaught TypeError: Cannot call method 'removeChild' of null. It seems that it can't load the store anymore after changing the active tab. I found this issue on forums but I couldn't find a solution for it.
Do you have any ideas?
Thanks for your time.
Edit:
Ext.define('App.view.Table.Structure', {
extend: 'Ext.grid.Panel',
alias: 'widget.structure',
store: 'Columns',
width: 800,
storeObj: undefined,
initComponent: function () {
this.columns = [{
header: 'Column name',
dataIndex: 'name',
flex: 1
}, {
header: 'Position',
dataIndex: 'position',
flex: 1
}, {
header: 'Default value',
dataIndex: 'defaultValue',
flex: 1
}, {
header: 'Column type',
dataIndex: 'type',
flex: 1
}, ];
this.storeObj = Ext.StoreManager.lookup('Columns');
this.callParent(arguments);
}
Well I managed to solve it at last, but I don't really understand why this solved the problem. So this is what I did:
Every time I needed to update the Columns store(or the others) I looked it up
instead of just looking it up in the initcomponent.
Instead of calling update() method I called reconfigure()
Now it works like charm, but I don't see why update didn't do the trick and why I had to look up the store every time I wanted to call load() on it... So if someone could explain it I would be thankful.

Categories