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 :)
Related
I want to add close button to top right corner of a dialog box.
I tried using setbounds with addactor and just add and setposition with setsize and addactor, but nothing works. I know that dialog works with table layout, it has a table for content and for buttons. I don't want to use this layout and put the button outside this layout like on the border of the dialog.
How can I do it?
This is how it should be:
The easiest solution I could come up with now, is to use negative padding for your button to move it "outside" of it's cell.
Button closeButton = new TextButton("X", skin, "default");
getTitleTable().add(closeButton).size(60, 40).padRight(-30).padTop(-20);
With this padding hack you have the problem, that the button will be outside of your Dialog, and by default, Window checks the bounds of your window when it performs Actor.hit(...) evaluation.
We need to disable clipping for that reason, but the rendering of the window depends on it. That's why we use another hack to enable it, just for the rendering:
#Override
public void draw(Batch batch, float parentAlpha) {
setClip(true);
super.draw(batch, parentAlpha);
setClip(false);
}
Do this:
private Stage stage;
private Window window;
private Table table;
#Override
public void show() {
table = new Table();
table.setSize(Gdx.graphics.getWidth() / 2
, Gdx.graphics.getHeight() / 5);
window = new Window("", skin);
window.setSize(table.getWidth(), table.getHeight());
Button btnWindow = new Button(skin, "close");
btnWindow.addListener(new ClickListener() {
#Override
public void clicked(InputEvent event, float x, float y) {
window.setVisible(false);
}
});
window.addActor(btnWindow);
btnWindow.setSize(50, 50);
btnWindow.setPosition(window.getWidth() - btnWindow.getWidth()
, window.getHeight() - btnWindow.getHeight());
table.addActor(window);
window.setModal(true);
table.setPosition(Gdx.graphics.getWidth() / 2 - window.getWidth() / 2
, Gdx.graphics.getHeight() / 2 - window.getHeight() / 2 +
100);
window.addAction(Actions.sequence(Actions.alpha(0)
, Actions.fadeIn(.1f)
, Actions.moveTo(+50, +50, 1)));
stage.addActor(table);
}
I had a similar problem. After a bit of searching this thread helped me.
Basically to tell the alignment of the actors inside a table, and to tell the alignment of the table itself are two separate things. Setting the alignment of the table top top-left would produce the desired behavior.
table = new Table();
table.setFillParent(true);
table.setSkin(usedSkin);
table.setDebug(true);
table.top().left();
stage.addActor(table);
table.add(exitBtn);
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.
this is really a strange problem i came across several google searches which returned in vain .
Well i have a list view in which the selected item color should be changed while user click on the item.
This post helped me to change the list view selected item color. Now i am able to change the color while the item is clicked . But if i scroll the list view the color jumps out of selection.
https://stackoverflow.com/a/12080202/1657093
If a item is selected say for instance the listview item on first row the last item is also gets selected while scrolling the item color keeps on moving to the item which i never selected.
here is the list view
<ListView
android:id="#+id/loadedlist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/horizontalScroll"
android:layout_alignParentLeft="true"
android:layout_below="#+id/Title"
android:layout_toLeftOf="#+id/sidepanel"
android:scrollingCache="false">
</ListView>
I use array adapter to populate the list view
ringlist.setAdapter(new ArrayAdapter
(this,android.R.layout.simple_list_item_1,rings));
and use list view's on click method to set the color ,
ringlist.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int pos,long id) {
// TODO Auto-generated method stub
try{
String con;
String s = ringlist.getItemAtPosition(pos).toString();
con = s.toLowerCase();
String selectedFromList = con;
int resId = getResources().getIdentifier(selectedFromList, "raw",
"com.example.android");
}
if (row != null) {
row.setBackgroundColor(Color.BLACK);
}
row = view;
view.setBackgroundColor(Color.GREEN);
}
}
});
the above code does the job but while scrolling the list something goes wrong
please advice.
This is common issue of Listview in android.
When we use checkbox/radio button in Listview Item after scrolling down or up, the selected position does gets changed at some different places.
The only solution to this till now is, we need to maintain the selected position in a arraylist(or to any structure you are comfortable).
And as you scroll up/down the list view, the getview does gets called.
So write code in your getview() to make checkbox items selected from arraylist.
Also dont use if-else condition in getview for convertview.
Store clicked/selected positions in a set or array in your onItemClick() method. Write code to show clicked/selected items in getview() method of your adapter using stored positions.
I've encounter a problem with editable table cells. I'm using the TableView in my project just as the Tutorial on Oracle.
According to it, I use the setCellFactory method to reimplement the table cell as a text field with the help of the TextFieldTableCell class. However, I found the steps is a little complex to get to the point where the cell can be edited:
Let the table cell be selected by using direction key.
Press “Enter” to converts the cell to a text filed so that it is ready to be edited.
Clicking in the text field allows the contents to be edited
The problem is step 3, that you must use the mouse to click before you can input data in this table cell.
So, is there a solution to avoid step 3? That is the text field allows the data inputting when you just press “Enter”(step 2).
By the way, English is not my native language. Hope I have made myself clear.
The Node can be focused manually. The TextFieldTableCell is a TableCell that has a Node (Graphic) TextField which will be rendered when the cell is in editing mode. You need to focus to this textField manually but by using TextFieldTableCell you cannot access to the textField. However if you would prefer the alternative way described in the tutorial you are referring, then you have a chance to focus. The only changed method from that tutorial is:
#Override
public void startEdit() {
super.startEdit();
createTextField();
setText(null);
setGraphic(textField);
textField.selectAll();
// Set the focus
Platform.runLater(new Runnable() {
#Override
public void run() {
textField.requestFocus();
}
});
}
To start editing in a TableView without mouse-click event, invoke TreeView.edit(rowIndex, tableColumn);
For example:
//create tableview object
TableView<YourModel> tableView = new TableView<>();
//create column
TableColumn<YourModel, String> column = new TableColumn<>("Property Name");
//add column to tableview
tableView.getColumns().add(column);
//... your cell factory and the rest
//add an item
tableView.getItems().add(new YourModel());
//if you want to edit the selected item, get its index
int selectedIndex = tableView.getSelectionModel().getSelectedIndex();
//fire edit
tableView.edit(selectedIndex, column);
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.