Manual input date in Kendo Grid DatePicker not working - kendo-ui

I'm facing a problem that I can't understand. I'm using Kendo Grid with InCell edit and I have a DateTime field in my Model.
When the grid enters in edit mode, the calendar is shown, but the grid only saves the inputed value if I select the value from the calendar. If I input the field manually, the value is not saved and the cell is not marked has dirty.
If it helps, I'm using MVC with Razor sintax.
Tks in advance!

I've found a workaround in Kendo's forums:
By design, the DatePicker does not raise the change event when the value is set programmatically - it raises only if the date is modified by the end-user. In case you need to trigger the change event, you can use jQuery trigger().
For example:
var datePicker = $("#datepicker").data("kendoDatePicker");
datePicker.value("01/01/2001");
datePicker.trigger("change");
Reference:
http://www.kendoui.com/forums/ui/date-time-pickers/datepicker-change-event.aspx
So basically what I did was to force the change event manually.

Related

Kendo MVC with Inline Editing Default Datetime of DateTime.Now showing page refresh time

I have a Kendo MVC Grid that uses Inline editing. When I click "Add New Record" it is supposed to default the entry to DateTime.Now. The issue is that this value doesn't update, it continues to show the time the page was loaded instead of the time when the row is added.
I have tried to set it in the editor template and the model and I am getting the same result. My guess is I would have to set the javascript but cant find how to do this with inline fields and select the right DateTimePicker to update the value on. How can I have this default value be set when the add new record button is clicked.
When you set the DefaultValue in the DataSource Model definition the DateTime.Now value will get serialized as part of the initialization script.
If you need this to by dynamic you can add an Edit event handler and check if the model instance edited is a newly created one. If so set the date field to the current date and time:
function onEdit(e){
if(e.model.isNew()){
e.model.set("MyDateField",new Date());
}
}
Here is an example.

Kendo UI for MVC combobox autoclearing user entered text

I am working on a page that has a Telerik UI for MVC ComboBox. Currently the ComboBox does not keep user input once the datasource has returned any value from the database. Even if you reload the page, the ComboBox will remember the value from the Datasource and delete any user input once the focus is changed to another input field.
I need the ComboBox to keep user input if they do not select a value from the Datasource populated drop-down. Any help would be appreciated.
So I found the answer on the Kendo UI API reference. If you set the .SyncValueAndText(boolean) to false it will allow custom text to stay in the ComboBox. By default this value is set to true which binds the text and value together.
Here is a link to the API Documentation:
https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox/configuration/syncvalueandtext

Windows Phone Date Picker Submit event

I have a native Date Picker in a windows phone app.
Using the DateChanged event I can perform actions when the user submits.
DatePicker.DateChanged += (o, args) =>
{
var date = args.NewDate;
// Do something with it
}
The problem I am facing is the event is not triggered if the user submits the date picker without changing the date.
Default value is set to today's date which makes it impossible to select this date.
Does anyone know how I can allow the user the select this date and perform actions after ?
Thanks for your help :)
There is no particular way of getting an event fired when the date is not changed. As you said the date picker by default selects the current date, you can perform the action you want to if the user selects today's date in the OnNavigatedTo, Loaded, or DatePicker_Loaded event. A better way to do so is providing the DatePicker an invalid date something like 1Jan1947, this ways the user has to change the date else it'll be invalid. Also if you write the code you want on dateChanged event, it'll fire automatically as when the DatePicker is Loaded it sets the date from default to the current date.
What I would recommend
is to use a binding property to hold a value and then performing the
operations onPropertyChanged event of that property. This ways your
logic is independent of your datePicker and you could write events
for each time the dateTime property changes.
Do remember to bind the datePicker's date property to the DateTime
property in a TwoWay Mode and an UpdateSourceTrigger of
PropertyChanged. This ways when you change the property from code
behind the data would reflect in the datePicker and when you change
the value in the datePicker, the data would be reflected in the code
behind as well

KendoUI DateTimePicker (or similar) - make textbox un-editable but allow changing of date/time via provided buttons

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

Setting Telerik MVC grid column properties during an Edit

I have an MVC 3 Razor Telerik grid. I have an Edit comand on the row.
When a user clicks on Edit (this places the grid in Edit mode with an Update and Cancel button), I want to set a property for two of the columns to readonly.
When the user clicks on Cancel or Update, I want to set the columns back to full permission.
I know there must be some properties in the controller I should be able to set when the Edit button is pressed for this, but have not seen any docs on how to accomplish this.
How can I do this?
I'm using version 2011.2.712.340 of the controls.
What your describing above sounds a little bit confusing. The purpose of the readonly property is to ensure that when your row enters edit mode the columns that had readonly explicitly set cannot be edited, which seems to be what you're looking for. When in regular read mode all columns will have the same permission whether or not readonly was set, since you are just viewing the data and not editing.
Edit after clarification from comment:
Seems like you want to have this field editable when you are inserting a record, but not when you edit the row. Well, this can be done using some JavaScript. If you use Ajax binding (the only way to fire this event) you can do the following by subscribing to the onEdit client-side event:
...
.ClientEvents(clientEvents => clientEvents.OnEdit("onEdit"))
...
And here's the JavaScript:
<script type="text/javascript">
function onEdit(e) {
var form = e.form;
var mode = e.mode;
if (mode == "edit") {
var country = form.Country; //Country is a public property of my Model
country.disabled = true;
}
}
As you can see above, I get the form with the associated edited row and specifically grab the field associated with the property I do not want to be edited and disable that input element.

Resources