I have the following TextEdit, bound to a nullable field (Value1):
<dxe:TextEdit EditValue="{Binding Path=Data.Value1, TargetNullValue={x:Null}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" EditValueType="{x:Type sys:Double}" Mask="##.# miles" />
When I hit BackSpace, it shows the remainig mask part (like this: . miles), and its EditValue is set to 0 in the background (which is wrong as it is bound to a nullable field)
I intend to make the EditValue to be null when BackSpace or Delete is used.
How can I do it without a converter or a KeyPress event handler?
This is in fact possible, all you need to do is to set AllowNullInput to true. You may want also to change your mask so that it does not show only the text . miles when you delete every value.
Here is my sample:
<Grid Background="DimGray">
<dxe:TextEdit EditValue="{Binding Path=Value, TargetNullValue={x:Null},
Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"
MaskType="Numeric"
EditValueType="{x:Type sys:Double}"
AllowNullInput="True"
Mask="#0.0 miles"
VerticalAlignment="Center"/>
</Grid>
Hope this helps!
Related
I'm having a problem with showing Dialogs from a View Model. The problem is that the "underlying content is not dimmed and disabled" as the documentation says it should be. If I click on the underlying view the button in the dialog wired to the closed command is sometimes disabled and the user is not able to click it.
I defined the DialogHost in my MainView like this (also tried it in the ShellView):
<materialDesign:DialogHost
HorizontalAlignment="Center"
VerticalAlignment="Center"
CloseOnClickAway="True" />
From my MainViewModel I show the dialog like this:
Dim errView As New ErrorView
Dim res = Await DialogHost.Show(errView)
I wired up the close command on a button in the ErrorView dialog like this:
Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}"
You problem is with the definition of DialogHost; you have it as an empty element.
The DialogHost is a ContentControl. Everything inside is what will become dimmed. So you define it at the root of your main Window/Page XAML, a bit more like:
<materialDesign:DialogHost CloseOnClickAway="True">
<StackPanel>
<TextBlock>Hello World</TextBlock>
<TextBlock>This is the main content of my application</TextBlock>
</StackPanel>
</materialDesign:DialogHost>
I want to create a button that can show a window to show details of elements in listbox when it's clicked. the listbox itsetf was created from a list of JSONObject like this:
<listbox id="userListbox">
<listhead>
<listheader laber="Action"></listheader>
<listheader label="Id"></listheader>
<listheader label="Name"></listheader>
<listheader label="Address"></listheader>
<listheader label="Phone"></listheader>
</listhead>
<listitem forEach="${userController.list}">
<listcell>
<button label="Detail" id="detailButton"></button>
</listcell>
<listcell label="${each.id}" ></listcell>
<listcell label="${each.name}" ></listcell>
<listcell label="${each.address}" ></listcell>
<listcell label="${each.phone}" ></listcell>
</listitem>
</listbox>
for every row (listcell) there is always a button to show the details. but when I load the page, it failed to show the list with error message:
Not unique in ID space < Window cP8Q0#userWindow>: detailButton.
any idea to show a window when the button clicked? here is the code when button is clicked:
#Listen("onClick = #detailButton")
public void showModal(Event event) {
Component comp = Executions.createComponents("/widgets/window/modal_dialog/employee_dialog.zul", null, null);
if(comp instanceof Window) {
((Window)comp).doModal();
}
}
thank you for your help.
The problem is that if you click on different buttons you are running the createComponents again and again. Your employee_dialog.zul is only safe to include into the page once as it has IDs in it; if you do the operation twice you are creating a second set of components with the same ID and the IDs should be unique within a given idSpace (see the ZK developer guide for the theory).
There are other issues here: why create the components twice? Why not keep one and only one set around, showing and hiding them based on button clicks. That is more efficient.
Look at Button to Show a Window from Listbox Row which shows that you can:
<zk>
<!-- hidden -->
<window id="wnd" title="My Modal" visible="false" width="300px">
<button label="close" onClick="wnd.visible = false"/>
</window>
<!-- click button to pop the hidden window! -->
<button label="do it" onClick="wnd.doModal()"/>
</zk>
So you can use a
<include src="/widgets/window/modal_dialog/employee_dialog.zul">
to pull the model dialog into the bottom of the main page once and only once. Then in the code you can set the data into it and do
win1.doModal();
where win1 is the modal window defined in the fragment. You have to tell the model window what to display before you pop it but that is not hard. Use desktopScope.put( "myName", this) to have the controller/view-model of the dialog box register itself in a location where the controller/view-model in the main window can find it and talk to it to pass it the data to render.
Two other tips.
Hide your fragments as /WEB-INF/zul/employee_dialog.zul as anything under WEB-INF cannot be directly accessed by a browser for better security.
Try not to put any zul into your java. That is mixing behaviour with presentation. Sometimes it is unavoidable but always try first to keep the zul in the zul then interact with it via java IDs only (much like my suggestion). It is not always possible but separation of logic from layout is a core design pattern.
Simon
<button label="Detail" />
#Listen("onClick = listbox listitem listcell button")
I have created a lookless control using silverlight 4. This control contains a textbox which the user will type data into and a button that increases the size of the textbox by increasing the MinHeight of the control by 10 each time it is pressed (I have set the textbox to stretch so it grows with the control).
This bit works fine but I now want to extend the controls functionality by adding another textbox that will display the current MinHeight of the control which I dont seem to be able to do. I have been trying
Text="{Binding RelativeSource={RelativeSource Self}, Path=MinHeight, Mode=TwoWay}">
Im not sure why but this always shows as 0
Update
In my attempts to resolve I tried chaging the name of the source textbox to PART_sourceData and just to see if the binding was correct I set the path to the text property. This appears to bring through the text of the sourcedata as I would expect
Text="{Binding Mode=TwoWay, ElementName=PART_sourceData, Path=Text}"
My next step was to change the path to Height
Text="{Binding Mode=TwoWay, ElementName=PART_sourceData, Path=Height}"
But this returns NaN. Therefore I tried MinHeight
Text="{Binding Mode=TwoWay, ElementName=PART_sourceData, Path=MinHeight}"
This always returns 0 even though the code behind has a valid number. Whats going wrong? Becuase the text comes through properly I beleive the binding to be correct but whats wrong with getting the height?
By binding to RelativeSource Self you are looking at that controls MinHeight. You will need to name your original TextBox with the x:Name attribute, then use ElementName binding.
Ok I have a solution. Not the best but it works!
I have had to create a new dependancy property
public static readonly DependencyProperty EditorHeightProperty =
DependencyProperty.Register("EditorHeight", typeof(string), typeof(EditorControl), new PropertyMetadata(default(string)));
public string EditorHeight
{
get { return (string)GetValue(EditorHeightProperty); }
set { SetValue(EditorHeightProperty, value); }
}
Then I bind the text to this property using
Text="{TemplateBinding EditorHeight}"
I have a simple TextArea
<s:TextArea id="taData" keyUp="keyListener(event)" focusEnabled="false" fontFamily="Courier New" fontSize="12" left="10" right="10" top="40" bottom="10"/>
the keyListener allows tab to be used like this
private function keyListener(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.TAB)
{
event.currentTarget..insertText("\t");
}
}
Everything works as expected, but the undo buffer is reset / stops at the point that a tab was inserted.
Is there a way to ensure that the undo buffer remains in tact even with the tab inserted
If all you want to do is insert a tab into your text when the user presses the tab key, there's a better way to do it (and I hope it will solve your undo issue at the same time).
You'll have to access the TextArea's model - the TextFlow object - and tinker with its configuration. The textflow Configuration class has a property called 'manageTabKey' which defaults to 'false'. If you set it to 'true' it will do what I think you're trying to do for you, i.e. when the user hits the tab key, insert a tab character instead of putting the focus on the next focusable element.
var textFlow:TextFlow = taData.textFlow;
var config:Configuration = Configuration(textFlow.configuration);
config.manageTabKey = true;
The cast to Configuration is necessary, because textFlow.configuration returns an IConfiguration interface that has no setter method for manageTabKey.
Additionally, you could even set the width of your tabs by using the 'tabStops' property.
textFlow.tabStops = "25 50 75 100";
EDIT:
I just noticed that you set 'focusEnabled' to false. This will also no longer be necessary.
How can I validate if atleast one item has been selected from a list, such that the selectedIndices is set to NULL at the init() of application?
Following code can be of help to someone who want to validate a list like I wanted:
<mx:NumberValidator
id ="myListValidator"
trigger ="{myButton}"
triggerEvent ="click"
minValue ="0"
lowerThanMinError="Should I write an application to you for selecting atleast one of the option X-("
source ="{myList}"
property ="selectedIndex"
/>