How to disable collapsing in a grouped grid in ExtJS? - javascript

Everything's in the subject. I have a grouped grid, like this Sencha example. I would like to remove the [+][-] signs in order to disable collapsing.
I thought there would be some config for the grouping feature, something like 'collapsible: false', but there is not any.
Any ideas please ?

Use configuration to disable collapse config property. From Sencha:
collapsible : Boolean
Set to false to disable collapsing groups from the UI.
This is set to false when the associated store is buffered.
Defaults to: true
Source: Sencha Documentation of the collapsible configuration.

You can inherit Ext.grid.feature.Grouping and redefine onGroupClick method. It's not good but the simplest way for now:
Ext.define( 'My.grid.feature.RightsGrouping', {
extend: 'Ext.grid.feature.Grouping',
onGroupClick: function(view, group, idx, foo, e) {
}
});
Also you'll have to edit CSS to remove collapse sign and change cursor pointer:
.x-grid-group-hd .x-grid-cell-inner { cursor: default; }
.x-grid-group-title { background-image: none; }

Very nice Serg, thanks.
even easier for the override is:
...
features: [
Ext.create('Ext.grid.feature.Grouping',{
onGroupClick: function() {} /* do nothing! */
})
]
...

This was not working in 4.2.1.
Figured out a solution seemed very funny to me
...
groupcollapse:
{
fn: me.onGroupingGroupcollapse,
scope: me
}
...
...
onGroupingGroupcollapse: function(view, node, group, eOpts)
{
Ext.getCmp('gridCenters').view.features[0].expand(node.name,true);
}
...

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.

How to use "position" configuration setting of Aurelia-Dialog plugin

