i have the DatePickerFor and i want to make it readonly I want to force user to pick dates ,not being able to type them.
<td>#(Html.Kendo().DatePickerFor(model => model.DateRecherche).Max(DateTime.Today))</td>
Thanks.
Is it in their docs:
//DISABLE inputs
$("#datepicker").attr("readonly", true);
$("#monthpicker").attr("readonly", true);
So you will need a little bit of javascript along with your view code to implement this behavior
Adding the attribute readonly to an input tag will make it read only. You can do this with jQuery like this:
$(function () {
$('.k-datepicker input').attr('readonly', 'true');
});
Related
I would like to be able to add class to the select2-container div when their is no results. Is this possible because there doesn't seem to have any way to catch an even when there is no results.
Thanks!
I would add the class first and then remove it on the change event.
$('.nameOfContainer').on('select2:change', function (evt) {
$(this).removeClass('noResults');
});
I am creating a custom Data Type for Umbraco.
It is a UserControl (.ascx file) derived from IUsercontrolDataEditor.
(It shows a grid that lists all the child nodes)
How do I make this control full-width?
ie. I want to hide the label, just like what you can do with RichTextEditor by unchecking 'Show Label'.
EDIT: Thanks for the answers :) Another way to do this is using AbstractDataEditor, but it is more complicated.
For Umbraco 7.x using an angularJs-controller for your custom datatype just change the property hideLabel of the inherited model on the scope:
$scope.model.hideLabel = true;
The only way I know of is to use some javascript as in this forum post.
This is a bit of a workaround but should be OK for an admin function (where Name is the label you want to suppress):
<script type="text/javascript">
jQuery(document).ready(function () {
$("div.propertyItemheader:contains('Name')").hide();
});
</script>
I'm trying to dynamically add checkbox and label elements to the document. Checkbox element has Knockout's data-bind attribute to bind its value to an observable value in the ViewModel. However when I try to style the checkboxes with jQuery Mobile by executing
$('input[type="checkbox"]').checkboxradio();
data-bind attributes will be removed. If I leave out the above line, data-bind attributes are properly set and the binding works.
Is there a way to have both jQuery Mobile styling and Knockout bindings at the same time?
I'm using jQuery Mobile RC1 and Knockout 1.2.1.
I have also encountered this problem. Unfortunately, all the suggestions here either did not work for me or had other issues. So I have created a simple custom binding that works in all versions of KO (including the latest v3):
ko.bindingHandlers.jqmChecked = {
init: ko.bindingHandlers.checked.init,
update: function (element, valueAccessor) {
//KO v3 and previous versions of KO handle this differently
//KO v3 does not use 'update' for 'checked' binding
if (ko.bindingHandlers.checked.update)
ko.bindingHandlers.checked.update.apply(this, arguments); //for KO < v3, delegate the call
else
ko.utils.unwrapObservable(valueAccessor()); //for KO v3, force a subscription to get further updates
if ($(element).data("mobile-checkboxradio")) //calling 'refresh' only if already enhanced by JQM
$(element).checkboxradio('refresh');
}
};
Should be used like this:
<input type="checkbox" data-bind="jqmChecked: someValue" id="checkbox1"/>
See a complete working example here:
http://jsfiddle.net/srgstm/ub6sq/
See: https://gist.github.com/1006808
Then you can do something like the following:
var $checkbox = $('input[type="checkbox"]');
$checkbox.checkboxradio();
$checkbox.dataBind({
your options..
});
Hope this'll help!
There is a problem with using knockouts default checked binding with styled objects like jQuery mobile does. It has the same issues that jQueryUi's Button/Buttonset functions. There is a label over the checkbox that indicates what is happening and it doesn't get updated properly via standard knockout checked binding.
It is discussed at http://therunningprogrammer.blogspot.com/2011/10/how-to-use-jquery-uis-button-with.html.
To use knockout directly with these styled objects from jQuery Mobile, the demonstrated code will have to be modified to handle the different DOM context. I'll post an update to the code when I can get some free time to do it.
EDIT
In Google Groups - Knockout, luv2hike posted a solution. You can see it working at http://jsfiddle.net/luv2hike/nrJBC/. Looks like a working fix for your problem.
I created a simple binding that works with jQuery Mobile 1.2.0 and Knockout 2.2.1 and works with default jQuery mobile checkboxes. This binding has no dependency on custom icons or JQuery Mobile's CSS styles. It also allows the use of regular checkbox markup in your HTML (<input type="checkbox" ... />) as opposed to using an alternate markup element like a div.
Here's the fiddle: http://jsfiddle.net/thedude458/52baX/
Note: Presently, the example only supports a single checkbox, not a list, as that is all I currently have a need for. It also assumes that the bound property is an observable.
Here is my heavily commented code on a custom handler I built for jQueryMobile checkboxes:
ko.bindingHandlers.checkbox = {
init: function(element, valueAccessor) {
// set the dom element to a checkbox and initialize it (for jquerymobile)
var checkbox = $(element);
checkbox.checkboxradio();
checkbox.attr('type', 'checkbox');
// register change event to update the model on changes to the dom
ko.utils.registerEventHandler(element, "change", function() {
valueAccessor()(
// off because it is before the ui has refreshed
$(this).siblings('label.ui-checkbox-off').length > 0
);
});
},
update: function(element, valueAccessor) {
// update the checked binding, i.e., check or uncheck the checkbox
ko.bindingHandlers.checked.update(element, valueAccessor)
// and refresh the element (for jquerymobile)
var checkbox = $(element);
checkbox.checkboxradio('refresh')
}
};
I have a view that is displaying a Drop down list using the HTML helper DropDownListFor
<%: Html.DropDownListFor(Function(model) model.Manufacturer, New SelectList(Model.ManufacturerList, Model.Manufacturer))%>
My controller is passing the View a ViewModel containing the Manufacturer and the ManufacturerList
Function Search(ByVal itemSrch As ItemSearchViewModel) As ActionResult
'some code mapping and model code'
Return View(itemSrch)
End Function
My ViewModel is nothing crazy just fills the ManufacturerList with a list of string values and then the Manufacturer property is just a string value containing the selected value from the drop down list.
Public Property Manufacturer As String
Public Property ManufacturerList() As List(Of String)
I'm having an issue with the view setting the selected value on the drop down list if we are reloading the Search View. I've checked the View Model (ItemSearchViewModel) when it comes into the Search function and the Manufacturer is populated with the proper selected value and successfully passes that value back to the Search View. At some point the data passed to the view doesn't seem to populate the selected value, was wondering if anyone had some ideas on why this is happening and what I can do to fix it.
Thanks
Didn't get much for answers on this so started digging into how I could fix this somewhat easily. Also in my research this seemed to be a common problem for many people with the DropDownListFor HTML Helper. I figured there had to be a way to get this working since I knew the selected value property from my ViewModel was actually getting passed to the View. So javascript and jQuery to the rescue, I ended up trying to set the selected value using the jQuery .ready function and was able to successfully get this to work. So here's my jQuery fix:
$(document).ready(function() {
$("#Manufacturer").val("<%: Model.Manufacturer %>");
});
For sake of making this easy to follow I used the full .ready syntax, or you can just use $(function () { 'code' });
If you want to solve this without using jQuery you can just use basic javascript syntax as well, it'll look something like this:
document.getElementByID("Manufacturer").Items.FindByValue("<%: Model.Manufacturer %>").Selected = true;
If you using the plain javascript call make sure to call this when the page is done loading data to the dropdownlist.
In either case all this code is doing is setting the selected value on the drop down list on the client side from the passed in Manufacturer value from the Model.
If you have any other ways to solve this problem please let me know, but this is working for me and hopefully it'll help someone else with their problem.
Thank,
I've done a similar quick-fix in JQuery today to fix this behaviour too :
$(document).ready(function() {
$(".wrapper<%: Model.Language %> option[value=<%: Model.Language %>]").attr("selected","true");
});
Though I could share it with others if needed.
I'd still like to see a real patch to this problem so many persons seems to have in a different way, maybe with an extension method of the already existing DropDownListFor Html.helper method.
I am using a "user control" which contains a button and other controls. I am using it in an aspx page. I want to diable the button using Javascript. By any chance, is it possible to achieve this?
Thanks
Lijo
I don't really get what you mean by 'disable', but to take it away you get the element in Javascript in an object and use:
element.style.display = "none";
That completely takes it away, to just make it invisible use:
element.style.visiblity = "hidden";
To get the element in an object, the easy way is once you know the value of the id attribute, say it's id="bla", you use
element = document.getElementById("bla");
You can also just use:
document.getElementById("bla").style.display = "none"; // etc
Of course, CSS is far simpler, use:
#bla {display:none;} /* etc, can also be with visiblity */
But I'm not really sure what you mean with 'disable', also, disabling with JavaScript is NOT a form of good security, JavaScript can be turned off, also, the source can be inspected to just work around it.
Edit: Some clarification: display:none; just treats it as if it isn't there at all. visiblity:hidden; makes it completely transparent, but other elements around it are still placed as if it were there.
Don't remove or hide the element as the other answers suggest. Form elements in HTML have a disabled attribute for a reason. With Javascript you would select the button element (however you are selecting elements) and set the disabled property like this:
buttonElement.disabled = true;
To reenable the button:
buttonElement.disabled = false;
Obligatory jQuery:
$(buttonSelector).attr('disabled', true); // Disable
$(buttonSelector).attr('disabled', false); // Enable
If you mean to set the attribute "disabled" it is possible
$(element).attr("disabled", "disabled"); // jQuery
element.setAttribute("disabled", "disabled"); // js
If you really need to remove literally you can use jQuery Remove
$(element).remove();
or do it by hand
var el = document.getElementById(id);
el.parentNode.removeChild(el);
if just hide is enough, I recommend doing this with CSS