I am using slickgrid in an angular application which supports multiple languages. How can I update the column headers when the selected language is changed.
My column definition looks like this and what I basically want is the grid to call myI18N again to update the column title.
{ id: "myid", name: myI18nFn('idKey'), field: "myid", width: 100}
I have an angular event that detects changes and I have access to the grid object there, I am just not sure on what I need to do make it update the column header
You need to update colDef.name property when the language changes and then trigger the grid to rebuild the header row (which occurs in the createColumnHeaders method in the SlickGrid source). The easiest way is to just update the column list with a setColumns call, which triggers a rerender of the entire grid:
function updateColumnHeaders()
{
var cols = grid.getColumns();
for(var i = 0, il = cols.length; i < il; i++)
{
cols[i].name = myI18nFn(cols[i].id);
}
grid.setColumns(cols);
}
Related
I have an ag-grid table (Enterprise version: 22.1.0) which is grouped using autoGroupColumnDef property. The grouping is dependent on the table's data and the data loads on a button click. I need to update the autoGroupColumnDef property's field name (_this.colName in the below code) after the page is loaded, right before loading the data.
Table's grid options:
_this.gridOptions = {
defaultColDef: {
sortable: true,
resizable: true,
filter: true
},
columnDefs: _this.columnDefs,
rowData: [],
enableRangeSelection: true,
autoGroupColumnDef: {
headerName: "Sector",
field: _this.colName,
cellRendererParams: {
suppressCount: true
},
tooltipValueGetter: function(params) {
return _this.tooltipVal
}
},
suppressAggFuncInHeader: true,
enableBrowserTooltips: true
};
I update the variable _this.colName before setting data to the grid. I have tried the following options and none of them worked for me:
_this.gridOptions.api.refreshClientSideRowModel('group');
_this.gridOptions.api.refreshCells();
_this.gridOptions.autoGroupColumnDef.field = 'Column's Name'
Any help would be appreciated!
There is a good workaround for this. You can set autoGroupColumnDef, then remove and readd all row groupings. It will redraw the group column with the new name.
gridOptions.autoGroupColumnDef.headerName = 'new_name';
// Get current groupings
var colstate = gridOptions.columnApi.getColumnState();
var colstateclear = gridOptions.columnApi.getColumnState();
// Clear groupings
var x = 0, xcount = colstateclear.length;
while ( x < xcount ) {
colstateclear[x].rowGroupIndex = null;
x += 1;
}
gridOptions.columnApi.setColumnState(colstateclear);
// Reset groupings
gridOptions.columnApi.setColumnState(colstate);
I contacted ag-grid support and apparently this is a bug and they have it in their backlog with no ETA available for now. A workaround they provided was to use: https://www.ag-grid.com/javascript-grid-grouping/#showRowGroup.
This is not really a good workaround because the grouped columns are separated and makes the page feel cramped. Also there are some look and feel issues that keep popping up (Eg: empty space added before each column that increases with each grouped column. ie second column has 1 cm added before it, third column has 2 cm added before it and so on. I guess this was added to bring the grouped look in the group column but you wouldn't expect this behavior when the columns are separated.)
ag-grid's backlog ID for the ticket: AG-3359 - Allow the autoGroupColumn to be used in the API calls for columns, at the moment there is no way to dynamically change it after creation. (ie, setColumnDefs …)
Link to track the progress: https://www.ag-grid.com/ag-grid-pipeline/
there is a straight forward method to update the autoGroupColumnDef object and its properties with setAutoGroupColumnDef
this.gridOptions.api.setAutoGroupColumnDef(<ColDef>{
...this.gridOptions.autoGroupColumnDef, // preserve the other settings except the ones you need to change
minWidth: 500
})
if any problems with the spread operator,
do it manually:
this.gridOptions.api.setAutoGroupColumnDef(<ColDef>{
// ...this.gridOptions.autoGroupColumnDef, // preserve the other settings except the ones you need to change
headerName: this.gridOptions.autoGroupColumnDef.headerName,
minWidth: 500
})
and one more thing, add this if you have any visual bugs, like: header row gets resized but bellow rows stays the same as previus state, so the refresh of model is required:
this.gridOptions.api.refreshClientSideRowModel();
this refresh is not ideal solution, because it refreshes everything, so you will loose expanded levels for example, still no clue how to preserve all settings.
https://angulargrid.com/angular-grid/client-side-model/#refreshing-the-client-side-model
and best solution for now is tu use:
this.gridOptions.api.redrawRows();
it keeps the rows expanded if are, checkbox selected if is.
We are using ExtJS 4.2, so that is my context for this question.
I need to have a column in a grid that:
Display a checkbox on each row which can be selected/deselected. It is for the purpose of tracking user selections and not synchronized with underlying store data.
Has a checkall checkbox in header that allows user to select or deselect all rows in the grid.
Can be hidden/removed based on certain condition when page is rendered (user permission or data).
I tried the following:
SelModel - which will satisfy requirement No. 2, but cannot be manipulated once defined (see http://www.sencha.com/forum/showthre...selectionModel).
CheckColumn - which satisfies requirement No. 3, but doesn't have a checkall box in column header (see http://www.sencha.com/forum/showthread.php?265924).
Is there a way for me to achieve what I wanted?
Thanks in advance
Haixi
See my answer to this question:
ExtJS 4 select multiple CheckColumn checkboxes with checkbox header
The addition you would need to make is that on the 'update' event of the grid's store, you will need to manually create code that selects the row with the grid's selectionModel based on the new value in the record.
I had the same requirements and was able to use the 'Ext.selection.CheckboxModel' feature (Ext 4.2). Basically, I override the renderer through the config object. I am using the Sencha Architect 3 and this is the code that was produced:
selModel: Ext.create('Ext.selection.CheckboxModel', me.processMyCheckboxSelectionModel3({}))
processMyCheckboxSelectionModel1: function(config) {
config.renderer = function(value, metaData, record, rowIndex, colIndex, store, view) {
var status = record.get('Status');
if (status === 'Failed') {
var baseCSSPrefix = Ext.baseCSSPrefix;
metaData.tdCls = baseCSSPrefix + 'grid-cell-special ' + baseCSSPrefix + 'grid-cell-row-checker';
return '<div class="' + baseCSSPrefix + 'grid-row-checker"> </div>';
} else {
return '';
}
};
return config;
}
What the renderer is returning when I want it to show a checkbox is copied from Reimius' answer, the only difference with this approach is I am using the Ext 4.2's built in 'Ext.selection.CheckboxModel'.
I'm using ExtJS 4.2.1 and have a fairly simple setup: JSON-based store and a gridpanel that reads from that store. An add button's click event calls out to the function below.
My goal is to add a blank row to the grid and immediately begin editing it using the Ext.grid.plugin.CellEditing plugin that's enabled on the gridpanel.
var addNewRow = function() {
// start add logic
var row = {
'name': '',
'email': '',
'description': ''
};
store.add(row);
// start auto-edit logic
var index = store.indexOf(row); // -1
var grid = Ext.ComponentQuery.query('gridpanel[itemId=upperPane]')[0];
var plugin = grid.getPlugin('upperPaneEditor');
plugin.startEdit( index, 0 );
};
While debugging this, index is set to -1 and that does not work. I tested the plugin.startEdit()'s functionality with (0, 0) to edit the first column of the first row and it works fine. I tried moving the auto-edit logic to various event handlers try to get it to work:
The store's add event fired after the add and reflected the correct index but the element wasn't present yet in the gridpanel for the plugin to grab it.
The gridpanel's afterrender event didn't fire after the add
The gridpanel's add event fired but only after double-clicking on a cell manually to edit it. It also ended up in a loop with itself.
I'm not sure of what else to try at this point.
Your row is a model config object, not a model instance, therefore store.indexOf returns -1.
Try:
var inst = store.add(row)[0];
...
var index = store.indexOf(inst);
When adding a rows to a grid, and then clicking on it, it gets selected (and highlighted). Then, clicking elsewhere but the new row remains highlighted (so now there are to highlighted rows).
Please, does anyone know what the problem could be? How to make it behave normally, i.e. clicking a row deselects (de-highlights) the other one?
After I reload the page (so the new row is not new anymore), everything works as expected.
Edit: Here's the code for adding rows:
var rec = new store.recordType({
test: 'test'
});
store.add(rec);
Edit 2: The problem seems to be listful: true. If false, it works! But I need it to be true so I'm looking at this further... It looks like as if the IDs went somehow wrong... If the ID would change (I first create the record and then the server returns proper ID, that would also confuse the row selector, no?)
(Note, correct as ExtJS 3.3.1)
First of all, this is my quick and dirty hack. Coincidentally I have my CheckboxSelectionModel extended in my system:-
Kore.ux.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.CheckboxSelectionModel, {
clearSelections : function(fast){
if(this.isLocked()){
return;
}
if(fast !== true){
var ds = this.grid.store,
s = this.selections;
s.each(function(r){
//Hack, ds.indexOfId(r.id) is not correct.
//Inherited problem from Store.reader.realize function
this.deselectRow(ds.indexOf(r));
//this.deselectRow(ds.indexOfId(r.id));
}, this);
s.clear();
}else{
this.selections.clear();
}
this.last = false;
}
});
And this is the place where the clearSelections fails. They try to deselect rows by using ds.indexOfId(r.id) and it will returns -1 because we do not have the index defined remapped.
And this is why we can't find the id:-
http://imageshack.us/photo/my-images/864/ssstore.gif/
Note that the first item in the image is not properly "remapped". This is because we have a problem in the "reMap" function in our Ext.data.Store, read as follow:-
// remap record ids in MixedCollection after records have been realized. #see Store#onCreateRecords, #see DataReader#realize
reMap : function(record) {
if (Ext.isArray(record)) {
for (var i = 0, len = record.length; i < len; i++) {
this.reMap(record[i]);
}
} else {
delete this.data.map[record._phid];
this.data.map[record.id] = record;
var index = this.data.keys.indexOf(record._phid);
this.data.keys.splice(index, 1, record.id);
delete record._phid;
}
}
Apparently, this method fails to get fired (or buggy). Traced further up, this method is called by Ext.data.Store.onCreateRecords
....
this.reader.realize(rs, data);
this.reMap(rs);
....
It does look fine on the first look, but when I trace rs and data, these data magically set to undefined after this.reader.realize function, and hence reMap could not map the phantom record back to the normal record.
I don't know what is wrong with this function, and I don't know how should I overwrite this function in my JsonReader. If any of you happen to be free, do help us trace up further for the culprit that causes this problem
Cheers
Lionel
Looks like to have multi select enabled for you grid. You can configure the selection model of the grid by using the Ext.grid.RowSelectionModel.
Set your selection model to single select by configuring the sm (selection model) in grid panel as show below:
sm: new Ext.grid.RowSelectionModel({singleSelect:true})
Update:
Try reloading the grid using the load method or loadData method of the grid's store. Are you updating the grid on the client side? then maybe you can use loadData method. If you are using to get data from remote.. you can use load method. I use load method to update my grid with new records (after some user actions like add,refresh etc). Or you could simply reload as follows:
grid.getStore().reload();
Got an issue, and need your advices
I just started writing an editor grid. (I will actually use this grid as a search filter editor, i.e. columns with criteria name, operators and values).
Now, for the value field, I want to have different edit controls for different rows. For instance, when a criteria type is string I want to display a text box, when it's date time, I want a datetime editor.
So the fact is, I need to control the "edit control creation/display" just before editing starts. and it should be different among rows. Unlike the examples I found which are fixed for the columns.
In order to implement this, can you guys please suggest the steps I need to do? I can probably figure out it if one of you can direct me a way.
Thanks and best regards
Actually you can easily accomplish this by dynamically returning different editors and renders depending on the column you're in. In your ColumnModel object you can define something like this below. Note that i'm getting a type property of each record to determine its type. I have an object containing all my different types of editors, and the same for renderers, and then based on the the type i dish out a different editor or renderer for that cell.
editors: { 'default': {xtype:'textfield'},
texttype: {xtype:'textfield'},
numbertype: {xtype:'numberfield'},
combotype: {xtype:'combo'}....... etc. }
getCellEditor: function(colIndex, rowIndex) {
var store = Ext.getCmp('mygrid').getStore();
var field = this.getDataIndex(colIndex);
var rec = store.getAt(rowIndex);
var type = rec.get('type');
if (type in this.editors) {
return this.editors[type];
} else {
return this.editors['default'];
}
},
In the configuration section of your editorgrid, you will need to define your custom editors:
{
xtype: 'editorgrid',
id : 'mygridID',
stripeRows: true,
...
...
,customEditors : {
//configs go here or pre-define the configs prior to this
'columnName1' : new Ext.grid.GridEditor(new Ext.form.Combobox(configObject)),
//configs go here or pre-define the configs prior to this
'columnName7' : new Ext.grid.GridEditor(new Ext.form.CheckBox(configObject))
}
}
use this grid config - in order to select whole rows:
selType: 'rowmodel'