I have a listbox in markup and a detail control. The listbox template defines a details button for each element. If this button is pressed a dependency property in the element's datasource is set to Visiblility == Visible. As long as I do have a selected item everything is OK. But if there is no selected item, the detail control is displayed always. Markup:
<Listbox x:Name="myListbox" />
<local:detailcontrol Visibility="{Binding ElementName=myListbox, Path=SelectedItem.DetailVisibility}" />
What I want is something like this:
<Listbox x:Name="myListbox" />
<local:detailcontrol Visibility="myListbox.SelectedItem != null ? {Binding ElementName=myListbox, Path=SelectedItem.DetailVisibility} : Visiblity.Hidden" />
Snippets both do not compile, but are provided to make my point clear.
Starting using the article at http://www.11011.net/wpf-binding-expressions I implemented something similar which solved my problem
Related
I have this DevExpress GridControl that is dynamically created using a CellTemplateSelector. One of the GridControl columns is defined by a DataTemplate that appears as follows:
<DataTemplate x:Key="NameComboColumnTemplate">
<ContentControl>
<dxg:GridColumn
x:Name="GridColumnName"
FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"
Header="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).Header, RelativeSource={RelativeSource Self}}"
Width="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).Width, RelativeSource={RelativeSource Self}}">
<dxg:GridColumn.CellTemplate>
<DataTemplate>
<dxe:ComboBoxEdit
IsTextEditable="False"
SelectedItem="{Binding RowData.Row.SelectedCylinderName, Mode=TwoWay}"
ItemsSource="{Binding RowData.Row.NameList, Mode=TwoWay}">
<dxe:ComboBoxEdit.ItemContainerStyle>
<Style TargetType="dxe:ComboBoxEditItem">
<Setter Property="dxb:BarManager.DXContextMenu">
<Setter.Value>
<dxb:PopupMenu>
<dxb:BarButtonItem
x:Name="BarButtonItemName"
Content="Delete"
Command="{Binding DeleteNameCommand}"
CommandParameter="{Binding}"/>
</dxb:PopupMenu>
</Setter.Value>
</Setter>
</Style>
</dxe:ComboBoxEdit.ItemContainerStyle>
</dxe:ComboBoxEdit>
</DataTemplate>
</dxg:GridColumn.CellTemplate>
</dxg:GridColumn>
</ContentControl>
</DataTemplate>
There exists a class called DataGridRow, that contains properties for ONE row of GridControl data. This class also contains a command defined as
public ICommand DeleteNameCommand => new DelegateCommand<object>(obj => DeleteName(obj));
private void DeleteName(object obj)
{
// the obj parametercontains the text present on the ComboBoxEdit list item that was
// right-clicked to display the context menu.
// Delete the name from the list here
}
As shown above, the ComboBoxEdit SelectedItem and ItemsSource properties are bound to DataGridRow properties accessed via the RowData.Row property, and the DeleteNameCommand is also accessible via the RowData.Row property.
When the user clicks the ComboBoxEdit down-arrow, the list of Names is displayed, and when the user right-clicks a list name, the context menu is displayed. Since the PopupMenu/BarButtonItem is not part of the Visual Tree, how would I bind the BarButtonItem Command property to the RowData.Row property accessed in the ComboBoxEdit? ... and how could I pass the text of the ComboBoxEdit list item that was right-clicked as the value of the CommandParameter?
Any pointers to the right direction are very much appreciated.
OK ... after days of trying to figure this out, the great people at DevExpress were able to provide me with a solution. My apologies for posting the question as I did not expect (my bad) to get a solution so quickly (I asked them yesterday afternoon), but I thought it useful to inform the community of the solution.
The ComboBoxEdit editor data context is accessible via
(dxe:BaseEdit.OwnerEdit).DataContext
and to access the associated RowData.Row property, which itself contains the properties usable for each row column, is accessible via
(dxe:BaseEdit.OwnerEdit).DataContext.RowData.Row
SO, it follows that the PopupMenu/BarButtonItem Command can be bound to the DeleteNameCommand contained in the DataGridRow class, which itself is accessible via RowData.Row by specifying the following:
Command="{Binding Path=(dxe:BaseEdit.OwnerEdit).DataContext.RowData.Row.DeleteNameCommand, RelativeSource={RelativeSource Self}}"
... and the text of the ComboBoxEdit list item that was right-clicked is available to pass as the value for CommandParameter via the following declaration:
CommandParameter="{Binding}"
... and there was much rejoicing :-)
I am creating a dropdown in XUL like this:
<button id="bid" oncommand="alert(event.target.nodeName)" >
<menupopup>
<menuitem label="one" value="one" />
<menuitem label="two" value="two" />
<menuitem label="three" value="three" />
</menupopup>
</button>
I want to alert the value of nodeitem which is being clicked. Using event.target.nodeName giving nodeName as menuitem but using nodeValue is retuning undefined as it starts to take value of button node. How can I get the value of the menuitem clicked. I also tried $(this).val() but even that gave undefined. Using $(this).attr('value')
also didn't help. I can put oncommand for menuitem but that doesn't seem to be actual solution. Is that the only way or some method exist to get the value?
The XUL code you have in the question is non-functional. Either you should be using a <menulist> instead of a <button>, or your <button> needs the property type="menu" or type="menu-button". If you are going to use a <button> without the type="menu" property, you would actually have to open a popup in the command event handler for the <button> and then select from there. That does not appear to be what you are wanting. It is, however, quite doable. I use a construction like that in one of my add-ons, except I have it open when one of several <label> items is clicked. This allows re-use of a single <menupopup> for multiple different items in the window. In that case, the <menupopup> is a rather large amount XUL code that I did not want to repeat and maintain multiple duplicates in the XUL for the window.
The value of the <menuitem> selected:
Your actual question is how to get the value of the <menuitem> selected by the user. All of the code below is tested and functional. As you can see from the code you can get the value of the <menuitem> you select (at the time of selection) from: event.target.value.
Using a <menulist> element:
The most common element to use would be a <menulist>. This would normally be used when you are having the user select from multiple options a choice that is going to be remembered and used later, or used to adjust what is presented in the user interface. It would generally not be used to select from multiple immediate actions (which are acted upon and the choice not remembered). A <menulist> is what is used in the examples for <menuitem> and <menupopup> on MDN.
<menulist id="bid2" oncommand="alert(event.target.value)" >
<menupopup>
<menuitem label="one" value="one" />
<menuitem label="two" value="two" />
<menuitem label="three" value="three" />
</menupopup>
</menulist>
The above code will give you what looks like a button with a selection of <menuitem> entries when you click on it. It will alert with the value of the <menuitem> you have selected.
This will produce an item that looks like:
Which you can click on to open a drop-down list:
If you select an item:
You will get an alert:
And the object will then show your selection:
Using a <button> element:
It is also possible to use a <button> element with the property type="menu" or type="menu-button" specified. However, this provides no visual feedback to the user as to which option is currently selected. [Note: Your JavaScript could manually change the <button> label property to provide this feedback.] You could use this type of element if it is button that produces an immediate action rather than a selection that is remembered.
The code:
<button type="menu" id="bid2" label="A Button" oncommand="alert(event.target.value)">
<menupopup>
<menuitem label="one" value="one" />
<menuitem label="two" value="two" />
<menuitem label="three" value="three" />
</menupopup>
</button>
This will produce an item that looks like:
Which you can click on to open a drop-down list:
If you select an item:
You will get an alert:
And the object will then NOT show your selection:
If you want to set the label of the <button> to reflect the selection made by the user, you could use:
<button type="menu" id="bid2" label="A Button" oncommand="event.target.parentElement.parentElement.label=event.target.value;alert(event.target.value)">
<menupopup>
<menuitem label="one" value="one" />
<menuitem label="two" value="two" />
<menuitem label="three" value="three" />
</menupopup>
</button>
When three is selected, that will result in a button that looks like:
Using a <toolbarbutton>:
You could, alternately, use a <toolbarbutton>.
When not hovered, doing so would look like:
When hovered:
When open for selection:
Choices in UI design:
There are many choices that you have to make when designing your user interface. There are many different ways to get to the same effective result, with somewhat different look and feel. You really should be trying these types of options on your own. You may find the XULRunner program XUL Explorer to be of use when prototyping XUL.
Selecting UI elements and a look and feel is, in my opinion, beyond the scope of questions on stackoverflow. While you probably won't get specific XUL help, you can ask UI design questions at: the User Experience stack exchange.
I'm implementing some kind of frontend editor in my web page, using rich:editor. When clicking a link, the editor should open, and after saving editor's content, the editor should close again. I'm having trouble with onsave event for closing the editor. Here is my code.
This is the link that opens the editor, due to setting the property bean.show to true. It works ok:
<h:commandLink>
...
<f:setPropertyActionListener value="true" target="#{bean.show}" />
</h:commandLink>
This is the editor itself, only rendered when show evaluates to true:
<h:form>
<rich:editor value="..." onsave="showEditor(false)" rendered="#{bean.show}" />
</h:form>
The onsave event should close the editor by setting the show property to false again, but the editor stays open, because showEditor() is not called:
<a4j:jsFunction name="showEditor">
<a4j:param name="param1" assignTo="#{bean.show}" />
</a4j:jsFunction>
Am I doing something completely wrong? Or do you have any other ideas how to realize this? Any help is appreciated.
just double-checked: in version richfaces 4.x, there is no onsave attribute at all, but
oninit
onblur
onfocus
ondirty
onchange
like pointed out in the org.richfaces.component.UIEditor class. The same is true, if you want to use f:ajax to ajaxify the editor.
Right now, the "save"-icon in the editor just sends a form.submit() or something. So either try to add your jsFunction on that event or to introduce an own save-button.
Edit: Richfaces 4 uses the javascript based CKEditor, so if you want to overwrite their "save"-button, this forum entry regarding CKEditor's save implementation might be of your help.
Also a valueChangeListener might be a possibility solution to trigger your Bean.setShow(boolean show) property.
xhtml:
<rich:editor value="#{bean.editorValue}"
valueChangeListener="#{bean.valueChanged}" />
method in managed bean:
public void valueChanged(ValueChangeEvent e) {
// do the code to close the window here
}
The valueChangeListener also works in Richfaces 4.3, but maybe starting within the javascript of the CKEditor is the better choice.
Hope, that helps... L.
I am trying to track in a controller-bean, which tabs of a p:tabView were already visited (by tab-id).
I don't want to use the onTabChange event for some reasons (blocked already for other things).
So I tried to realize my usecase with onTabShow event of p:tabView. But did not succeed yet. I first tried with p:ajax listener:
<p:tabView>
<p:ajax event="tabShow" listener="#{myBean.checkTab(event)}" .../>
Result was error-message: tabShow not supported in p:ajax ...
Second try was using remoteCommand:
<p:tabView onTabShow="myCommand()">
...
<p:remoteCommand name="myCommand" actionListener="#{myBean.checkTab}" .../>
But how to pass the event as parameter to my bean-method to get the tab-object from?
Does somebody can help or has another idea how I can track the visited tabs in my bean?
With a binding of tabView perhaps? But how?
Thanks!
You can use the <p:ajax/> without specifying an event. That being said, you can get the currently selected tab either by
Binding the activeIndex property on the <p:tabView/> to a backing bean property
<p:tabView activeIndex="#{bean.selectedTabIndex}">
<p:ajax listener="#{myBean.checkTab}" .../>
</p:tabView>
With this variable bound, you can use it in checkTab.
Use the AjaxBehaviorEvent object to access the specific tab selected:
public void checkTab(AjaxBehaviorEvent abe){
TabView tb = (TabView) abe.getComponent();
List<Tab> loadedTabs = tb.getLoadedTabs();
Tab theTab = loadedTabs.get(tb.getActiveIndex());
}
and in your view:
<p:tabView>
<p:ajax listener="#{myBean.checkTab}"/>
I'm having a problem with this this XAML... When I run it, it hangs because of the TextBox. (By "hangs" I mean that the hosting aspx page shows in the browser, but the usercontrol object will not appear on the page, and there are some little green bars in the bottom of the Internet Explorer window that fill up but never go away.) I have both a TextBox and a TextBlock in my code just for testing. It runs fine if I comment out the TextBox and leave only the TextBlock, so I know the DataContext is getting set and the binding to PatternName does work. There are no errors in the Output window to help me debug. Please help! I've spent hours on this problem. What can possible be happening?
<StackPanel x:Name="HolePatternStackPanel" >
<TextBlock Text="{Binding PatternName}" Width="75" />
<TextBox Text="{Binding PatternName}" Height="25" Width="125"/>
</StackPanel>
Here is the code that sets the DataContext from a calling ListBox.SelectionChanged method:
private void lvHolePatterns_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
HolePatternStackPanel.DataContext = this.ActivePattern;
}
Well, I've learned more about this... This whole thing is a Master-Detail UI design, and so I had my ListBox using SelectedItem="{Binding ActivePattern}", and apparently, some infinite loop was getting set up between that and the SelectionChanged eventhandler.
So now my question now becomes what good is SelectedItem anyway? Since I had to add a SelectionChanged eventhandler to update the DataContext of the detail stack panel?
You wouldn't need to use the SelectionChanged event if you set the DataContext of the controls with the SelectedItem
for example
<Grid DataContext="{Binding SelectedItem}">
<TextBlock Text="{Binding some_field_in_selecteditem}" />
</Grid>