Using the next code:
<dxe:SpinEdit Name="Spin1" IsEnabled="{Binding Data.IsEnabled}" Mask="###.######" MaskType="Numeric"/>
I would like to select the mask format in base of a random value. Kind of(pseudocode):
if (value1 == 1)
{
Mask="###.######"
}
else
{
Mask="###.##"
}
I am working in this idea (It is defined in the own grid):
<dxg:FormatCondition Expression="[value1] = '1'" FieldName="Spin1">
<dxg:Format />
</dxg:FormatCondition>
But how I define the mask in a FormatCondition for an specific case? I Can´t figure out...
Well, I got it by my own...
Just sharing for if someone need it...
My idea finally was to send a param from ViewModel which define mask in spin edit.
<dxg:GridColumn FieldName="value1" AllowEditing="True" Width="80">
<dxg:GridColumn.CellTemplate>
<DataTemplate>
<Border Background="#FFFF99">
<dxe:SpinEdit Name="SpinEditValue1" Mask="{Binding Data.Value1Mask}" MaskType="Numeric" MaskUseAsDisplayFormat="True"/>
</Border>
</DataTemplate>
</dxg:GridColumn.CellTemplate>
public string Value1Mask
{
get
{
if (Designation == 1)
{
return "###.##%";
}
else
{
return "###.######";
}
}
}
Related
I have a string but i don't seem to be able to change its content.
I want to check if the string contains "relay1" and if it does it should change its content to "15".
if (inputMessage1 == "relay1") {
inputMessage1.replace("relay1", "15");
}
I have also tried with 'inputMessage.compareto()' but nothing.
So this is suppose to be really simple but i am going around and around.
You can check if both equals like:
if (inputMessage1.equals("relay1")) {
inputMessage1.replace("relay1", "15");
}
if do you want to check if contains text or not then you can use like:
if (inputMessage1.indexOf("relay1") > 0) {
inputMessage1.replace("relay1", "15");
}
I'm trying to do something like this
#foo: lorem;
#bar: ipsum;
.#{foo}-#{bar} {
// css-here
}
Expecting result:
.lorem-ipsum {
/** css-here
}
I only found out the Interpolation with one Variable,
.lorem-#{bar} { }
I think I just found the answer, but don't know if it's the best or the only way to do it.
I tried appending & like this
.#{foo}&-#{bar} { ... }
and it worked.
I need to modify this CSS masking method so that when the user types in this input field, they can only enter values between -9999999 to 9999999.
The input field cannot be type=number, it has to be type=text. This would be the easiest way to go about this, however, this is a business requirement, that all input fields must look the same.
Here is the current masking method that needs to be modified:
maskInputAmount(e) {
const t = e.target.value.replace(/\[a-z]/g, '').match(/(-?)(\d{0,8})/);
e.target.value = t[2] ? (t[1] + t[2]) : t[2];
}
How can I modify this so that any value -9999999 to 9999999 is valid?
First if you can't use number inputs because of the styling then use
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
To disable the arrows in a number input it will then look the same as text inputs.
Here is a demo : https://jsfiddle.net/ybj8v36z/
EDIT:
If you want more restrictions on your input use a regex in JS to validate your value before adding it to the actual input element:
let myInput = document.getElementById("my-input");
let myInputValue = myInput.value;
let regex = new RegExp(/(^\-?[0-9]{0,11}$)/);
myInput.addEventListener("input", (e)=>{
e.preventDefault();
if (regex.test(myInput.value))
{
console.log("Change value " + myInputValue + " to " + myInput.value);
myInputValue = myInput.value;
}
else
{
myInput.value = myInputValue;
}
});
Here is a working demo : https://jsfiddle.net/75n1fkxa/1/
Hope it helps.
You can match the numbers between -9999999 to 9999999 with the following regex:
regex: `^\-?[0-9]\d{0,6}$`
https://regexr.com/4ln7v
Same pattern for an input:
<input type="text" pattern="^-?[0-9]\d{0,6}$">
Thanks everyone for the help. Though there wasnt a specific answer to solve my exact problem, some of your responses led me to the correct path.
Here is what I've done to modify my original method
In my TS file:
conditionalLength;
maskInputAmount(e) {
const myInput = document.getElementById('my-input') as HTMLInputElement;
let myInputValue = myInput.value;
const regex = new RegExp(/(^\-?[0-9]{0,11}$)/);
const positiveOrNot = myInputValue.split('');
if (positiveOrNot[0] === '-') {
this.conditionalLength = true;
}
if (positiveOrNot[0] !== '-') {
this.conditionalLength = false;
}
e.preventDefault();
if (regex.test(myInput.value)) {
console.log('Change value ' + myInputValue + ' to ' + myInput.value);
myInputValue = myInput.value;
} else {
myInput.value = myInputValue;
}
}
In my HTML:
<input
type="text"
(input)="maskInputAmount($event)"
[attr.maxlength]="conditionalLength === true ? 8 : 7"
id="my-input"
formControlName="parents2017AdjustedGrossIncome"
class="form-control col-3 col-lg-12"
data-hint="yes"
pattern="^-?[0-9]\d{0,6}$"
>
I'm pretty new to the Vue world and was curious if I'm able to apply 2 computed properties to a :class.
I've tried giving a space to each prop :class="{{prop1}} {{prop2}}"
but on reload the content will all disappear because something seems to be wrong.
Does anybody know if this is possible or if its even a good to do things this way?
Backstory
Im creating an input that will have the :class="{{showWhenButtonClicked}}" and another to give it a green input or a red input classname when the email is not valid.
If there are any details that I'm missing or a better way let me know. Thanks!!
computed: {
validateEmail() {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(this.emailTo).toLowerCase())
},
showEmailInput() {
return this.sendEmail ? 'hide-show-option' : 'hide-option-input'
},
displayEmailError() {
return this.validateEmail() ? "valid-input" : "not-valid-input"
}
},
<input :class="{{showEmailInput}} {{displayEmailError}}" placeholder="Enter Email..." v-model="emailTo" #blur="{{validateEmail}}" type="email">
You'd use array syntax to apply a list of classes:
<input :class="[showEmailInput, displayEmailError]"/>
Nick's answer is the best one so far. But you can also store the class in a computed variable, which I think cleans up the code:
classList({ sendEmail, validateEmail }) {
return [
sendEmail ? 'hide-show-option' : 'hide-option-input',
validateEmail ? "valid-input" : "not-valid-input"
]
}
OR you can return an object instead, but in this case it's not as succinct as the array
classObject({ sendEmail, validateEmail }) {
return {
'hide-show-option': sendEmail,
'hide-option-input': !sendEmail,
'valid-input': validateEmail,
'not-valid-input': !validateEmail
}
}
When you start to integrate more complex logic in classes, the two options above will make even more sense.
try this
:class="prop1 + ' ' + prop2"
I have the following:
input.bg:hover {
...
}
I'm using the above following: <input type="submit" class="bg" value="ttttttt"/>
now how to modify the class, so I can use <input type="submit" class="bg-small" value="cccccccc"/> ?
I need to add .bg-small into this css class, but I don't know how. I've been trying the following:
input.bg:hover .bg-small:hover {
...
}
Did you mean this ?
input.BG:hover, input.BG-SMALL:hover {
.....
}
So when you move your mouse over the normal input or submit input, they has the same effect
input.BG:hover, input.BG-SMALL:hover {
...
}
I'm not sure what you mean, but if you want the same class properties from BG for BG-SMALL, you can set
input.BG:hover, input.BG-SMALL:hover {
}
or just use the same class for the inputs if there's no difference.