I use Kendo-angular library. When user select an item in my dropdownlist, the selectionChange event is triggered and based on some conditions I want to cancel the change event and revert to previously selected value in the dropdownlist.
Can this be achieved with the kendo dropdownlist component ?
<kendo-dropdownlist
[data]="services"
[textField]="'defaultLabel'"
[valueField]="'id'"
[(ngModel)]="selectedService"
placeholder="Select a service"
(valueChange)="onServiceChanged($event)">
</kendo-dropdownlist>
onServiceChanged(event) { }
//event is the actual selected value, not the event
i found a solution:
<kendo-dropdownlist #dropdown
(valueChange)="valueChange($event, dropdown)">
</kendo-dropdownlist>
valueChange(value, dropDownControl: DropDownListComponent) {dropDownControl.writeValue("old value");}
Check the event list on the documentation
https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/#toc-events
public valueChange(value: any): void {
// Your condition here
this.log('valueChange', value);
}
Related
I am new in Kendo MVVM. Trying to bind datasource data to a listview but it does not show the data.Tried to mix and match all available examples. Want to use the template which is not working. Here is the code sample
http://dojo.telerik.com/IwawE
Modified the dojo with the fixes
http://dojo.telerik.com/IwawE/5
Your data binding declaration is incomplete and results in javascript errors when kendo tries to instantiate the listview.
data-bind="source:gsSystem,
visible: isVisible,
events: { click: }"
Firstly, there is no 'isVisible' property on your view model so the binding will return 'undefined' resulting in the listview not being shown. Either remove that binding or add the property as part of the model, for example:
isVisible: true
Secondly, there is no function defined for the click event. Usually you would specify one such as:
events: { click: onClick }
and add the handler to the model:
onClick: function (e) {
alert("Clicked");
}
However in the case of the ListView, there is no click event available. Instead, remove the event from the ListView declaration and add it to the div within the template instead:
<script type="text/x-kendo-template" id="tmpl">
<div data-bind="events: { click: onClick }">#:text#</div>
</script>
I have a dropdown with values-Name,MobileNumber and a input text-box related to the selected dropdown.
I want to limit the textbox entry values with only alphabet when Name is selected from the dropdown and only Numbers when MobileNumber is selected. This I am achieving by adding the below thing.
*
On(dom.byId("dropdownid"), "keypress", function(e)){
if(dom.byId("dropdownid").value=="Name"){
On(dom.byId("textboxid"), "keypress", function(e){
if(RegularExpressionAlphabetOnlyCondition == e.charCode){
Stopping the event using e.stopEvent();
}
});
}
if(dom.byId("dropdownid").value=="MobileNumber"){
On(dom.byId("textboxid"), "keypress", function(e){
if(RegularExpressionNumbersOnlyCondition == e.charCode){
Stopping the event using e.stopEvent();
}
});
}
});
*
Now on change of the dropdown value I am adding change event for dropdown and adding similar keypressevent with regularexpression condition of only numbers.
But its not working and accepting only alphabet still. It is apparently not replacing the already placed keypressevent.
How to remove the Keypress event in dojo for a textbox on change of a dropdown value?
The on Function returnes a handle
var h = On(dom.byId("textboxid"), "keypress", function(e){console.log("do Stuff"});
You can then use the handle to cancel it listener before doing a new one
if(h)h.remove();
I have a kendo ui dropdownlist
<select id="mySelect"
kendo-drop-down-list
k-options="controller.mySelect"
ng-model="controller.model">
</select>
Then when I change another select I am successfully refreshing the select by
$("#initiative_select").data("kendoDropDownList").dataSource.read();
But the initial selection is blank, I want to make the first item selected,
I have try to do that on dataBound by
dataBound: function(e) {
e.sender.select(e.sender.dataItem(0));
}
But it's not working.
I think you could use this on your dataBound function
if (this.select() === -1) { //check whether any item is selected
this.select(0);
this.trigger("change");
}
As mentioned by ggkrustev, the issue on github
a DEMO here
Change event is not triggering when i select the already selected date.
Example: in calendar the selected date is 03-Dec-2013 and if i select the same date again
the change event is not triggering.
This is by design. The change event is fired only when the value of the widget changes.
try to attach a event to the click event of the calendar like so each time it will triguger
$(document).ready(funciton(){
$(document).on('click', '#calendar', function (evt) {
alert($(this).val());
});
});
You could bind to the click event of the selected date cell.
E.g.
$("#calendar").on("click", "td.k-state-selected", function (e) {
});
How to prevent the Kendo MVC Grid Buttons event.Like
Save button , Cancel button.
I am working on ASP.NET MVC4 application with Kendo MVC controls.
I want to do that on onchange event of Kendo Grid.Below is my code for onchange function calling:
.Events(events => events.Change("onChange"))
And in which i want to prevent the Save and Cancel button events in case of firing any validation on onchange event.
Below is the code of my onchange event:
function onChange(arg) {
$(".k-button.k-button-icontext.k-grid-add").html("<span class=\"k-icon k-add\"></span>Add New Media");
if (!arg.action) {
$(".k-button.k-button-icontext.k-grid-save-changes").hide();
$(".k-button.k-button-icontext.k-grid-cancel-changes").hide();
$("#gridkendo").show();
} else {
if (arg.items[0].Name) {
}
}
}
I want to prevent the Kendo grid's buttons on onchange event function else condition.
FYI,i am using argument in onchange event function argument.
On the first line of your onChange function use preventDefault on the event.
function onChange(arg) {
arg.stopImmediatePropagation();
// rest of your code
}
Have a look at the documentation https://api.jquery.com/event.stopimmediatepropagation/
The work that usually happens on a grid change event, will not.