I have a 3 cascading combo boxes: cb1, cb2, cb3.
cb3 values depend on cb2 and cb2 values depend on cb1 value.
These comboboxes are located inside a DataForm.EditTemplate
The first time I edit an item, everything get's populated.
The second time I edit another item,
cb1, gets populated while
cb2 & cb3 values disappear.
When I debug my code,
this is the codebehind snippet.
var cboC2 = (ComboBox)ProductRequestForm.FindNameInContent("cb2");
var cboC3 = (ComboBox)ProductRequestForm.FindNameInContent("cb3");
returns null.
But when I run again
no error occurs.
Heres my xaml code.
<dataform:DataField LabelPosition="Top" Label="Status" IsRequired="True" Grid.Row="2" Grid.Column="1">
<ComboBox x:Name="cb2"
SelectedItem="{Binding ProductRequestStatus, Mode=TwoWay}"
DisplayMemberPath="ProductRequestStatusDescription" SelectionChanged="cb2_SelectionChanged" />
</dataform:DataField>
<dataform:DataField LabelPosition="Top" Label="Severity" IsRequired="True" Grid.Row="4" Grid.Column="1">
<ComboBox x:Name="cb3"
SelectedItem="{Binding ProductRequestSeverity, Mode=TwoWay}"
DisplayMemberPath="ProductRequestSeverityDescription" />
</dataform:DataField>
These are triggered by an event SelectionChanged.
Please help.
Thank you.
Related
My environment is Python 2.7, running on Windows 7.
I'm trying get a Tkinter Listbox to trigger a callback in response to the user changing the 'active' item (i.e. the item with focus). I'm using a binding to the <<ListboxSelect>> event to make this happen, and it's working -- sort of.
The callback itself is supposed to check what the new active item is, and carry out some processing accordingly. This logic operates the way I expect when I change the active item via the up/down arrow keys. But when I point & click on a new item instead, the code mistakenly identifies the prior active item as the current one.
Here's a stripped-down code sample that illustrates the behavior I'm getting:
import Tkinter as tk
#Root window
root = tk.Tk()
#Callback to show focus change
def updateDisplay(*args):
focusIndex = str(lb.index(tk.ACTIVE))
ctrlFI.set('Focus is at index '+focusIndex)
#Control variables
ctrlLB = tk.StringVar()
ctrlFI = tk.StringVar()
#Widgets
lb = tk.Listbox(root,
width=20, height=10,
relief=tk.FLAT,highlightthickness=0,
selectmode=tk.EXTENDED,
activestyle='dotbox',
listvariable=ctrlLB)
lbl = tk.Label(root,
justify=tk.LEFT, anchor=tk.W,
textvariable=ctrlFI)
lb.grid(row=0,column=0,sticky=tk.NW,padx=(5,0),pady=5)
lbl.grid(row=1,column=0,columnspan=2,sticky=tk.NW,padx=5,pady=5)
#Listbox binding to trigger callback
lb.bind('<<ListboxSelect>>',updateDisplay)
#Initializations to prep GUI
ctrlLB.set('Index0-entry Index1-entry Index2-entry Index3-entry Index4-entry')
ctrlFI.set('Ready')
#Begin app
tk.mainloop()
Here are the results when you use the arrow keys:
But here's what you get when you click with the mouse:
The information 'lags' one behind, showing the prior selection instead. (If you click the same item a second time, it 'catches up.')
So my questions are:
What is causing the discrepancy?
How do I fix it so the mouse click gives the right result?
The active item is not necessarily the same as the selected item. When you press the mouse down it changes the selected value but it does not change the active item. The active item only changes once you release the mouse button.
You should be able to see this by clicking and holding the mouse button over an item that is not currently selected. When you do, you'll see something like this:
In the above image, the active item is the one surrounded by a dotted outline. The selected item is in blue. When your code displays the 'focus', it's displaying the active element rather than the selected element.
If you want the selected item, you need to use curselection to get the index of the selected item. It returns a tuple, so in extended mode you need to get the first element that is returned (eg: lb.curselection()[0]). Be sure to handle the case where curselection returns an empty string.
I am trying to create a List which behaves like, for example, the Finder Menu on my Mac. In other words if I click on a List Item, keep my mouse down and move up and down the List I want the Selected Item to change.
In my Flex application if I click on my List and then, with the mouse still down, move up and down the List the Selected Item remains the same.
Any advice would be gratefully received.
Thanks
In StackOverflow tradition I am posting a solution to my own problem after working at it more:
I had an ItemRenderer on my List. In the ItemRenderer I declared a variable to hold a reference to the owning List.
private var _parentList:List;
In the 'set data' function I set this variable to the owner List.
override public function set data(value:Object):void {
super.data = value;
// Check to see if the data property is null.
if (value == null)
return;
// If the data property is not null.
// Get a reference to the parent list.
_parentList = this.owner as List;
...
I then added an EventListener to listen for MouseDown events.
// Attach an eventListener to the ItemRenderer.
this.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
...
My onMouseOver handler looks like this.
private function onMouseOver(event:MouseEvent):void {
//trace(data.LocationName);
if (event.buttonDown == true) {
_parentList.selectedIndex = itemIndex;
}
}
So with this in place I can mouse-down on my List and keeping the mouse button depressed move up and down the List with the List Item beneath the cursor always being selected. The final piece to this is to ensure that the List responds to the selectedIndex being set by the ItemRenderer. When the user changes the selectedIndex property by interacting with the control, the control dispatches the change and changing events. When you change the value of the selectedIndex property programmatically, it dispatches the valueCommit event. To ensure I responded to my programmatic changing of the selected list item I added a handler to the valueCommit event.
<s:List
id="locationsList"
dataProvider="{presenter.locations}"
itemRenderer="itemrenderers.locationListItemRenderer"
useVirtualLayout="false"
width="1869.698" height="1869.698"
y="65.151" x="65.151"
borderVisible="true"
borderColor="{presenter.backgroundColour}"
contentBackgroundAlpha="0"
contentBackgroundColor="0xff336c"
labelField="label"
change="presenter.onLocationListChange(event)"
valueCommit="presenter.onLocationListValueCommit(event)">
<s:layout>
<s:BasicLayout />
</s:layout>
</s:List>
So far it seems to work fine. Hope it helps.
I am currently writing unit tests for my React + MaterialUi application.
In my application I have a Dialog. I want to make sure depending on what button pressed on the dialog:
<FlatButton
label="Cancel"
secondary={true}
onTouchTap={this._cancelDialog.bind(this)}
/>
<FlatButton
label="Submit"
primary={true}
onTouchTap={this._confirmDialog.bind(this)}
/>
that the internal state changes accordingly.
Unfortunately i cannot get ahold of the dialog content using
TestUtils.scryRenderedComponentsWithType(FlatButton)
or
scryRenderedComponentsWithTag("button")
and so on.
Any ideas on how that flow can be tested?
Update 1
So I can get the Dialog instance by calling TestUtils.scryRenderedComponentsWithType(Dialog). But I can not get the dialogs content. DOM wise the content does not render inside the view itself. Its rendered in a new created node on document level (div). So i tried this:
let cancelButton = window.document.getElementsByTagName("button")[0];
Simulate.click(cancelButton);
cancelButton in the case above is the correct DOM element. Simulate.click however does not trigger the components click function.
regards
Jonas
just ran into the same problem. I looked into the source code, and the Dialog component's render method actually creates an instance of the component RenderToLayer. this component behaves as a portal and breaks react's DOM tree by returning null in its' render function and instead appending directly to the body.
Luckily, the RenderToLayer component accepts the prop render, which essentially allows the component to pass to the portal a function to be called when it is in a render cycle. This means that we can actually manually trigger this event ourselves. It's not perfect, i admit, but after a few days of poking around trying to find a solution for this hack i am throwing in the towel and writing my tests like this:
var component = TestUtils.renderIntoDocument(<UserInteractions.signupDialog show={true}/>)
var dialog = TestUtils.renderIntoDocument(component.refs.dialog.renderLayer())
var node = React.findDOMNode(dialog)
and here is what my UserInteractions.signupDialog looks like:
exports.signupDialog = React.createClass({
...
render: function() {
var self = this;
return (
<div>
<Dialog
ref='dialog'
title="Signup"
modal={false}
actions={[
<Button
label="Cancel"
secondary={true}
onTouchTap={self.__handleClose}
/>,
<Button
label="Submit"
primary={true}
keyboardFocused={true}
onTouchTap={self.__handleClose}
/>
]}
open={self.props.show}
onRequestClose={self.__handleClose}
>
<div className='tester'>ham</div>
<TextField id='tmp-email-input' hintText='email' type='text'/>
</Dialog>
</div>
)
}
})
Now i can make assertions against the child components rendered in the dialog box, and can even make assertions about events bound to my original component, as their relationship is maintained.
I definitely recommend setting up a debugger in your testing stack if you are going to continue using material ui. Theres not a lot of help for things like this. Heres what my debug script looks like:
// package.json
{
...
"scripts": {
"test": "mocha --compilers .:./test/utils/compiler.js test/**/*.spec.js",
"debug": "mocha debug --compilers .:./test/utils/compiler.js test/**/*.spec.js"
}
}
and now you can use npm test to run mocha tests, and npm run debug to enter debugger. Once in the debugger, it will immediately pause and wait for you to enter breakpoints. At this juncture, enter c to continue. Now you can place debugger; statements anywhere in your code to generate a breakpoint which the debugger will respond to. Once it has located your breakpoint, it will pause and allow you to engage your code using local scope. At this point, enter repl to enter your code's local scope and access your local vars.
Perhaps you didnt need a debugger, but maybe someone else will find this helpful. Good luck, happy coding!
Solved it as follows:
/*
* I want to verify that when i click on cancel button my showModal state is set * to false
*/
//shallow render my component having Dialog
const wrapper= shallow(<MyComponent store={store} />).dive();
//Set showModal state to true
wrapper.setState({showModal:true});
//find out cancel button with id 'cancelBtn' object from actions and call onTouchTap to mimic button click
wrapper.find('Dialog').props().actions.find((elem)=>(elem.props.id=='cancelBtn')).props.onTouchTap();
//verify that the showModal state is set to false
expect(wrapper.state('showModal')).toBe(false);
I ran into the same issue and solve it like that :
const myMock = jest.genMockFunction();
const matcherComponent = TestUtils.renderIntoDocument(
<MatcherComponent onClickCancel={myMock} activAction/>
);
const raisedButton = TestUtils.findRenderedComponentWithType(
matcherComponent, RaisedButton);
TestUtils.Simulate.click(ReactDOM.findDOMNode(raisedButton).firstChild);
expect(myMock).toBeCalled();
It works fine for me. However I'm still struggling with Simulate.change
Solution by avocadojesus is excellent. But I have one addition. If you try to apply this solution and get an error:
ERROR: 'Warning: Failed context type: The context muiTheme is marked
as required in DialogInline, but its value is undefined.
You should modify his the code as follows:
var component = TestUtils.renderIntoDocument(
<MuiThemeProvider muiTheme={getMuiTheme()}>
<UserInteractions.signupDialog show={true}/>
</MuiThemeProvider>
);
var dialogComponent = TestUtils.findRenderedComponentWithType(component, UserInteractions.signupDialog);
var dialog = TestUtils.renderIntoDocument(
<MuiThemeProvider muiTheme={getMuiTheme()}>
{dialogComponent.refs.dialog.renderLayer()}
</MuiThemeProvider>
);
var node = React.findDOMNode(dialog);
Material UI fork the 2 enzyme methods. You need to use the createMount or the createShallow with dive option https://material-ui.com/guides/testing/#createmount-options-mount
I have global context document currentDoc and repeat control with responses of currentDoc.
In repeat control i have 2 fields:
1) ComboBox
2) Editbox, with computed Visible by ComboBox:
var temp = respDoc.getItemValueString( "Combobox1");
return temp == "a";
Onchange event ComboBox i update repeat control.
And i have button "Add response" (create/save response and update repeat control)
Its work. But.. if i create response and save this, field with computed Visible reset to "" and not saved. If i re-enter text to Editbox and re-saved, then Ok. Only works after re-saving. Have not errors.
May be you know, what problem?
Source code
<xp:this.data>
<xp:dominoDocument var="curDoc" formName="test"></xp:dominoDocument>
</xp:this.data>
<xp:repeat id="repeat1" rows="30" var="respDoc"
repeatControls="false"
indexVar="respDocIndex" value="#{javascript:return curDoc.getDocument().getResponses();}">
<xp:panel id="panel1">
<xp:table>
<xp:tr>
<xp:td style="width:150.0px">
<xp:comboBox id="comboBox1" style="width:95%"
value="#{respDoc.combobox}" required="false">
<xp:selectItem
itemLabel="Email" itemValue="a">
</xp:selectItem>
<xp:selectItem itemLabel="UserName"
itemValue="b">
</xp:selectItem>
<xp:eventHandler event="onchange"
submit="true" refreshMode="partial" refreshId="repeat1">
</xp:eventHandler>
</xp:comboBox>
</xp:td>
<xp:td>
<xp:inputText id="inputText2"
value="#{respDoc.editbox}" maxlength="20">
<xp:this.rendered><![CDATA[#{javascript://return true <---- if uncomment it, then all work
var temp = respDoc.getItemValueString( "combobox");
return temp == "b";}]]></xp:this.rendered>
</xp:inputText></xp:td>
<xp:td>
<xp:button value="Save" id="button4">
<xp:eventHandler event="onclick"
submit="true" refreshMode="partial" refreshId="repeat1">
<xp:this.action><![CDATA[#{javascript:respDoc.save();}]]></xp:this.action>
</xp:eventHandler></xp:button>
</xp:td>
</xp:tr>
</xp:table>
</xp:panel>
</xp:repeat>
<xp:button value="Add Response" id="button2">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="repeat1">
<xp:this.action><![CDATA[#{javascript:if(curDoc.isNewNote())
curDoc.save();
var doc:NotesDocument = database.createDocument();
doc.replaceItemValue("Form", "test");
doc.makeResponse(curDoc.getDocument());
doc.save();}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
Your approach has a number of issue:
A server roundtrip is initiated on the change of a checkbox, which is an unexpected behavior for a form
A document that has not been saved can't have responses, so you shouldn't show the repeat
When you create a new document you don't assign the "combobox" item any value,so your test temp =="b" fails.
When no rendered, no value is send back to the server, that might not be what you want
I would use style="display : none" to hide the field on the client side and have the event only run on the client. also add a value to your combobox when creating a new document:
var doc:NotesDocument = database.createDocument();
doc.replaceItemValue("Form", "test");
doc.makeResponse(curDoc.getDocument());
doc.replaceItemValue("Combobox1","a");
doc.save();
doc.recyle();
Hope that helps
I'm working on a project that uses a master page and content pages. My masterpage a navigation bar:
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/ProjectPage.aspx" Text="Home" />
<asp:MenuItem NavigateUrl="~/ProductBacklog.aspx" Text="Product Backlog"/>
<asp:MenuItem NavigateUrl="~/SprintBacklog.aspx" Text="Sprint Backlog" />
<asp:MenuItem NavigateUrl="~/MeetingPage.aspx" Text="Meetings" />
<asp:MenuItem NavigateUrl="~/Burndown.aspx" Text="Burndown"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About Us"/>
</Items>
</asp:Menu>
On one of my content pages, I dynamically add sub-menu menuitems to my 'Sprint Backlog' menuitem. There is a button, and everytime the user clicks that button, a sub-menuitem is added, so that when the user hovers over 'Sprint Backlog' in the navigation menu, the submenu comes up. I do this by creating a list of menuitems, creating a new menuitem with (shown text, value, navigationURL), adding the menuitem to the list of menuitems, then saving the list to Session:
protected void btSave_Click(object sender, EventArgs e)
{
menuItemList = (List<MenuItem>)Session["menuItemList"];
if (menuItemList == null)
{
menuItemList = new List<MenuItem>();
}
MenuItem menuItem = new MenuItem("Sprint " + sprintNumber, sprintNumber.ToString(), "SprintBacklog.aspx");
menuItemList.Add(menuItem);
Session["menuItemList"] = menuItemList;
}
In the code-behind for my masterpage, I create a list of menuitems, set the value of the instance of the menuitem from Session, and add childitems to the navigationmenu at the appropriate index. The childitem I am adding are the menuitems from the list of menuitems.
List<MenuItem> menuItemList;
protected void Page_Load(object sender, EventArgs e)
{
menuItemList = (List<MenuItem>)Session["menuItemList"];
if (menuItemList != null)
{
foreach (MenuItem menuitem in menuItemList)
{
NavigationMenu.Items[2].ChildItems.Add(menuitem);
}
}
}
I know that I gave these childitems a value when I created them, but my problem is accessing those values when I am loading the SprintBacklog.aspx content page. Whenever a user clicks on one of the childitems, it will always navigate to SprintBacklog.aspx, but the contents of that page should differ according to which child item they clicked. I need a way to know which childitem they clicked, and access that value to populate my content page.
If someone has a better way for me to carry this whole thing out, I am open for suggestions and change. Otherwise, if my setup can work, and there is a way for me to extract the value of the clicked childitem, I'd really like to know that.
I know if I hard-code the childitems in my masterpage, I can easily get the value, but my problem is that I'm creating the submenu childitems dynamically, and I'm not sure how to access it.
Any help would be really appreciated! Thanks!
-Jose
It's been a long time since I asked this question, and I'm not familiar with how masterpages work anymore, but if anyone is experiencing anything similar, I may have a suggestion.
Each menu item I was creating was linking to SprintBacklog.aspx like so:
MenuItem menuItem = new MenuItem("Sprint " + sprintNumber, sprintNumber.ToString(), "SprintBacklog.aspx");
What I should have done was link to SprintBacklog.aspx, but also add a parameter to the request with the sprint ID.
Then the controller which handles the rendering of SprintBacklog.aspx would read the parameter and fetch the appropriate data to render.