I'm trying to do very simple thing: when user changes the value of the dropdown list I'd like to display the confirmation. I've tried doing this:
change: function () {
return confirm("Czy chcesz zapisać tę zmianę?");
}
and the same thing using e.preventDefault() but the value still gets updated.
Any ideas how can I do this?
Use the select event instead. Select happens before the change, and change happens after the value has already been changed.
Example here.
Related
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
I tried to set the cascadeFrom option like this: $("#itemQty").data("kendoDropDownList").setOptions({ cascadeFrom: "category" });
setOptions() is woking for other options like template but not for cascadeFrom. Anything else that i need to perform except refresh(). See the example at jsfiddle.net. Here I tried to bind the third kendo dropdown with the first one.
It seems that
$("#itemQty").data("kendoDropDownList")._cascade();
works as you want after you set cascadeFrom by setOptions() method. However it's private method and can stop working in futher versions of Kendo.
Updated fiddle: http://jsfiddle.net/1v76Lg9f/5/
I have a bootstrap dropdown button for each table row.
When the dropdown is clicked it shows a small form with some input fields.
When the user submits this form data or the row gets redrawn the dropdown closes.
I tried preserving the dropdown state using the Template.preserve() method, similar to inputs but with no success.
Some suggested using {{#constant}} directive surrounding the dropdown I also have some reactive content inside the form that needs re-rendering, so this options is not for me.
I have noticed this issue with reactive templates and there is no good solution that I know of. This is somewhat of a hack but it works.
Option 1
Manually add and remove a css class to your dropdown. Use session variables to save the state of the dropdown.
This should be the default state of your dropdown... class="dropdown"
When a user clicks on the dropdown use a session variable to save its state and add 'open' to the HTML class attribute. class="dropdown open"
When a user closes the dropdown remove 'open'
Option 2:
1. User clicks dropdown button.
2. Save dropdown button ID as active using a session variable.
3. Use the following callback to reopen your dropdown... Template.myTemplate.rendered = function ( ) {
if (dropdown = active) {
$().dropdown('toggle'); //instead of toggle try 'open'
}
}
I haven't tried this with dropdowns yet but I was having the same issue with modals disappearing every time the template kept rendering. I tried the second option and it didn't work that great. I ended up using something like the first option to solve the issue and it worked great.
I need help in figuring out the event that is fired when I select a dropdown value from dijit.form.Select. I already know of the onChange event and would like to know an event which fired even when the value is not changed.
Use Case
I am using dijit.form.Select in my project. I have some values like {Multiple,a,b,c,d} in this select drop down. When I select Multiple then it launches the pop up dialog. When I select other values a,b,c or d then that value gets set in that drop down.
Currently I catch onChange event to check if user has selected "Multiple" value so that I can launch the pop up dialog.
Now here is one issue. 1. Lets assume that by default selected value is a. 2. Now I select Multiple, onChange gets fired and pop up dialog gets launched. 3. Now again if I select Multiple then onChange event won't be fired and thus code would not launch pop up dialog.
I want to launch this dialog every time user selects "Multiple" value in the dropdown. Any suggestions to do this? I have tried useing onClick, onBlur and onFocus events but they are not of much use to me.
Please help.
You can Capture the 'onExecute' event of the dropDown of the dijit.form.Select widget for this behaviour. However, keep in mind that you wont get the newVal as an argument to the function for this event. to get the new value, use the following line as the first line of your function:
var newVal = this.focusedChild.option.value;
This will work for sure :)
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.