I have a data grid and one of its columns has a long header text, so I want to span it across multiple lines. I tried several things but to no avail. Here's my current code:
<s:GridColumn rendererIsEditable="true" sortable="false">
<s:headerRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:layout><s:HorizontalLayout horizontalAlign="center"/></s:layout>
<s:Label fontWeight="bold" text="Allow Spillover" verticalAlign="middle" maxDisplayedLines="2"
toolTip="Allow campaign spillover if the impression goal was not reached by the defined end date. Enabled only if a Periodic or Total Impressions were defined in the ‘General Capping’ section. Maximum Spillover is until next configured flight date."/>
</s:GridItemRenderer>
</fx:Component>
</s:headerRenderer>
As can be seen, I set maxDisplayedLines to 2, but the text still doesn't break, but spills outside of the column. What am I missing? Thanks.
follow this link for answer
How to center a header renderer in a Spark data grid?
just change the maxDisplayedLines in Label of Header Renderer
Related
How do I change the text of a JavaFX label only via the ID?
A simplified version of the code is shown below.
For context, we have a grid (GridPane) of labels (it's a sudoku game), the labels are numbered from Label_0_0, ..., to Label_8_8 (indicating the location in the grid). We are going over the label grid in a nested for loop and are trying to set different numbers at different lables/grid-boxes using the ID at the current coordinates of the for loop.
(For simplicity, I omitted the for loop etc. in the code example.)
I've searched the entire internet for answers and haven't figured it out yet, any help is highly appreciated :)
String labelID = "ID_1";
int index = 5;
Label currentlySelectedLabel = (Label) ???; // sth like xx.getElementByID, if that existed
currentlySelectedLabel.setText(Integer.toString(index));
Some reference to the labels in the FXML:
...
<Label fx:id="Label_8_6" alignment="CENTER" onMouseClicked="#MyFrstLabelClicked" onMouseMoved="#OnMouseMovedOnLabel" prefHeight="44.0" prefWidth="46.0" text="0" GridPane.columnIndex="6" GridPane.rowIndex="8" />
<Label fx:id="Label_8_7" alignment="CENTER" onMouseClicked="#MyFrstLabelClicked" onMouseMoved="#OnMouseMovedOnLabel" prefHeight="44.0" prefWidth="46.0" text="0" GridPane.columnIndex="7" GridPane.rowIndex="8" />
<Label fx:id="Label_8_8" alignment="CENTER" onMouseClicked="#MyFrstLabelClicked" onMouseMoved="#OnMouseMovedOnLabel" prefHeight="44.0" prefWidth="46.0" text="0" GridPane.columnIndex="8" GridPane.rowIndex="8" />
</children>
</GridPane>
</center>
</BorderPane>
Preferred approach: use a reference not a lookup
A preferred approach would be to store a reference to the nodes and use the stored reference. That way you don't lose all of the goodness of strong typing, compile-time checks, and IDE intelligent editing assistance.
For an example of a preferred approach see:
JavaFX: Update ImageView on GridPane click
Additionally, more substantial projects may benefit from a MVC approach so that updates made to the model are automatically reflected in the nodes (and vice-versa):
MVC in JavaFX
Applying MVC With JavaFx
Performing a lookup
You can find a node by CSS ID via a node lookup call on a node or a node lookup call on a scene.
For example:
Label lookedupLabel = (Label) scene.lookup("#myId");
The call takes a CSS selector to find a matching node.
Finds this Node, or the first sub-node, based on the given CSS selector. If this node is a Parent, then this function will traverse down into the branch until it finds a match. If more than one sub-node matches the specified selector, this function returns the first of them.
This approach assumes that an ID has already been set on the node by calling setId:
node.setId("myId");
Or in FXML when the node is defined you can set an fx:id attribute:
fx:id="myId"
or an id attribute:
id="myId"
Either will work, but only setting the fx:id is usually more convenient as it will also set the corresponding #FXML reference value in the controller, in addition to the CSS id.
Generating a layout pass
For the lookup to function, you may need to perform a layout pass, by calling:
parentNode.applyCss();
parentNode.layout();
Perform a layout pass before a CSS lookup if:
you have modified the scene graph in the current pulse, OR
you are trying to find a node that will dynamically be created by the skin of a control, OR
you want to find the dimensions of a node you look up.
If the layout pass is not performed, the looked-up node might not be found or may report the incorrect attribute values.
For more information on layout passes see:
Get the height of a node in JavaFX (generate a layout pass)
I have a templated column. I am using a Dropdown as header template and based on the value of the dropdown user sets, I update sigle DB record. Header drop down has nothing to do with the contents of the cells of that column. Everything works fine when the page is loaded and dropdown functions as expected.
As soon as I click anywhere on the gid and then click on the drop down, it behaves in a weird fashion i.e. it expands and then collapses. If I double click on the drop down it works as expected.
I am not able to understand what happens when I click inside the grid so that my drop down only responds to double click and not single click.
Here is the code snippet:
<igtbl:TemplatedColumn BaseColumnName="Assigned" Key="Assigned" AllowResize="Free" AllowRowFiltering="False"
AllowUpdate="Yes" Width="80px" Type="Custom" EditorControlID="assignTo" IsBound="false">
<Header Caption="Assigned To" ClickAction="SortSingle">
<RowLayoutColumnInfo OriginX="15" />
</Header>
<HeaderTemplate>Assigned To <select id="AssignToDefault" width="40px" runat="server" name="AssignToDefault"><option value="0">-Select-</option><option value="1">User</option><option value="2">API</option></select>
</HeaderTemplate>
<Footer>
<RowLayoutColumnInfo OriginX="15" />
</Footer>
</igtbl:TemplatedColumn>
I am trying to solve the issue since long. Please help.
Found the answer on Infragistics Community:
http://community.infragistics.com/forums/p/67149/340326.aspx#340326
EDIT (in case link deprecates):
I tested your scenario and was able to replicate the behavior in IE8 but not in Firefox.I suggest that you try disabling the activation behavior of the grid to see if that makes a difference:
UltraWebGrid1.DisplayLayout.ActivationObject.AllowActivation = false;
Alternatively you may want to consider using the WebCombo control in this scenario as it seems to be unaffected by the issue.
Please note that the UltraWebGrid control is now outdated and as of .NetAdvantage 2011 Volume 2 is no longer included in our product package. I would suggest that you consider switching to the WebDataGrid/WebHieararchicalDataGrid. More information regarding these controls is available at:
http://help.infragistics.com/NetAdvantage/ASPNET/2011.2/CLR4.0/?page=Web_WebDataGrid_WebDataGrid.html
Additional samples demonstrating the features of these grids can be found at:
http://samples.infragistics.com/aspnet/
Thank you :)
I would like to disable a spark drop down list but do not want to have the alpha color over it. I want the color to stay exactly the same. (by user requirements)
I have this code but the disabled color is still the standard disabled color.
mydropdown.enabled = false;
mydropdown.setStyle("disabledColor", 0xFFFFFF);
Am I missing something?
Thanks
Richard
DropDownList is different from DateField as it is spark vs mx. So you will want to set a custom skinClass for the DropDownList.
Create a copy of DropDownListSkin, Then remove the alpha.disabled=".5" from the top tag.
mydropdown.setStyle("skinClass", MyDropDownSkin);
Edit Adding an alternative
You can also wrap the dropdown in a group with the style disabledAlpha set to 1
<s:Group disabledAlpha="1" enabled="false">
<s:DropDownList />
</s:Group>
I want to stack two treeviews on each other and have the columns be aligned. I figured the way to do this would be to use a gtk.SizeGroup somehow. However, gtk.TreeViewColumn is not a widget... how can I do this?
I have two suggestions:
Look at how gtk.SizeGroup is implemented and see if you can write your own TreeViewColumnSizeGroup.
Connect to notify::width of each column and in the callback set the width of the corresponding column in the other treeview.
UPDATE: This is the final code that worked. In a loop I'm building both view columns at the same time, so this line is sufficient:
col1.connect("notify::width", lambda col1,_,col2:col2.set_fixed_width(
col1.get_width()), col2)
I think the reason there is no "column widget" is that the main area is just a gtk.gdk.Drawable where each of the cell renderers draw their stuff. However, each column has headers that are widgets, so we can use those to do what we want.
Pick one view to be the 'main' one, and set the other to have gtk.TREE_VIEW_COLUMN_FIXED sizing. Use .forall() to go through the internal child widgets of the 'main' view. These will be gtk.Buttons representing the column headers. Connect to their size-allocate event. On that event handler, get the requested width, and .set_fixed_width of the corresponding column on the slave view.
self._svcols = []
def sizealloc(wid, alloc):
ci = self._svcols.index(wid)
cl = self.slaveView.get_column(ci)
cl.set_fixed_width(alloc.width)
def resizes(child):
child.connect('size-allocate', sizealloc)
self._svcols.append(child)
self.mainView.forall(resizes)
This works even if the column headers are not being shown.
I am using richfaces's component extendedDataTable and I need to extend the grid height to show all the rows without using a scroller. To do so I have added a java script method to run on page load. This method aims to resize the grid.
The reason that I couldn't do this in code isI dont know the height of each row as it is not fixed beacuse word wrapping is allowed.
My problem is , When an ajax action occurs and the extendedDataTable rendered the onLoad is not executed again. So How I can execute a javascript method after the completion of an ajax request ?
Thanks
Are you explicitly setting the "height" attribute for the extendedDataTable or for the div that encloses it.
Well, I have done a similar kind of application ,in which extendedDataTable size should not exceed some fixed bounds(say 600px X 600px).Similar is case with individual columns, which are of fixed width(say 60px). This I am doing by explicitly setting the "width" property for rich:extendedDatatable and rich:column to fixed dimension.
So if the no of rows exceeds,the scroll bar appears.
Now I want my data(which is a very very long string) in each cell to be wrapped, and not exceed the given column width(60px), but not able to do that ? Currently, extendedDataTable trims the string for first 60px and puts... after that !!
It would be great if you can provide some insight on this.
Regards,
KB
Instead of trying to listen for the data table being reRendered, wrap the table and your JavaScript in another component, such as an h:panelGroup. Give the h:panelGroup an id and reRender it instead of the rich:dataTable.
Use style="height:auto;", like:
<rich:extendedDataTable id="tableId" value="#{someModel.someValues}" var="someVar" style="height:auto;">
<!-- ... -->
</rich:extendedDataTable>