Issue:
I've been trying to figure out how to use the "position" configuration settings of the Aurelia-Dialog plugin on my Aurelia based website, but I can't figure it out cannot find a single example on all of the Internet of Things.
A very vague bit of documentation can be found here:
http://aurelia.io/hub.html#/doc/article/aurelia/dialog/latest/dialog-basics/5
For those of you not wishing to visit the link, for "position" it says:
Position - a callback that is called right before showing the modal with the signature: (modalContainer: Element, modalOverlay: Element) => void. This allows you to setup special classes, play with the position, etc... If specified, centerHorizontalOnly is ignored. (optional)
I've tried everything from attempting to add code directly to the plugin configuration in main.js:
plugin('aurelia-dialog', config => {}
.plugin('aurelia-dialog', config => {
config.useDefaults();
//config.settings.position = ;
})
To attempting to use it as an argument my dialogService.open function:
showMessage(message, title = 'Message', options = ['Ok'], dismissable = false) {
return this.dialogService.open({ viewModel: TestModal,
model: { message, title, options },
overlayDismiss:
dismissable,
position: function(stuff){ modal, modalOverlay} });
My Question:
How do I actually use the position setting, and if my function(stuff){modal, overlay} format is correct, how do I actually pass a modal and an overlay to this function?
I'm pretty much at a dead-end on this so any help would be useful.
Thanks in Advance.
In the constructor of your dialog class, you need to inject the DialogController, then define the callback function.
import { DialogController } from "aurelia-dialog";
#inject(DialogController)
export class YourDialog {
constructor(private controller: DialogController) {
this.controller.settings.position = (modalContainer: Element, modalOverlay: Element) => {
let container = modalContainer;
let overlay = modalOverLay;
};
}
}

intro.js show and hide data-hint

I want to have a button that can turn on and off the 'hints' function in intro.js.
I have a working version to show and then hide but the show only works once. How can I get it to work repeatedly? This functionality works for the standard data-intro but not for data-hint.
<div class="jumbotron">
<h1 id='step1'>Hints</h1>
<p class="lead">Adding hints using JSON + callbacks</p>
<a id='step2' class="btn btn-large btn-success" href="javascript:void(0);">Add hints</a>
</div>
function addHints(){
intro = introJs();
intro.setOptions({
hints: [
{
element: document.querySelector('#step1'),
hint: "This is a tooltip.",
hintPosition: 'top-middle'
},
{
element: '#step2',
hint: 'More features, more fun.',
position: 'left'
},
{
element: '#step4',
hint: "<b>Another</b> step.",
hintPosition: 'top-middle'
}
]
});
intro.onhintsadded(function() {
console.log('all hints added');
});
intro.onhintclick(function(hintElement, item, stepId) {
console.log('hint clicked', hintElement, item, stepId);
});
intro.onhintclose(function (stepId) {
console.log('hint closed', stepId);
});
intro.addHints();
}
$(function() {
$('#step2').click(function(){
if ( $('#step2').hasClass('clicked') ) {
introJs().hideHints();
$('#step2').removeClass('clicked');
} else {
addHints();
$('#step2').addClass('clicked');
}
});
});
Instead of using hideHints intro.js API method just remove the div block of intro.js from DOM:
var introDiv = document.getElementsByClassName("introjs-hints")[0];
introDiv.parentNode.removeChild(introDiv);
(You can do the same thing with jQuery if you want to).
When the div is removed from DOM, just initialize hints once again as you do with your addHints method when you want to show hints and it'll work.
Instead of deleting the div block with javascript. You can use .removeHints()
This function is part of intro.js, but is not included in the documentation.
Perhaps a bit hacky, but this works for me...
First, put your hints into their own variable:
hints = [{...}, ...]
then, reset your hints in the intro options
intro.onhintclose(function(stepId) {
if (document.querySelectorAll('.introjs-hidehint').length === hints.length) {
intro.setOptions({hints: hints})
}
})
The hidden hints are given a class of introjs-hidehint, and document.querySelectorAll will return all of them in an array. Once that array is the same size as your hints array, reset your hints in your intro options and that will reset all your hints so you can show them all again.
Here's a more complete example that also allows:
(a) toggling hints on/off by clicking a button (located on a nav bar so used across multiple pages).
(b) once all hints have been clicked, the hints div gets removed so that clicking show hints button will again actually...show hints...
(c) allow you to store hints for multiple pages in a single json object array (re: nav bar).
var jquery = require('jquery');
var introJs = require('intro.js');
* ===========================================================================
* define onclick of hints button
* =========================================================================*/
jquery('#hints_button').on('click', function() {
if (document.getElementsByClassName('introjs-hints').length == 0){
addSomeHints();
}
else {
destroyHints();
};
});
/* ===========================================================================
* Add hints using the IntroJS library
* =========================================================================*/
/* define hints */
var theHints = [
{
element: document.querySelector('#step1'),
hint: "This is a tooltip.",
hintPosition: 'top-middle'
},
{
element: '#step2',
hint: 'More features, more fun.',
hintPosition: 'left'
},
{
element: '#step4',
hint: "<b>Another</b> step.",
hintPosition: 'top-middle'
}
];
/* generate hints with introjs */
function addSomeHints() {
intro = introJs();
intro.setOptions({
hints: theHints
});
intro.onhintclose(function (stepId) {
var remaining_hints = all_hints - document.getElementsByClassName("introjs-hidehint").length;
if (remaining_hints == 0) {
destroyHints();
};
});
/* add hints */
intro.addHints();
/* store number of hints created */
var all_hints = document.getElementsByClassName('introjs-hint').length;
};
/* remove hints div */
function destroyHints() {
var hintsDiv = document.getElementsByClassName("introjs-hints")[0]
hintsDiv.parentNode.removeChild(hintsDiv);
};
... hopefully this saves someone the 20 minutes it took me to piece together the answers and adapt it for what seems like a super common use case.

How to restrict selection on the datatable row?

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.

How to disable Aloha Editor toolbar?

Is there a way to disable Aloha's ExtJS toolbar in the same way as sidebar?
Aloha.settings =
modules: ['aloha', 'aloha/jquery']
editables: '.editable'
jQuery: $
sidebar:
disabled: true
toolbar:
disabled: true # does not work
You can just hide it with css such as:
div.aloha-toolbar {
display: none !important;
}
Mark element with class
<div class="editable notoolbar"></div>
Use event:
Aloha.ready(function () {
var $ = Aloha.jQuery;
Aloha.bind('aloha-editable-activated', function () {
if ($(Aloha.activeEditable.obj[0]).hasClass("notoolbar")) {
$(".aloha-toolbar").hide();
}
});
});
There is no easy way to disable the floating menu. You have to disable it by editing the source code you can do this by removing a couple lines. If you comment out line 1207-1210 the floating menu won't show up.
Hope this helps!

Categories