I have date picker in form I need to disable for some user role lets say make invisible for readonly and visible for other.
var date = $("#dateofhistory");
date.kendoTestBox({
mask: "00/00/0000",
format: "MM/dd/yyyy"
});
You can use the enable property to enable/disable the DatePicker.
To Enable:
<script>
$("#datepicker").data("kendoDatePicker").enable();
</script>
To Disable:
<script>
$("#datepicker").data("kendoDatePicker").enable(false);
</script>
Be sure to look at Telerik's documentation here for more information. Telerik has demo's for all of their controls and they are definitely worth looking at.
Related
Looking at this Kendo Calendar dojo example (docs) we can select multiple dates by using the below configuration.
$(document).ready(function() {
// create Calendar from div HTML element
$("#calendar").kendoCalendar({
selectable: "multiple",
weekNumber: true,
disableDates: ["we", "sa"]
});
});
I want to use the same functions with the Angular Component described here, but I can't find the configuration for this in de docs. Am I overlooking something or is this not possible? If it is not possible, my question is why not?
PS: I am using this Angular Component in an ionic 2 app.
We are using a Kendo NumericTextBox widget to display a calculated value to the user. We want the value shown to change as the viewmodel changes, but we do not want the user to be able to edit the value.
We have tried:
- disabling the widget. This disables user interaction, as required, but it does not allow the value to be updated by the view model.
- setting the widget as readonly. This allows the value to be updated, and does not allow the user to change the value directly, but the look of the widget changes when the user clicks on it.
We are trying to find a way to have something in between these two, where the value can be changed programmatically, but not by the user. And where there is no visible effect when the user clicks on the widget.
Is this possible with a Kendo NumericTextBox?
Edit: The issue is that changes to the viewmodel are sent back to the server by serializing the form, and disabled inputs don't get included in the form serialization. This is not an issue with the widget itself, as pointed out by CodingWithSpike.
The widget seems to update fine when set on the viewmodel, and the widget is disabled.
See this example.
<input data-role="numerictextbox"
data-format="c"
data-min="0"
data-max="100"
data-bind="enabled: isEnabled,
value: selectedNumber">
<button type="button" data-bind="click: up">Incrament</button>
...
<script>
var viewModel = kendo.observable({
selectedNumber: 0,
isEnabled: false,
up: function () { viewModel.set("selectedNumber", viewModel.selectedNumber + 1); }
});
kendo.bind($("#example"), viewModel);
</script>
Disable the widget when rendering the page to the user - this will still show updated values when they are re-calculated from other input. Then re-enable the widgets just before serializing the form back to the server.
I have a form which is using DateTimePicker on one of the inputs. I would like the user to be able to select the date/time by using the buttons which KendoUI attaches to the right of the input field, however I don't want the user to free-type into the text field (to save me having to verify formatting or rubbish input).
It is possible to add readonly attribute to the input, either in HTML or by calling .readonly() method on the DateTimePicker object. This makes the text field un-editable, however it also prevents the click events on the date/time selectors from firing.
So, how do I prevent the user from being able to edit the textbox field manually?
Thanks in advance.
Yes, you can set the readonly attribute only of the input from which the datepicker was created:
<input id="datepicker">
<script>
$("#datepicker").kendoDatePicker().attr("readonly", true);
</script>
Here is a live demo: http://jsbin.com/uwayit/1/edit
I have one page where i have bind data by using JqGrid, but My requirement is In editing one row of a grid, the editable fields must NOT BE builtin fields( builtin textboxs) i want to bind that to other textboxes, check boxes which are outside grid. The data which i want to edit must be supplied to other input controls other than jqgrid builtin input controls, Finally IS THIS POSSIBLE???
Hope iam clear with my question.
Please do help me in reply saying either YES or NO or How, and why.
edited
I am not sure that I understand correctly what you mean, but it seems that you should just use form editing mode. To activate it on the client side you should just add editable: true property to all columns which are editable or use the option cmTemplate: {editable: true} which makes default value of editable for all columns as true. After it you can for example use navGrid to add Add, Edit and Delete buttons in the pager. The functionality on the client side will be ready after that. Now you have to implement editing part in the server code only. If you use commercial version of jqGrid like jqSuite you should address to the documentation or demos for more details.
try this
http://www.trirand.net/examples/grid/selection/selectedrow_client/default.aspx
or
Try this
<ClientSideEvents BeforeEditDialogShown="beforeEdit"/>
<script type="text/javascript">
function beforeEdit(rowID) {
var grid = jQuery("#<%= JQGrid1.ClientID %>");
lastSelectedRow = grid.getGridParam("selrow");
};
</script>
I know MVC doesn't have autoposback functionality and that needs to be done using JS/JQuery, and that is when my problems start... don't know how to do it yet.
This is how I populate my ddl:
#Html.DropDownListFor(x => x.CurrentCountry,
new SelectList(Model.Countries.ToList(), "Code", "Name"))
and my URL have this format:
localhost/Products/?country=US¤cy=USD&category=17&page=2
How do I add postback functionality to take the selected country?
Thanks.
I know MVC doesn't have autoposback functionality and that needs to be done using JS/JQuery
Not necessary. You could put the dropdown in an HTML <form> and when the user submits this form the selected value will be sent to the server.
If on the other hand you want to transmit the selected value when the user changes selection then you need to use javascript and subscribe to the onchange event. For example if you use jQuery:
$(function() {
// subscribe to the change event of the dropdown
$('#CurrentCountry').change(function() {
// find the containing form and submit it
$(this).closest('form').submit();
});
});