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.
Related
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);
}
I'm using kendo ui grid and I want to bind onBlur event on the row. I'm using the code below:
$('#grid').on('blur', 'tr.k-state-selected', function (e) {
var grid = gridControl.data('kendoGrid')
,cell = grid.select()
,selectedItem = grid.dataItem(cell);
console.log(selectedItem);
});
My problem is, the onBlur event is also firing when I select a cell in the same row. I don't want to fire the onBlur event when I navigate on the cell within the same row. What I need is to only fire the onBlur event when I lost focus on the row.
Is it possible to open an url when an event is clicked? I want to route my users to an url contains details related to event.
Yes, you can. Just handle the change event of your scheduler like this:
$("#scheduler").kendoScheduler({
change: function (e) {
e.preventDefault(); // prevent the default action
if (e.events.length > 0) { // if true then user clicked an event, not an empty slot
window.location.href = 'stackoverflow.com'; // replace with the desired url
}
},
// ... set other properties ...
});
The e.events is an array that has list of clicked events.
Kendo Scheduler Change Event
I am using CKEditor 4.4.3 and trying to listen to an editor's click event:
editor.on('click', function (e) {
console.log('click event from attaching to the editor');
});
For some reason, the click event never fires. However, if I listen to the doubleclick event, it fires when the editor is double clicked.
I was previously listening to the click event on editor.editable, but it doesn't appear to work for editors that are not inlined. Why is the click event not working?
Some further investigations:
Attaching the event handler on editor.document fires for every click, including clicks outside the editor.
Attaching the event handler to editor.container fires for clicks on the container including the toolbars.
Fiddle: http://jsfiddle.net/295PE/
Correct way of attaching listeners to the editable element in CKEditor:
editor.on( 'contentDom', function() {
var editable = editor.editable();
editable.attachListener( editable, 'click', function() {
// ...
} );
} );
Read more about the reasons why contentDom event has to be used instead of e.g. instanceReady in editable.attachListener documentation.
Use attach the event handler to the editor's editable. This needs to be done after the editor is ready:
editor.on('instanceReady', function (e) {
editor.editable().on('click', function (event) {
console.log('clicked');
});
});
Fiddle: http://jsfiddle.net/8fZpz/
I need to perform an action on my page when the KendoUI grid has been collapsed. I know that the dataBound event fires when the grid is grouped however this event is fired when the grid loads or gets sorted as well. Within my onDataBound event handler how can I tell if the grid is in a grouped state or not.
On DataBound event you can check if the grid currently is grouped using the DataSource group method:
function onDataBound(e) {
gridDataSource = e.sender.dataSource;
if (gridDataSource.group().length > 0) {
//the grid is grouped
debugger;
}
}
To get notified when a group is collapsed you can use delegate event such as:
$('#gridName tbody').on('click','.k-i-collapse',function(){
console.log('Group collapsed!')
})