I am using extjs 4.0 version. when I update extjs grid textfield value, I need to apply css to td. so on change i need to get td of that cell in change listener.
'change': function(textField, newValue, oldValue, eOpts){
}
I tired 'this.getEl()' but no luck. any other pointers?
I think the easiest way is to use a renderer event on your header:
{header: ... renderer: fctChangeColor},
function fctChangeColor(currentCellValue, metadata, record, rowIndex, colIndex, myStore )
{
if(fctValidate(currentCellValue) == false)
metadata.css = "myNewClass";
return currentCellValue;
}
Related
I am aware Handsontable has a cell type for dropdown but I want a more customizable dropdown where I can put images/chips/text. Please see the screenshot below.
Is something like that possible in handsontable?
If that image/HTML element should only be visible within the cell when the editor is closed you can use a custom renderer. Then you define a cell as a default dropdown (with your source) and add a cell renderer
function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.DropdownRenderer.apply(this, arguments);
td.innerHTM = `${value} ${here put your HTML element}`
}
And if you'd need those images/HTML elements within the list of choices then it might be easier to switch to the handsontable cell type. Then the implementation would look like this
{
data: data_key/array index,
type: 'handsontable',
handsontable: {
colWidths: 100, //some settings (works the same as regular table)
data: myItems, //list of choices
renderer: function(instance, td, row, col, prop, value){
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.innerHTML = `${your custom HTML} ${value}`
}
}
}
I'm new using kendo grid UI, i'm trying to make a non editable column (when updating) using a simple code :
schema: {
id: 'ID',
fields: {
id: { editable: false }
}
}
This default schema, makes by default non editable id column, and i can't even create a new row with id .
I want to make it non editable (when updating) but i want the possibility to create a row and assign an id from user (when creating).
Any ideas ?
Edit :
PS : the proprety is not related to only id, it can be on every column (can't update but can create)
The editable required a function instead of a value.
columns: [
{ field: 'value', editable: function () { return false; } }
],
Checkout here:
https://dojo.telerik.com/oROJayAd
I always doubt about that model editable option. It never really worked for me. It should have something very deep in the setup to make it work which I never realized what it. So this is a way to acomplish what you need that I know it indeed works: To cancel the edit event. Check it out:
edit: function(e) {
// Cancels a new row
if (arguments, e.model.isNew()) {
this.cancelRow(e.container.parent());
}
else { // Cancels a cell editing
this.closeCell(e.container);
}
}
Demo
Now, if you like to add a condition in that event based on what you have set in your model, you can access it within event as well:
edit: function(e) {
let currentColumn = this.options.columns[e.container.index()].field,
model = this.dataSource.options.schema.model.fields[currentColumn];
if (model.editable === false) {
// Cancels a new row
if (arguments, e.model.isNew()) {
this.cancelRow(e.container.parent());
}
else { // Cancels a cell editing
this.closeCell(e.container);
}
}
}
Demo
You can add an option yourself in the model to set if the column can be updated or only created, and handle that information inside the event, canceling the editing whenever you like.
This is how I just did it, though there are other ways.
In columns option if you remove the field option from a column it doesn't know from where to bind it.
Then use the template option to show(bind) the id. Thus making it readonly
columns: [
{
title: 'Id', width: "40px",
template: "#= id #",
},
...]
I am using ExtJs 4.1 and want to utilize ExtJs-TreeGrid.
Please look at the example of the grid here
I want to add following feature to this grid:
Ability to disable certain check box.
Ability to hide the check box when node is not leaf node (check the attached image for more understanding)
See my answer here.
To disable certain checkboxes you will need to slightly change the the renderer / processEvent methods. Since I don't know which checkboxes you want to disable, I'll just use a dummy function where you will need to provide your condition:
Ext.define('My.tree.column.CheckColumn', {
extend: 'Ext.ux.CheckColumn',
alias: 'widget.mytreecheckcolumn',
processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) {
if (record.isLeaf() && !record.get('disabled')) {
return this.callParent(arguments);
}
else {
return My.tree.column.CheckColumn.superclass.superclass.processEvent.apply(this, arguments);
}
},
renderer : function(value, meta, record) {
if (record.isLeaf()) {
if (record.get('disabled')) {
meta.tdCls += ' ' + this.disabledCls;
}
return this.callParent([value, meta]);
}
return '';
}
});
Also note that by default this.disabledCls is x-item-disabled and will not provide any visible change to your column. For example, if you wanted to change the opacity of a disabled checkbox, you will need to provide your own disabledCls
{
xtype: 'mytreecheckcolumn',
dataIndex: 'active',
disabledCls: 'x-grid-cell-checkcolumn-disabled'
}
and use some CSS:
.x-grid-cell-checkcolumn-disabled {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3;
}
How do I add custom CSS classes to rows in a data grid (Ext.grid.Panel)?
I'm using ExtJS 4.0.
The way to do it is to define viewConfig on the grid:
Ext.create('Ext.grid.Panel', {
...
viewConfig: {
getRowClass: function(record, index, rowParams, store) {
return record.get('someattr') === 'somevalue') ? 'someclass' : '';
}
},
...
});
In your initComponent() of your Ext.grid.Panel use getRowClass() as follows:
initComponent: function(){
var me = this;
me.callParent(arguments);
me.getView().getRowClass = function(record, rowIndex, rowParams, store) {
if (/* some check here based on the input */) {
return 'myRowClass';
}
};
}
This basically overrides the getRowClass() function of the underlying Ext.grid.View which is called at render time to apply any custom classes. Then your custom css file would contain something like:
.myRowClass .x-grid-cell {background:#FF0000; }
You could do something like this:
Ext.fly(myGrid.getView().getRow(0)).addClass('myClass');
Of course you could substitute the getRow() call for another cell, or you could loop through all of your rows and add it appropriately.
And then you could style that in addition to the default CSS, by doing:
.x-grid3-row-selected .myClass {
background-color: blue !important;
}
There is also a private method of GridView called addRowClass. You can use this to add a class to your rows as well by doing:
grid.getView().addRowClass(rowId, 'myClass');
// private - use getRowClass to apply custom row classes
addRowClass : function(rowId, cls) {
var row = this.getRow(rowId);
if (row) {
this.fly(row).addClass(cls);
}
},
Use simplest way
In your grid use -
cls: 'myRowClass'
Your css -
.myRowClass .x-grid-cell {background:#FF0000 !important; }
If you want to change the class after the data has loaded, you can do it like this:
myGridPanel.getView().removeRowCls(rowIndex,"old class");
myGridPanel.getView().addRowCls(rowIndex,"new class");
Here, rowIndex is the selected row, which you can get in some event functions(like "select"). By using this, you can change CSS of the row after clicking it.
how can i get the selected cell of a Ext.grid.Panel?
In ExtJS 3 it was possible via:
grid.getSelectionModel().getSelectedCell()
In Ext 4 there is
grid.getSelectionModel().selected
but this only gives me the record.
There may be a more direct way to do this but the following seems to work for me:
grid.view.getCellByPosition(grid.getSelectionModel().getCurrentPosition());
I ended up needing the actual column that the user was clicking on and discovered the following:
grid.panel.columns[grid.getSelectionModel().getCurrentPosition().column]
Don't forget to apply:
selType : 'cellmodel'
to your grid to make sure you can select cells!
Use the beforeedit listener and context.record to get the desired row
this.editing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
beforeedit: function (obj) {
var MyColumnValue = obj.context.record.get('YourColumnName');
// or maybe to clear the value of this cell
obj.context.record.set('YourColumnName', null);
}
}
});