I have a basic textbox defined as:
#Html.Kendo().TextBoxFor(m => m.myNumber).Format("{0:#,###}").HtmlAttributes(new { #readonly = "readonly", style = "width:150px;" })
After doing an ajax call I update the value via javascript:
$("#myNumber").val(data.myNumber);
However now the formatting is lost, there's no longer a comma thousands separator present. Is there a javascript function I need to call on $("#myNumber"), like a rebind or refresh? For some reason telerik doesn't have any documentation for their textbox.
Copying answer from the comments:
I think what you're more looking for is the NumericTextBox. This will give you the proper controls of being able to set it's format and then in the javascript after your ajax call, set the value of the kendo object to maintain formatting. Right now all you're doing is selecting a plain jQuery html element and setting it's value. That won't interface with the kendo textbox (which isn't an object) at all. You'll either need to return your value in the format you desire or explore #Kevin's option as alternatives.
Related
I am using kendo ui controls for the first time in mvc.
1> #Html.Kendo().TextBoxFor(model => model.field).Name("txtFirstName")
how do I reset the value to empty string and disable a kendo textboxfor using jquery?
for some controls I am able to do something like this, but for the kendo.Textbodfor() I donot know what to pass in the .data()
var txtLastName= $("#LastName").data("kendoAutoComplete");
txtLastName.value("");
txtLastName.enable(false);
2> this partial view only renders a textbox - how to reset the value to an empty string and disable the textbox rendered by the partial view
<li>#Html.Partial("~/Views/xyz/_AutoComplete.cshtml")</li>
When using #Html.Kendo().TextBoxFor the generated output doesn't generate a Kendo widget it is simply an input element.
You just need to use some jQuery or Javascript to do what you want.
$('#txtFirstName').removeAttr("value")
$('#txtFirstName').prop("disabled", "disabled")
I'm using Telerik Kendo UI Professional. I have a grid with an edit template, and several controls on it. I ran into a weird little requirement, where I needed to programmatically set the value of one of the controls, based on another control being changed. The actual change of value seems to happen just fine. However, when I submit the form to save changes, the new, programmatically-set value is ignored; it sends the original value instead. If the user changes the value himself, the new value is submitted just fine.
Here is a sample:
http://dojo.telerik.com/#wittca/otoxO
This is not my original code, but it shows the same problem. In this version, upon opening the edit popup, I programmatically modify the value of the UnitsInStock KendoNumericTextBox. Then when I save the form, I would expect to see the new value, but I still see the old value in the grid. So it does not take the programmatically-generated new value.
My original code is trying to set the value of a KendoComboBox, when one of the other controls changes, and the same situation happens. I didn't have time to create the exact same situation, but most likely if we can fix that dojo sample, the same fix would apply to my ComboBox.
Here is the response I got from Telerik support:
You will need to trigger the change event as well, as the Grid listens for it in order to update the value. Please see the updated example here:
http://dojo.telerik.com/UjUkE
var units = e.container.find("[name='UnitsInStock']").data("kendoNumericTextBox");
units.value( <insert new value here> );
units.trigger("change");
The key line of code is that last one; that manually triggers the "change" event on the control, which forces the Grid to update the value.
This fix also works with my original problem involving ComboBoxes.
He is a solution for you:
If you change the edit function that you have from:
edit: function (e) {
var units = e.container.find("[name='UnitsInStock']").data("kendoNumericTextBox");
var unitsValue = units.value();
units.value(unitsValue+1);
}
to this:
edit: function (e) {
var val = e.model.UnitsInStock;
e.model.set("UnitsInStock", val+ 1);
}
It will bind the updated value for you.
Here is my updated code for you to test:
http://dojo.telerik.com/OHaKA/2
This is my Razor view in ASP.NET MVC3 Application
#Html.DropDownListFor(m => m.Leave_Type, Model.Leave_Types, new { #class = "input-append" })
On POST when I read Model.LeaveType, it returns selected value. I want to get the selected text instead, how do I get it? I appreciate any help. Thanks a lot in advance!!
The answer is.. it depends. A drop down is just a standard HTML dropdown control, and it can only post the selected value. It will never post the text, and there is no way to change that.
Do you need the selected value as well? If so, then you can't get both like that. You would have to look up the Leave_Type text in the Leave_Types object based on the selected value returned.
If you don't need the Leave_Type, then you can simply use the text for both the value and text.
Another option might be to write some javascript that copies the selected item text to a hidden field whenever the value of the dropdown changes. Then that hidden field will be posted and you can check that.
I would, however, simply look up the value in whatever method you use to create the Leave_Types collection in the first place.
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 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.