My goal is to create a solid line between certain columns of a Grid. To accomplish this, I've done the following to the appropriate column:
ColumnConfig colConfig = new ColumnConfig("myID", "My Col Title", 50);
colConfig.setStyle("border-right:solid medium black;");
As you can see from the attached picture, the rows seem to have spaces between them that is preventing my column border from being a solid line going down. Can anyone help with either eliminating these lines between rows, or some alternative to accomplish my goal?
I see there is a method provided on the Grid type itself to turn on/off column lines:
grid.setColumnLines(false);
But I don't see anything for rows. I also don't know whether even for columns that method is hiding the lines or actually removing them - I suspect the former.
Thanks in advance for any and all answers.
Hi I did this by using a little string manipulation heres how;
Create yourself a GridView (extending Grid View) and override the following
protected String doRender(List<ColumnData> cs, List<ModelData> rows, int startRow, int colCount, boolean stripe) {
String grab = super.doRender(cs, rows, startRow, colCount, stripe);
grab = grab.replace("style=\"", "style=\"border:0px none; ");
return grab;
}
protected String renderRows(int startRow, int endRow) {
String grab = super.renderRows(startRow, endRow);
grab = grab.replace("style=\"", "style=\"border:0px none; ");
return grab;
}
this will strip out any borders in grid as its rendered
hope it helps
the border is defined for the class .x-grid3-row (applied on the div-element for the row), so you can just override this in a custom .css-file or delete the corresponding line from your gxt-all.css (i'd recommend the first method, because the gxt-all.css could change with future gxt versions, overwriting your changes)
Related
I am using Sencha GXT Grid for a web app. But what I see is after scrolling the grid the selection is gone. I tried to preserve the selection by catching the scroll event and restoring the selected items (using setsecteditems() ). But was not successful also.
Is there a method to preserve the selection in sencha GXT grid.
Thanx
I have finally able to preserve the selection in Live grid view. I found two ways that I thought worth to share.It's kind of a hack :)
1. If you are receiving data from a server. You can maintain a boolean in server side data preserving the selection. and when you render rows in the client side you can add a style name to that row checking the boolean which is set previously.
the style name can be set using
grid.getView().setViewConfig(new GridViewConfig() {
#Override
public String getColStyle(Object model, ValueProvider<? super Data, ?> valueProvider, int rowIndex, int colIndex) {
return null;
}
#Override
public String getRowStyle(Objectmodel, int rowIndex) {
//Do the logic here and return the Style name
return null;
}
});
You can also maintain a list of keys in client side which contains the selected items. and use the previous method to add a style name if the row you are drawing is in the list.
Thanx :)
I have a JavaFX app which contains a line chart. I want users to be able to select the color of each series in the chart. Since the selection is dynamic I can't use static CSS to set the colors. I also have other controls that I need to set to the same color as the associated series. It's possible to set the line color of a series dynamically using code like this:
series.getNode().setStyle("-fx-stroke: " + color + ";");
That works well and I can use the user-specified color on the associated controls.
My problem is that I also need to set the color of the symbols for each series to the same color. I can't find any way to do that dynamically. All of the tutorials, documentation, and posts that I've read on the topic point to the static CSS approach.
Most charting widgets make this sort of thing very easy to do, but I've found no clues here or on the Oracle forums. Any guidance would be greatly appreciated.
-- Update --
I've found no way to do this other than to enumerate every data point in every series, grab the associated symbol node and set the style individually. Not what I was hoping for. In the process I realized that the default Node allocated for a symbol is a StackPane. I didn't need that flexibility so I replaced it with a Rectangle. This made rendering faster.
I'm late to the game, but maybe someone can use my solution. What worked for me, was iterating through every item in the data series and setting the CSS style for each one.
for (int index = 0; index < series.getData().size(); index++) {
XYChart.Data dataPoint = series.getData().get(index);
Node lineSymbol = dataPoint.getNode().lookup(".chart-line-symbol");
lineSymbol.setStyle("-fx-background-color: #00ff00, #000000; -fx-background-insets: 0, 2;\n" +
" -fx-background-radius: 3px;\n" +
" -fx-padding: 3px;");
}
I was stuck with a similar problem. I don't know upfront which data is going to be added to the graph, so I can't make use of a fixed stylesheet.
I came up with this solution. This code listens for new series added to graph. For every added series, it will create a new listener for data added to the series.
This listener will look up which series this is, the 0th, 1st, etc and then find the two nodes for the coloring of the line and of the legend/symbol.
As soon as it has set both, it can unsubscribe.
Problem can be that the legend/symbol node is not available yet when you receive the callback on the first added datapoint.
I'm aware it's very convoluted and I'm open to hear improvements.
At least it will give you the option to dynamically set the color to anything you want.
final LineChart<Number, Number> chart = new LineChart<>(new NumberAxis(), new NumberAxis());
final ObservableList<Series<Number, Number>> series = chart.getData();
series.addListener(new ListChangeListener<Series<Number, Number>>() {
#Override
public void onChanged(Change<? extends Series<Number, Number>> change) {
ObservableList<? extends Series<Number, Number>> list = change.getList();
for (final Series<Number, Number> serie : list) {
serie.getData().addListener(new ListChangeListener<Data<Number, Number>>() {
#Override
public void onChanged(Change<? extends Data<Number, Number>> ignore) {
int index = series.indexOf(serie);
Set<Node> nodes = chart.lookupAll(".series" + index);
boolean isStyleSet = false;
for (Node n : nodes) {
if (StringUtils.isEmpty(n.getStyle())) {
String css = "-fx-stroke: %s; -fx-background-color: %s, white; ";
String color = //assign dynamically here, for instance based on the name of the series
n.setStyle(String.format(css, color, color));
isStyleSet = true;
}
}
if (!isStyleSet & nodes.size() > 1) {
serie.getData().removeListener(this);
}
}
});
}
}
});
I had a problem which might be slightly different (possibly more complex); I needed to style some nodes of a series one color, others within the same series another color (I also needed to be able to change the allocation of color dynamically). I am working in JavaFx 2.2; I have css-styling, but of course that does not help here. I could not find my issue addressed anywhere; this was the closest I've found.
I just want to say that I could not get "series.getNode().setStyle("-fx-stroke: " + color + ";")" to work. However, using "-fx-background" instead does work. I hope this helps someone.
I'm creating a dynamic VSD from a hierarchical set of data that represents a flowchart. I don't want/need to fuddle with absolute positioning of these elements - the automatic layout options will work just fine.
The problem is I can't figure out how to perform this command via code. In the UI (Visio 2010), the commands are on the ribbon here: Design (tab) -> Layout (group) -> Re-Layout (SplitButton).
Any of these will do. Looking through the Visio SDK documentation and Googling for a couple days have turned up nothing of very much use.
Any ideas? (using C#, but VB/VBA would do)
The Page.Layout() method itself is not enough.
In the WBSTreeView.sln sample project (VB.Net) I found how to accomplish this, but couldn't post my answer until 8 hours later :-x
The other layout types are possible by looking through the enums used below.
Compact -> DownRight just ended up being better for most of the flows we're creating.
Translated to C#:
// auto-layout, Compact Tree -> Down then Right
var layoutCell = this._page.PageSheet.get_CellsSRC(
(short)VisSectionIndices.visSectionObject,
(short)VisRowIndices.visRowPageLayout,
(short)VisCellIndices.visPLOPlaceStyle);
layoutCell.set_Result(
VisUnitCodes.visPageUnits,
(short)VisCellVals.visPLOPlaceCompactDownRight);
layoutCell = this._page.PageSheet.get_CellsSRC(
(short)VisSectionIndices.visSectionObject,
(short)VisRowIndices.visRowPageLayout,
(short)VisCellIndices.visPLORouteStyle);
layoutCell.set_Result(
VisUnitCodes.visPageUnits,
(short)VisCellVals.visLORouteFlowchartNS);
//// to change page orientation
//layoutCell = this._page.PageSheet.get_CellsSRC(
// (short)VisSectionIndices.visSectionObject,
// (short)VisRowIndices.visRowPrintProperties,
// (short)VisCellIndices.visPrintPropertiesPageOrientation);
//layoutCell.set_Result(
// VisUnitCodes.visPageUnits,
// (short)VisCellVals.visPPOLandscape);
// curved connector lines
layoutCell = this._page.PageSheet.get_CellsSRC(
(short)VisSectionIndices.visSectionObject,
(short)VisRowIndices.visRowPageLayout,
(short)VisCellIndices.visPLOLineRouteExt);
layoutCell.set_Result(
VisUnitCodes.visPageUnits,
(short)VisCellVals.visLORouteExtNURBS);
// perform the layout
this._page.Layout();
// optionally resize the page to fit the space taken by its shapes
this._page.ResizeToFitContents();
//
Changing Connector Line Colors
If you're unfamiliar with how formulas for colors work, this might also be very frustrating. By default you can give an int as a string to get pre-defined colors, but this isn't very helpful because there isn't an easy way to figure out what each of those colors are. (There is a Page.Colors collection, but you have to inspect each of their RGB values and figure out the color from them.)
Instead, you can use your own RGB values for the formula.
private void SetConnectorLineColor(Shape connector, string colorFormula)
{
var cell = connector.get_Cells("LineColor");
cell.Formula = colorFormula;
}
internal static class AnswerColorFormula
{
public static string Green = "RGB(0,200,0)";
public static string Orange = "RGB(255,100,0)";
public static string Yellow = "RGB(255,200,0)";
public static string Red = "RGB(255,5,5)";
}
Call the Layout method on the Page object. If there are shapes selected on this page then this method will only operate on the current selection. You may want to call DeselectAll on the ActiveWindow first.
my goal is to display a Table through parsing an XML file.
I'm using a SAX Parser and the content has multirows and I want
the table width to fit to the display. Of course Y_AXIS scrolling would be ok.
Right now, I'm using the HTMLTableModel of src/com/sun/lwuit/html/ and it's corresponding HTMLTable. For this I declared it's methods public so I can access them. This works fine so far. This allows me to declare tables without knowing their size prematurely.
To allow multirows, I'm embedding TextAreas in the Cells.
Now the problem: The HTMLTable t needs t.setScrollableY(true), or else not all rows are shown.
This causes the table to be a bit to large in X direction, so the right border isn't shown.
Also the bottom border isn't shown all the time.
The container in which the table is embedded has BorderLayout.Y_AXIS.
Things I tried:
t.setPreferredW(mainContainer.getLayoutWidth()); This does reduce the size of the table, but then the table doesn't show all it's rows, like without t.setScrollableY(true).
t.setLayout(new BoxLayout(BoxLayout.Y_AXIS)) this causes an java/lang/ClassCastException.
Any ideas? Thanks in advance.
Excerpt from my code:
} else if (qName.equalsIgnoreCase("td")) {
if (sb.length() > 0) {
String sbt = new String(sb);
sb.delete(0, sb.length());
TextArea c = new TextArea(sbt);
c.setEditable(false);
c.getStyle().setFont(smallFont);
table.addCell(c, false, null);
}
} else if (qName.equalsIgnoreCase("tr")) {
debugPrint("Row closed.");
table.commitRow();
} else if (qName.equalsIgnoreCase("table")) {
HTMLTable t = new HTMLTable(table);
//without scrollable Y not all table rows are shown
t.setScrollableY(true);
//t.setPreferredW(screenWidth);
//this is verboten.
t.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
mainContainer.addComponent(t);
tableBool = false;
You can't change the layout of the table from table layout otherwise it will not be a table.
It should be possible to get the table to fill the width of a parent BoxLayout_Y by assigning width percentages to table columns up to 100% e.g. for a 3 column table return assign 33, 33 & 44.
This can be achieved by subclassing table and overriding the method:
protected TableLayout.Constraint createCellConstraint(Object value, int row, int column) {
TableLayout.Constraint c = super.createCellConstraint(value, row, column);
c.setWidthPercentage(whateverYouWant);
return c;
}
Is there a way i can hide the border of the selected cell(or make the border color as white)in a qtablewidget.. By default a border with dotted line is shown.. Can u help me...
I prefer to do:
ui->tableWidget->setFocusPolicy(Qt::NoFocus);
You can also change the focus policy using the design tab.
It looks like this dotted border around selected cell you're trying to hide is a focus rectangle. Any given cell can have focus and not be selected at the same time and vice-versa. If you want this border to not get painted use an item delegate. There you can remove State_HasFocus style from the item's state before painting it. Pls, see an example below on how to do this, it's c++, let me know if you have troubles converting it to python
// custom item delegate class
class NoFocusDelegate : public QStyledItemDelegate
{
protected:
void paint(QPainter* painter, const QStyleOptionViewItem& option, const QModelIndex& index) const;
};
void NoFocusDelegate::paint(QPainter* painter, const QStyleOptionViewItem & option, const QModelIndex &index) const
{
QStyleOptionViewItem itemOption(option);
if (itemOption.state & QStyle::State_HasFocus)
itemOption.state = itemOption.state ^ QStyle::State_HasFocus;
QStyledItemDelegate::paint(painter, itemOption, index);
}
...
// set the item delegate to your table widget
ui->tableView->setItemDelegate(new NoFocusDelegate());
hope this helps, regards
Qt::NoFocus will remove the selected state of rows in QTableWidget.
The Python3/PySide2 version to the accepted answer:
class NoFocusDelegate(QtWidgets.QStyledItemDelegate):
def paint(self, painter: PySide2.QtGui.QPainter, option: PySide2.QtWidgets.QStyleOptionViewItem, index: PySide2.QtCore.QModelIndex) -> None:
itemOption = QtWidgets.QStyleOptionViewItem(option)
if option.state & QtWidgets.QStyle.State_HasFocus:
itemOption.state = itemOption.state ^ QtWidgets.QStyle.State_HasFocus
super().paint(painter, itemOption, index)
table.setItemDelegate(NoFocusDelegate())
Worked perfectly for me.