A little question but I didn't find an answer, is it possible to pass and default hidden value in textbox ?
Explanation : So I have this piece of code :
#Html.TextBox("date", null, new { #class = "date" ,#Value =DateTime.Today.Date.Month})
In #Value, I'm putting a default value ( the month of the current date ) but I'd like this value not to be seen by the user ! I have tried to add a #Hidden = true but, as I expected, it's hidding the text box not the value.
So is there a way to only hide the value ?
Thanks in advance !
You could try to populate textbox with today's date by writing.
$(.date).daterangepicker({ minDate: new Date() });
It wont require any changes in textbox helper.
so it will not show you date like '01-01-0001' any more.
Hope this works.
I think you can set some attribute like defaultValue in input tag and than when you submit your form check if any value in that input than pass that value otherwise you can pass default value.
#Html.TextBox("date", null, new { #class = "date" ,DefaultValue =DateTime.Today.Date.Month})
javascript:when you submit the value first check this and set your value
if($('#date').val()=="")
{
$('#date').val($('#date').attr('DefaultValue'));
}
Related
I have an issue related to the existing question
Cannot disable matInput element with this
Suggested answer works just fine:
ngOnInit() {
this.form = this.fb.group({
name: new FormControl({ value: '', disabled: this.disabled })
});
But when I change this.disabled value to true - disabled attribute isn't changed. Is there a way to change the disabled attribute for matInput?
You can't use that form, because when you create a FormControl you are passing that value, in your case the value of this.disabled. You are not binding properties, you are only passing a value to make some checks, this value is not reflecting input properties' changes.
You can't achieve your goal by this way, you need to enable and disable your input manually, like this:
let control = this.form.get('name')
control.disabled ? control.enable() : control.disable();
Obviously you can put it into a click event directly into your template, something like this:
<button (click)="this.form.get('name').enable()">Enable</button>
I have this Datetimepicker that has Value(DateTime.now).
If I don't select any date, the date that I get is {01.01.0001 00:00:00}.
Shouldn't I be getting the value that the datetimepicker shows on my page?
Is there a way to fix this? What I am doing wrong?
Tks in advance?
#(Html.Kendo().DateTimePicker()
.Name("scanningDate")
.HtmlAttributes(new { style = "width:200px" })
.Value(DateTime.Now)
.WeekNumber(true)
.Max(DateTime.Today)
)
The value of the DateTimePicker is null because you have configured the Max() to a value smaller than the Value() you are assigning to it.
i.e. you are setting the Value() to Now(2017-06-26 08:08:37) bu the Max is Today(2017-06-26 00:00:00).
So, the set Value exceeds the Max and the thus the current Value is null....despite what the visible portion of the control is telling your eyes.
You need to increase the Max() to at least exceed the initial Value you are trying to set it to.
You are getting default value of DateTime.MinValue which is 01/01/0001 for ScanDate property of ViewModel.
Bind ScanDate Property to DatePicker Control so that you get SelectedValue
of the DateTimePicker into your MVC Controller.
Change code like:
#(Html.Kendo().DatePickerFor(model => model.ScanDate)
.Name("ScanDate")
.HtmlAttributes(new { style = "width:200px" })
.Value(DateTime.Now)
.WeekNumber(true)
.Max(DateTime.Today)
)
I'm able to get this working except for two things that I just can't figure out:
Problem 1: I need to get both of the following but right now can only achieve one OR the other:
Select options need to have value and text
The selectedOption captured in the model needs to return the object of the selected option and not just the value of the option
I can affect which one of these works by including or excluding the following from my select markup:
...data-bind="optionsValue = 'Id'"...
How can I achieve both?
Problem 2: I need to set the selected option in the dropdown to an object I retrieve from a cookie containing the user's preferred value. My below implementation does not succeed in setting the selected value at all. What am I missing?
$(document).ready(function(){
var userOption = $.cookie("userPref") == null ? undefined : JSON.parse($.cookie("userPref"));
var model = function(){
this.options = ko.observableArray();
this.childOptions = ko.observableArray();
this.selectedOption = ko.observable(userOption); //this does nothing to set the value
this.selectedOption(userOption); //this also does nothing
this.options.subscribe(function(){
//this.selectedOption() returns an object if optionsValue is excluded from select databinding and returns option value if included
$.cookie("userPref", JSON.stringify(this.selectedOption());
this.childOptions(undefined);
this.childOptions(this.selectedOption() ? this.selectedOption().children : []);
}.bind(this));
};
var viewModel = new model();
ko.applyBindings(viewModel);
$.ajax({
type: "GET",
url: "myurl",
success: function(data){
viewModel.options(data);
}
});
});
<select data-bind="options: options, optionsText: 'text', optionsValue: 'Id', value: selectedOption, optionsCaption: 'Select Option'"></select>
You can't use the entire object as the value because an option value must be a simple type: string, int, etc. I suppose you could JSON encode the object (so it's a string) and set the value to that, but then you'd have to reciprocate on the backend and decode the posted string value back into an object and somehow work with that. However, said object would be disconnected from EF, so you'd have to fetch the object new from the database anyways in order to do anything meaningful with it. And, your second problem is the same as your first, you can't use a full object.
The way this is usually done is with ids. You make the option value the object's id. Then, you can set the selected option based on the object's id from the cookie. When you get to the backend, if you need to work with the object, you fetch it by the posted id. Anything else is not really a tenable situation.
I have a checkbox and a textbox (both are enabled and the checkbox starts unchecked [false]).
What I need is the following:
When I write something in the textbox and leave it (loses focus) the
checkbox is checked automatically.
When I write something in the
textbox, remove it and leave it the checkbox should remain
unchecked.
When I write something in the textbox and click the
checkbox, the checkbox is checked now and the data in the textbox is
not cleared.
When I write something in the textbox and click the
checkbox twice, first happens step 3 and then the checkbox is
unchecked and the data in the textbox is cleared.
When I click in the checkbox the checkbox is checked, then I write in the textbox
and uncheck the checkbox, then the data in the textbox is cleared.
What I tried so far is the following code:
//The checked property in the checkbox is binded to
that.BuildingCriteria.IncludeLoadingDocks
that.BuildingCriteria.IncludeLoadingDocks.subscribe(function (newValue) {
if (!that.updatingTextBox && !newValue) {
that.BuildingCriteria.LoadingDocksMin(null);
}
});
//The textbox value is binded to that.BuildingCriteria.LoadingDocksMin
that.BuildingCriteria.LoadingDocksMin.subscribe(function (newValue) {
that.updatingTextBox = true;
that.BuildingCriteria.IncludeLoadingDocks(true);
that.updatingTextBox = false;
});
This works if you try all the steps above, for all of them but then, when you try some of them again stops working for some... specially if you write something in the textbox with the checkbox unchecked and then leave the textbox, it doesn't check the checkbox automatically anymore.
I tried using flags as you can see but I couldn't make it to work on ALL the cases ALWAYS.
I've been working on this for days so if you can help me out soon I'd appreciate it a lot!
Thanks in advance!!
It's near impossible to gave a straight up answer to your question, but from it I feel the closest thing may be to note a few KO features that you may yet need to consider.
The value binding supports a valueUpdate = 'afterkeydown' version, which would allow you to keep your textbox and checkbox in synch real time. This may well remove the need for requirement 3.
The computed observable supports specializing read and write operations, which at times may be clearer than using subscriptions.
You may need to introduce a "grace" period for the checkbox, if you must stick with requirement 3. Just don't allow updating the checkbox too shortly after leaving the textbox. The throttle extender and hasfocus binding can help you with that.
There's a great blogpost on when to use which feature.
In any case, your requirements are a bit hard to understand without the business case, and it might even be that you're experiencing an XY-problem. From your implementation requirements I'd assume functional (not implementation) requirements like this:
There's a textbox to hold the actual order/criterium/name/whatever.
There's a checkbox to indicate such an order/etc is wanted.
This checkbox should be in synch (checked) with whether the user typed some text.
This checkbox should be in synch (unchecked) if the user empties the textbox.
If the user checks the checkbox then
If there was text for the order/etc it should be cleared.
If there was no text a default order/etc should be suggested.
Here's a jsfiddle with a demo of how you could approach these functional requirements. For completeness, here's the relevant code, starting with the View:
<input type="checkbox" data-bind="checked: isChecked" />
<input type="textbox" data-bind="value: someText, valueUpdate: 'afterkeydown', selectSuggestion: someText" />
The custom binding for selecting the "default suggestion text":
var suggestion = "<enter something>";
ko.bindingHandlers.selectSuggestion = {
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var currentText = ko.utils.unwrapObservable(valueAccessor());
if (currentText === suggestion) element.select();
}
};
And the ViewModel:
var ViewModel = function() {
var self = this;
var privateIsChecked = ko.observable(false);
var privateText = ko.observable("");
self.isChecked = ko.computed({
read: privateIsChecked,
write: function(value) {
if (!privateIsChecked() && value && privateText() === "") {
privateText(suggestion);
}
if (privateIsChecked() && !value) {
privateText("");
}
privateIsChecked(value);
}
});
self.someText = ko.computed({
read: privateText,
write: function(value) {
privateIsChecked(value !== "");
privateText(value);
}
});
}
I'm aware that this doesn't directly answer your question, but like I said that's pretty hard to do for us on Stack Overflow, without knowledge of your business case.
I want to programmatically set date for the input with datebox control, For this i know i can use something like this
$(element).trigger('datebox', {'method':'set', 'value':'dateString'});
but this doesn't seem to update the control(i.e when i open the calendar, it is set to current date and not equal to the value in the input field)
EDIT:
based on JTsage's pointers i overwrote the default dateformat to mm/dd/yyyy, using sth like this.
jQuery.extend(jQuery.mobile.datebox.prototype.options.lang, {
'en': {
dateFormat: '%m/%d/%Y'
}
});
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
useLang: 'en'
});
Then i tried setting the date using sth like this
$(element).trigger('datebox', {'method':'set', value:'07/02/2012'});
but this date is not appearing when i navigate to the page..Interestingly when i tried updating the date from firebug console(being on that page) it updated the field as well as datebox control.
I have no idea why this is happening..Need help, please respond JT
So finally i fixed the issue, by doing this
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
'overrideDateFormat': '%m-%d-%Y',
'overrideHeaderFormat': '%m-%d-%Y'
});
setting the value of the input field explicitly
$(element).val('06-21-2012');
and then refreshing the datebox
$(element).trigger('datebox', {'method':'set', 'value':'06-21-2012'});
I found th solution, try this
$(element).trigger('datebox', { 'method': 'doset' });