I have a KendoUI grid presented in a mobal window (kendoWindow). The grid has a column command with a click event:
$("#grid").kendoGrid({
...
columns:[
...
{ command: { text: "Delete", click: ContactDelete }],
}];
This delete Command Button is calling the method multiple time as much as rows are there in the grid,means if we have 1 rows in the grid then once ,2 rows it will call twice and so on also I'm having problem of rebinding the grid after deleting the rows,Even i tried with grid.destroy and lot other options.
Sample Code Here
create custom events like below and onclick event call a function ...
command.Custom("Edit").Text(" ").Click("EditRole");
Related
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!
This is the Kendo UI demo showing hierarchical data: http://demos.telerik.com/kendo-ui/grid/hierarchy
It seems to work very well, but the first row is expanded automatically. I tried hacking around with it in their dojo, but couldn't find a way to disable that behavior.
How do I prevent rows from being automatically expanded in Kendo UI Grid?
It's because there is used expandRow method in dataBound event to expand first row. Remove it.
var element = $("#grid").kendoGrid({
....
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
....
});
In my Kendo grid, I've a column (address). Instead of displaying customer's address, it shows a button. On clicking the button, I want to open a Kendo window as a modal and display the address.
...
{ field: "address",
title: "Customer Address",
width: "130px",
filterable: false,
template: '<span class="viewButton"><input type="button" value="Address" class="k-primary"></input></span>'
},
...
I've tried various strategies, including a custom command, an onClick event handler for the grid etc. But none seems to work. The best I've achieved so far is using custom command, in which I can open the Kendo window, but unable to display the underlying data for the column.
Any ideas for any possible way to achieve this?
You can get hold of current dataItem and show it in window.
$("#grid").on("click", ".viewButton",function(e){
var dataItem = grid.dataSource.dataItem($(e.currentTarget).closest('tr'));
var yourText = dataItem.address;
});
I've noticed that my custom Grid command is not working after a popup edit dialog is opened and closed (cancelled).
The command delrow is used to display a custom delete confirmation (I've simplified it in the fiddle to just use a standard JS confirmation).
I've setup a Fiddle that demonstrates the problem.
It works when the grid is initially loaded, but not after a cancelled edit. Not sure if this is a bug or something I'm doing wrong.
Any advice would be much appreciated. Thanks
Is the way you do it. You are binding the click event in the dataBound but when you cancel the edition the row is refreshed and you loose the bind.
You should define the action using click property as:
columns : [
{
command: [
{name: 'edit'},
{name:'delrow', click: delRow}],
title: ' ',
width: 100
},
{ field: "FirstName", width: 90, title: "First Name" },
...
Where delRow is the same code that you have as click event handler:
function delRow(e) {
var row = $(this).parents('tr:first');
var r=confirm("Are you sure you want to delete this row!");
if (r==true)
{
var g = grid.data('kendoGrid');
g.removeRow(row[0]);
}
}
See it in action here : http://jsfiddle.net/OnaBai/XNcmt/56/
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.