I work with ag-grid and i found how to make a column disabled in the doc (https://www.ag-grid.com/documentation-main/documentation.php)
but after reading doc i never find how can i make juste one row disabled.
i have already try editable: params => params.data.active === true.
Maybe i didn't read right or that doesn't exist. Is someone here with some soluce track ?
TL;DR
There is no option in the library to make a single row disabled(both visually and keyboard event based), the only way we could make a single row disabled is by using a customCellRenderer for both header and subsequent cell checkboxes, this allows full control over the checkbox.
Besides this, there are three other ways where you can disable ag-grid checkbox based on value,
1)This is using checkBoxSelection param, it would empty the cell based on the condition.
checkboxSelection = function(params) {
if (params.data.yourProperty) {
return true;
}
return false;
}
This would only disabled click events and style it accordingly,
cellStyle: params => return params.data.status? {'pointer-events': 'none', opacity: '0.4' } : '';
3)This would disable it completely, as you have control over the input, but you may have to use string literals,
cellRenderer: (params) => {
if (params.value) {
return `<input type="checkbox" checked/>`;
}
else {
return `<input type="checkbox" />`;
}
}
You could use customCellRenderer(customCellRendererParams for props), headerCellRenderer(headerCellRendererParams for props) which accepts a complete JSX component.
I think this would be the most helpful, it allows you to choose the cellRenderer component based on the row value for that column. Its very well described in the ag-grid documentation.
I think ag-grid has single row checkbox disablement available natively: https://www.ag-grid.com/angular-data-grid/row-selection/#example-forcing-checkboxes-as-selected
I use vue-chartjs to draw some chart like line, bar, etc.
In my project, there are many cases using specific value or lable of data in chart.
Using tooltip option of vue-chartjs, I can check that value or label of data item when hovered.
I want to know how to access or get information of specific data matched with point on graph when clicked(not hovered).
Here is my code about chart options.
chartOptions: {
responsive: false,
onClick: function(evt){
//Some logic to get value of label of specific data...(type, label, value, ...)
}
In my case, I use 'onclick' option to access specific data on point triggered 'click' event. In 'onClick' callback, I checked all of chart elements and dataset, etc.
How can I get value of label specific dataItem on point of graph(like line) or bar of graph(like bar) when triggered click event?
I was not able to find a solution that worked for me, but I dug a little bit and this is what I came up with.
onClick: function(evt, array) {
if (array.length != 0) {
var position = array[0]._index;
var activeElement = this.tooltip._data.datasets[0].data[position]
console.log(activeElement);
} else {
console.log("You selected the background!");
}
}
This will get the position in the array that you clicked and grab the data from what position you clicked. This may not be the prettiest or best example, but it worked for me.
This solution use the getElementAtEvent method of chartjs, but to use that you need reference to the Chart itself, not the Vue component. We can get that from the $data._chart property. To use this in a parent Vue component, we use the $refs as seen below`.
So parent defines the chart options
{
...
options: {
onClick: this.handleChartClick
}
...
}
and then parent method, using $refs with $data._chart to get the chart. We get the datasetIndex and value and also the tooltip
handleChartClick(evt, elements) {
var chart = this.$refs.periodChart.$data._chart;
const chartIndex = chart.getElementAtEvent(evt);
if (chartIndex.length !== 0) {
const datasetIndex = chartIndex[0]._datasetIndex;
const position = chartIndex[0]._index;
const info = {
datasetIndex: datasetIndex,
valueIndex: position,
label: chart.tooltip._data.labels[position],
value: chart.tooltip._data.datasets[datasetIndex].data[position]
};
console.log(info);
} else {
console.log("Background clicked");
}
I have a spider plot in using the graphing library of Dojo defined like this:
require([
"dojox/charting/Chart",
"dojox/charting/themes/Claro",
"dojox/charting/plot2d/Spider",
"dojox/charting/action2d/Tooltip",
"dojox/charting/widget/SelectableLegend",
"dojox/charting/axis2d/Default"
], function (Chart, theme, Spider, Tooltip, Legend, Default) {
var chart = new Chart(element).setTheme(theme).addPlot("default", {
type: Spider,
radius: 200,
fontColor: "black",
labelOffset: "-20"
});
var colors = ["blue", "red", "green", "yellow", "purple", "orange", "teal",
"maroon", "olive", "lime", "aqua", "fuchsia"];
$.each(factors, function (index, factor) {
chart.addAxis(factor.name, {
type: Default,
min: factor.min,
max: factor.max
});
});
$.each(presets, function (pIndex, preset) {
var data = [];
$.each(factors, function (fIndex, factor) {
data[factor.name] = preset.values[fIndex];
});
chart.addSeries(preset.short, data, {
fill: colors[pIndex % colors.length]
});
});
new Tooltip(chart, "default");
chart.render();
new Legend({
chart: chart,
horizontal: false
}, $(element).next(".legend")[0]);
});
I add a series for every member of an array called presets and I use a selectable legend that lets the user turn them on or off as they want. However, what I can't seem to find in the docs is how to start a series in the unselected, not visible state? What I ideally want to do is cap the number of series visible when the page loads because in some cases I have up to 14 presets and it just looks a mess until the user deselects a bunch. So I'd like to have, say, every preset above the first 5 be hidden at the start.
Here's a crude fiddle I've knocked to demonstrate. What I want is to have some of the series unselected when the plot is first displayed.
Update: I tried adding this after adding my series:
var checkboxes = $(".dijitCheckBoxInput").each((index, elem) => {
if (index > 4) {
elem.click();
}
});
Which works, but seems very fragile. If they change the class assigned to checkboxes, it'll break. Also, it prohibits me using more than one set of dojo checkboxes because I don't have a good way to tell the difference. (Note, the IDs of the checkboxes added by the SelectableLegend are dijit_form_CheckBox_0, dijit_form_CheckBox_1, etc, which also gives no useful information as to what they are related to). I thought I might be able to use the legend placeholder div as a way to select the descendant checkboxes, but it appears that Dojo replaces the placeholder entirely with a table.
i looked into the dojo code and found the area in which the shapes are toggled on & off whitin the SelectableLegend.js :
var legendCheckBox = query(".dijitCheckBox", legend)[0];
hub.connect(legendCheckBox, "onclick", this, function(e){
this._toggle(shapes, i, legend.vanished, originalDyn, seriesName, plotName);
legend.vanished = !legend.vanished;
e.stopPropagation();
});
The toggling process is very complex and is based on many local attributes:
_toggle: function(shapes, index, isOff, dyn, seriesName, plotName){
arrayUtil.forEach(shapes, function(shape, i){
var startFill = dyn.fills[i],
endFill = this._getTransitionFill(plotName),
startStroke = dyn.strokes[i],
endStroke = this.transitionStroke;
if(startFill){
if(endFill && (typeof startFill == "string" || startFill instanceof Color)){
fx.animateFill({
shape: shape,
color: {
start: isOff ? endFill : startFill,
end: isOff ? startFill : endFill
}
}).play();
}else{
shape.setFill(isOff ? startFill : endFill);
}
}
if(startStroke && !this.outline){
shape.setStroke(isOff ? startStroke : endStroke);
}
}, this);
}
I tried also checking & unchecking the dijit/form/Checkbox in a legend manually, but that does not trigger the _toggle function in any case, even if you do a render() / fullrender() on the chart.
With that in mind it seems that there is no other possibilty to toggle the series on and off than by firing the onclick events manually.
To make your code less fragile, you could access the Checkbox widgets within the legend manually using:
query(".dijitCheckBox", legend); // Should deliver an array containing
the widgets.
and triggering the onclick event on them. Their keynumber in the array should correspond to the order the series where added...
Dojo is a fine piece of work, please dont stop working with it !
dojox/charting/Series has an attribute called dirty which according to the API docs is a "flag indicating whether or not this element needs to be rendered".
Alternately, if you are limiting the display of some series you can write a separate interface for adding them. For example, loop over the first 5. Then create a select box or list of check boxes with all entries and an onchange event that calls chart.addSeries.
Keeping a reference to each series you create will allow you to later call destroy() or destroyRecursive() on it if the user no longer wishes it displayed.
So while ideally you could toggle the display of these series, the worst case senerio is that you just add, destroy, and read based on some user input.
Using a templated widget will allow you to keep this interface and the chart tightly linked and support reuse.
BTW, consider using "dojo/_base/array" and "dojo/query" in place of the jquery
I think i've got it !
I found another way to access the checkboxes ! It's the same way dojo uses internally to connect the "toggle code" to the onclick event. First take a look at this from SelectableLegend.js (Lines 150 - 156):
// toggle action
var legendCheckBox = query(".dijitCheckBox", legend)[0];
hub.connect(legendCheckBox, "onclick", this, function(e){
this._toggle(shapes, i, legend.vanished, originalDyn, seriesName, plotName);
legend.vanished = !legend.vanished;
e.stopPropagation();
});
It looks like they use the ".dijitCheckBox" class to find the checkbox dom element and connect to it using dojo/connect. Now based on that, i made this function:
function toggleSeries (legend,num) {
dojo.query("*",legend.legends[num])[0].click();
dijit.findWidgets(legend.legends[num])[0]._onClick(); }
It doesn't use any class definition (because of the *) and it accesses the areas where the checkboxes are from within the SelectableLegend. It needs the SelectableLegend and the number of the series you want to deactivate as parameters. Here the jsfiddle example with this function & hiding all 4 of your series with it:
http://jsfiddle.net/luciancd/92Dzv/17/
Also please notice the "onDomReady" Option in jsfiddle, without it: doesnt work in IE.
And the ready function within the code !
Lucian
I have updated your code http://jsfiddle.net/92Dzv/18/
Here is the key to toogle.
dom.byId(le._cbs[0].id).click();
dom.byId(le._cbs[2].id).click();
Choose the index of your legend and set to _cbs.
By this way le._cbs[0].id you will get the real id of checkbox (that inside in the widget) and then just use click()
Note : le is came from here.
var le = new Legend({
chart: chart,
horizontal: false
}, legend);
This is how I create the dropdown menu with checkboxes using dijit.
layerList.reverse();
var menu = new dijit.Menu({
id : 'layerMenu'
});
dojo.forEach(layerList, function(layer) {
menu.addChild(new dijit.CheckedMenuItem({
label : layer.title,
id : layer.title.replace(" ",""),
checked : layer.visible,
onChange : function(evt) {
if (layer.layer.featureCollection) {
//turn off all the layers in the feature collection even
//though only the main layer is listed in the layer list
dojo.forEach(layer.layer.featureCollection.layers, function(layer) {
layer.layerObject.setVisibility(!layer.layerObject.visible);
});
} else {
layer.layer.setVisibility(!layer.layer.visible);
}
}
}));
});
var button = new dijit.form.DropDownButton({
label : i18n.tools.layers.label,
id : "layerBtn",
iconClass : "esriLayerIcon",
title : i18n.tools.layers.title,
dropDown : menu
});
dojo.byId('webmap-toolbar-center').appendChild(button.domNode);
I can access the individual dijit.CheckedMenuItem at runtime when the onChange event fired because I know their id. Since dijit does not has a RadioButton for MenuItem, is there a way I can change the checked status in runtime. Using "this.Id" and "evt", I can know which one is being check/uncheck by the user. Technically I can try to uncheck the other checked items if necessary to simulate the radio button behavior.
Can someone tell me how I can check/uncheck dijit.CheckedMenuItem in runtime? What properties and functions I need to call?
You should be able to just set checked to false on the other CheckedMenuItem widgets
checkedMenuItemWidget.set('checked',false)
To uncheck any given checkedMenuItem.
I am trying to do something like : when user click on the button, the child panel will show/hide
the issue is the 'onbtnClick' function is working just once. when i click on the button the panel shows and then when i click it again nothing happens and no errors tho ! the panel should hide
By the looks of it, there isn't really much need to pass a boolean param to the function.
If you purely want a 'toggle' function, based on the panels visibility and you have a reference to the Ext component, you can use the isVisible() function:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-isVisible
So your onBtnClick function would look something like this:
onbtnClick: function (){
var childPanel = Ext.getCmp('p');
if(childPanel.isVisible()) {
childPanel.hide();
}
else {
childPanel.show();
}
}
onbtnClick: function (){
var childPanel = Ext.getCmp('p');
if (!childPanel.isHidden()) {
childPanel.hide();
} else {
childPanel.show();
}
}
Instead isVisible() use method isHidden() because method isVisible may return false when the panel is covered by other components or is not rendered yet (even when your panel has not got hidden property (hidden = false)).
panel.getEl().toggle();
will serve your purpose.
-YP
you have setVisible, taking a boolean parameter to know what to do.
childPanel.setVisible( ! childPanel.isVisible() )
This example will actually toggle the visibility at each execution.