The problem is that I can not make ag-grid-react to show custom components for loadingOverlay and noRowsOverlay automatically (meaning managed by the grid itself). I've done all like described in the docs.
These are my options:
frameworkComponents={{
customOverlayLoading: CustomOverlayLoading,
customOverlayNoRows: CustomOverlayNoRows,
}}
loadingOverlayComponent="customOverlayLoading"
noRowsOverlayComponent="customOverlayNoRows"
Interesting thing is that it works for "clientSide" row model, e.g. when using prop rowData={undefined} - loading or rowData={[]} - noRows.
But when I replace rowData with rowModelType="serverSide" the grid then does not recognize new components for overlay.
There is no mention in the docs that this thing only works with clientSide row model. So I expect it should work. The way I can make it work is through the grid API. But I expect from that feature it should handle loading and noRows automatically for each of row models. The problem with the API usage is that there is no flag that points whether it is loading or not
there is the stackblitz reproduction. To check serverSide rowModel enterprise version needed
https://stackblitz.com/edit/ag-grid-ro-model?embed=1&file=index.js
When you're using rowModelType='serverSide', you need to call overlays yourself inside getRows() where you're implementing datasource.
gridApi.showNoRowsOverlay(); // show NoRowsOverlay
params.successCallback([], 0); // Pass empty array, Zero for lastRow
It will work. :)
Related
I am trying to show some data in a bar chart and stacked bar chart using JavaFx. I am using 4 series into which I populate the data, using eclipse oxygen.
I use series1 and series2 in the Bar Chart.
I use series1, series2, series3, and series4 in the Stacked Bar Chart.
I have created my screen using the JavaFx Scene Builder. Populate the scenes and displaying the data. My problem is that I am not able to show both the graphs at the same time. Only the latter gets populated, depending on the order of the population. The extra bit I have added is that the graphs expand on a mouse enter event and then reduces to the orginal size on the mouse exit event.
Can anyone help me by pointing out what I am doing wrong?
My code is as follows
#FXML
private void bcsbg_mouseentered() {
if (!clickEntered) {
clickEntered = true;
prefWidth = bcByGroup.getPrefWidth();
prefHeight = bcByGroup.getPrefHeight();
bcByGroup.setPrefSize(1500, 900);
gXAxis.setPrefHeight(Region.USE_COMPUTED_SIZE);
gXAxis.setPrefWidth(Region.USE_COMPUTED_SIZE);
gYAxis.setPrefHeight(Region.USE_COMPUTED_SIZE);
gYAxis.setPrefWidth(Region.USE_COMPUTED_SIZE);
gXAxis.setVisible(true);
gYAxis.setVisible(true);
gXAxis.setLabel("Value");
gYAxis.setLabel("Question");
gXAxis.setTickLabelsVisible(true);
gYAxis.setTickLabelsVisible(true);
gXAxis.setTickMarkVisible(true);
gYAxis.setTickMarkVisible(true);
sbcByAll.setVisible(false);
} else {
clickEntered = false;
bcByGroup.setPrefSize(prefWidth, prefHeight);
gXAxis.setPrefHeight(0);
gXAxis.setPrefWidth(0);
gYAxis.setPrefHeight(0);
gYAxis.setPrefWidth(0);
gXAxis.setVisible(false);
gYAxis.setVisible(false);
gXAxis.setLabel("");
gYAxis.setLabel("");
gXAxis.setTickLabelsVisible(false);
gYAxis.setTickLabelsVisible(false);
gXAxis.setTickMarkVisible(false);
gYAxis.setTickMarkVisible(false);
sbcByAll.setVisible(true);
sbcByAll.getData().clear();
sbcByAll.getData().addAll(series1, series2, series3, series4);
}
bcByGroup.getData().clear();
bcByGroup.getData().addAll(series1, series2);
}
The problem here is not in your code, but in the way the chart API is written. (I'm not normally a fan of criticizing languages or standard libraries, but parts of this API appear to have been written by an unsupervised intern with a particularly bad hangover.)
The XYChart.Data class keeps a reference to the node that displays the data. (This fairly obviously violates the most basic tenets of MVC, and makes separating the data into a different class completely redundant.)
Consequently, if you try to use the same data in two charts, the same node tries to appear in two parents, which is not allowed, and you only see the visualization of the data in one place. Unfortunately, you need to replicate the data for each chart.
Thank you, Dave. You are right. I did not go through the standard documentation on the XYData.Chart to notice that this object would be attached to the node in which the data was going to be displayed.
I was really hoping to avoid replication but the code does work as soon as the data series is replicated and attached to the different charts.
As mentioned by Dave,
The XYChart.Data class keeps a reference to the node that displays the data. (This fairly obviously violates the most basic tenets of MVC, and makes separating the data into a different class completely redundant.)
Please go through the standard documentation provided in Dave's link.
I need to slightly modify a ag-grid row after it has been rendered. In ag-grid, the actual HTML elements are not necessarily persistent, so manually-set styles may fall off.
For one thing, I have to modify the selection checkbox to set its tabindex to -1. This can technically be done in the cellRenderer callback, although it looks quite hacky. (The checkbox can be found at params.eGridCell.children[0].children[0].wrappedElement.)
But I also have to add a CSS class to some rows to highlight them based on external criteria. I haven't found a way to do this at all.
The best solution would seem to be using some sort of after-rendering callback, but to my knowledge no such thing exists.
I found a couple of related questions, but they were both resolved via cellStyle, which would not suffice here:
Row formatting in ag-Grid
How to provide a background color for an entire row in ag grid based on a certain value in a column?
You have not 1 but 3 options:
getRowClass(params):
Callback version of property 'rowClass'. Function should return a string or an array of strings.
getRowStyle(params):
Callback version of property 'rowStyle'. Function should return an object of CSS values.
processRowPostCreate(params):
Allows you to process rows after they are created. So do final adding of custom attributes etc.
In this last one you have the row in params.eRow.
All taken from https://www.ag-grid.com/javascript-grid-callbacks/index.php
I have built a bokeh app that allows users to select windows in data and run python code to find and label (with markers) extreme values within these limits. For ease of interaction, I use the box select tool for the range selection. My problem arises when repeating this process for subsequent cases. After markers are placed for the results, they are rendered invisible by setting alpha to zero and another case needs to be chosen. When the new select box includes previous markers, they become visible based on the selection. How do I override this default behavior? Can markers be made unselectable? or can I add code to the customJS to hide them after they are selected?
Thanks in advance for any help!
There are a few possible approaches. If you just want non-selected glyphs to "disappear" visually, you can set a policy to do that as described here:
http://docs.bokeh.org/en/latest/docs/user_guide/styling.html#selected-and-unselected-glyphs
Basically, for bokeh.plotting, pass
nonselection_fill_alpha=0.0,
nonselection_line_alpha=0.0,
as arguments to your plot.circle call or whatever. Or if you are using the low level bokeh.models interface, something like:
renderer.nonselection_glyph = Circle(fill_alpha=0.0, line_alpha=0.0)
But be aware (I think you already are) that the invisible markers are still there, and still selectable if the user happens to draw a box over them with the selection tool.
If you truly want only a subset of the data to be visible and selectable after a selection, I'd say you want to replace the data in the column data source wholesale with the subset in your selection callback.
I am new to dc.js. And I refer to the API Reference and see the chart.select function. But I do not know how to use it.
Such as I have a piechart and I want to have the value and percentage showing in the div below the chart. Could some one tell me if this can be realized using chart.select?
chart.select is for selecting some elements in the d3 or CSS selector sense, if you want to apply some attributes. It probably won't help you directly.
What you are probably looking for is the filtered event, which will tell you when items have been selected. Then you can read the filters and display them elsewhere like so:
chart.on('filtered.some_id', function() {
d3.select('#your-div').text(chart.filters().join(','));
});
(There are also ways to respond directly to interaction events, but I think this is more to the point for what you're trying to do.)
I'm using gxt 3.0.1 and I have Basic Grid added on my form.
Now I've added filter for each column which can be used over TextBox in menu of grid columns (basically it's Filter Grid now).
I have to make my own TextBox above grid and apply filter to it. And do that for each column of grid.
Filtering is done locally.
My idea was to look for code they made for their TextBox and apply it on mine TextBox.
But I failed.
It should be just String filter, which should work exactly as filter provided in Filter Grid.
Also I'm using UiBinder.
From the GridFilters javadoc
* Filtering is adjusted by the user using the grid's column header menu (this
* menu can be disabled through configuration). Through this menu users can
* configure, enable, and disable filters for each column.
This is meant to be used to configure column header menus to have filters built in, not set up text boxes outside of the grid - see http://www.sencha.com/examples/#ExamplePlace:filtergrid for how this is intended to work.
To build the way you are describing, start instead with making a StoreFilter object based on the contents of the TextBox, adding it to the store, and re-applying the filter each time the contents of the text box change.
Check out StoreFilterField for a working example, or follow the above instructions to build your own.
If this doesn't work, please provide a code sample in your question...