How to restrict selection on the datatable row? - javascript

I want to disable a datatable row. In such case I see two required steps:
set CSS
prevent selection
I've successfully done the first step with corresponding Webix methods:
function disableRow(table, row){
table.addRowCss(row, "disabled-row")
};
webix.ui({
view:"datatable",
id:"mytest",
...
});
disableRow($$("mytest"), 2)
http://webix.com/snippet/e47b4257
But how can I restrict the selection of this row? Thank you

I found the answer you are looking for here
There's no disabled property for rows, but you can use onBeforeSelect and onBeforeEditStart events to prevent related actions on the particular row:
There is a link to this snippet on the above linked page which does what you are looking for.
webix.ui({
view:"datatable", autoConfig:true, editable:true, data:grid_data,
on:{
onBeforeEditStart:function(id){
if (id.row == 2 ) return false
},
onBeforeSelect:function(id){
if (id.row == 2 ) return false
}
}
});

It seems like there might not be a built in way to disable a row. I did come across this snippet that might help
I've tried programatically selecting the row afterwards and it won't let you.
webix.ui({
view:"datatable", id:"abc",autoConfig:true, editable:true, data:grid_data,
on:{
onBeforeEditStart:function(id){
if (id.row == 2 ) return false
},
onBeforeSelect:function(id){
if (id.row == 2 ) return false
}
}
});
$$("abc").select(2);
alert($$("abc").getSelectedId())
$$("abc").select(3);
alert($$("abc").getSelectedId())

Use !important to override the table styles:
<style>
.disabled-row {
background-color: #ddd !important;
color: #aaa !important;
}
</style>
http://webix.com/snippet/1a3569c6

To disable any feature provided by webix, you can override its events and handle the same:
like to stop the selection on any particular column, row or cell you can override onBeforeSelect and return false for that specific row/column/cell.
There are events for everything i.e onBeforeSelect,onAfterSelect,onBeforeEditStop, onAfterEditStop etc.

Related

How to change styling of cells that has been edited in ag-Grid?

I want to mark cells who has been edited so the user can see which cells have been touched and altered. I know there is a cell flash option, but that just changes the background colors for a bit. What I want is a background color change when an edit has been done.
Cannot seem to find any specific documentation on accessing for example the html element or the styling of affected cell.
Anyone got any ideas?
You can use ColDef.onCellValueChanged to detect if something changes and update the cell style accordingly using GridApi.refreshCells()
const columnDefs = [{
headerName: "Athlete",
field: "athlete",
onCellValueChanged: this.markAsDirty
},...]
...
private markAsDirty(params: ICellRendererParams) {
params.colDef.cellClass = (p) =>
p.rowIndex.toString() === params.node.id ? "ag-cell-dirty" : "";
params.api.refreshCells({
columns: [params.column.getId()],
rowNodes: [params.node],
force: true // without this line, the cell style is not refreshed at the first time
});
}
In your css file
:host ::ng-deep .ag-cell-dirty {
background-color: rgba(255, 193, 7, 0.5) !important;
}
You may also want to use defaultColDef if you want this behavior applied to all columns
this.gridOptions = {
defaultColDef: {
editable: true,
onCellValueChanged: this.markAsDirty
},
};
Live Demo
I did this on a project I was working on.
There is a cellClass property that you can define in your column definitions (https://www.ag-grid.com/javascript-grid-cell-styles/) and it can take a callback function with params: CellClassParams.
So try doing:
cellClass: (params: CellClassParams) => {
// you need to have a handle on the original untouched data
// See if the original value does not equal the modified value in params
// For shortness, I will write pseudocode
if (originalValue !== modifiedValue) {
return 'ag-cell-was-modified';
}
}
If many columns are editable, you may want to use a re-usable function for cellClass for each column.
That should apply the class ag-cell-was-modified conditionally whether the cell was modified or not and in your style.scss or main stylesheet, you can add:
.ag-cell-was-modified {
background: red;
}
Of course, if you are using SASS, you can place this class definition in somewhere more appropriate.

Non editable kendo grid ID

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 #",
},
...]

Customizing ExtJs Tree Grid panel

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;
}

extJs 4 grid customization - Total row at the end

I want a grid with only two columns, one is for name and the other for percentage. The very last row will have 'Total' as the name and the total percent as 'percentage'. This row only will be styled differently than the other rows. Please guide me how can i accomplish this.
Thanks..
There is a grid feature to accomplish exactly that. It is covered here in the docs with some examples of how to use it.
You can also customize the style by providing your own implementation of the x-grid-row-summary class in your css.
EDIT
Here's some examples of setting the summary row style, as you can see there are a few ways to go about it. Realize that the summary row can't be referenced until the viewready event occurs, it is not ready at the afterrender event, so I put all this logic in a viewready listener:
Ext.create('Ext.grid.Panel', {
features: [{
ftype: 'summary'
}],
// other grid configs ...
listeners: {
viewready: function(grid) {
// get reference to the summary row
var summaryRow = grid.view.el.down('tr.x-grid-row-summary');
// this will apply a css class to the row, in this example,
// I am applying the extjs grid header style to my summary row
summaryRow.addCls('x-grid-header-ct');
// or, to do it all in javascript as you mentioned in the comment
// first you would create a style object, I took these style
// properties from the .x-grid-header-ct
aStyleObject = {
cursor: 'default',
zoom: 1,
padding: 0,
border: '1px solid #d0d0d0',
'border-bottom-color': '#c5c5c5',
'background-image': 'none',
'background-color': '#c5c5c5'
}
// then you pass the style object using setStyle
summaryRow.setStyle(aStyleObject);
// or you could set the style for each cell individually using
// addCls or setStyle:
Ext.Array.each(summaryRow.query('td'), function(td) {
var cell = Ext.get(td);
cell.addCls('some-class');
// or
cell.setStyle(anotherStyleObject);
});
}
}
});
if we have summary row (like this), simply we can use CSS on specific page.
<style>
.x-grid-row-summary .x-grid-cell{
background-color: #f00 !important;
font-size: x-large !important;
}

How to determine the selected cell of a Ext.grid.Panel in ExtJS 4?

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);
}
}
});

Categories