Kendo UI Grid row onBlur event - kendo-ui

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.

Related

Get the field that is going to be edited in kendo beforeedit event

I have a dependent column that needs to be editable based on value of the first cell. How can do this using the beforeedit event of kendo grid.
I wish to avoid closing the cell in edit event of kendo grid.
Below is a sample
https://dojo.telerik.com/enodEwub
In order to achieve this when "Inline" edit mode is used you can use the Grid's cancelRow() method.
$("#grid").kendoGrid({
//....
edit: onEdit
});
function onEdit(e) {
//your custom logic
$('#grid').data("kendoGrid").cancelRow();
}
Hope that helps!

How to replace keypress event in dojo?

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();

Kendo Grid onchange event

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.

How can you determine if KendoUI Grid is in a grouped state?

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!')
})

click on a empty jqgrid

Can anyone please tell how to get the click event of an empty grid.
i have an empty grid, and after inserting i need to refresh the grid for that i use a right click menu in the grid.
So at first there will be no data and need a click event of the grid,
Thanks,
Devan
It seems to me that you should trigger 'reloadGrid' after the filling of the grid.
If you do need implement 'click' or 'right click' event handler to the whole grid and not only the grid body you can use gbox div which will be constructed by jqGrid and which includes all jqGrid elements (see here for details):
var myGrid = $("#list");
// ...
$('#gbox_'+myGrid[0].id).click(function(e) {
alert("click!");
}).bind('contextmenu', function(e) {
alert("right click!");
});
See the corresponding demo here.

Resources