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/
Related
I am using custom light box, for recurring events everything is working fine the problem is when we edit a recurring event we should get dialog asking for "Edit Series", "Edit Occurance" that dialog is not appearing.
I have added configs like:
scheduler.config.repeat_precise = true;
scheduler.config.lightbox_recurring = 'Ask';
AM i missing something?
Moreover I am using unit view that will contain both single and recurring events.
This dialog is a part of the original scheduler.getLightbox method - https://github.com/DHTMLX/scheduler/blob/v4.4.0/codebase/sources/ext/dhtmlxscheduler_recurring.js#L776 .
If you redefine that method - you need to reimplement the dialog as well, here is a code snippet
var labels = scheduler.locale.labels;
dhtmlx.modalbox({
text: labels.confirm_recurring,
title: labels.title_confirm_recurring,
width: "500px",
position: "middle",
buttons:[labels.button_edit_series, labels.button_edit_occurrence, labels.icon_cancel],
callback: function(index) {
switch(+index) {
case 0:
return alert("edit series");
case 1:
return alert("edit ocurrence");
case 2:
return alert("cancel");
}
}
});
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;
});
Does anyone know of a way to trigger the editing of a row just by clicking the row?
I would like to see the same functionality that I see when I click an edit command button, but triggered by selecting the row.
You can add this to your change event for your grid:
myGrid.setOptions({
editable: {
mode: "inline"
},
change: function(){
this.editRow(this.select());
}
});
I know this is an old question, but I just had need for a solution and this is what worked for me. I wanted to use double-click, but the click event should also work.
var grid = $('#grid').data('kendoGrid');
$('#grid .k-grid-content table').on(
'dblclick',
'tr',
function () { grid.editRow($(this)); }
);
The selector ("#grid .k-grid-content table") works for my current configuration (mainly I have virtual scrolling turned on) and so may need to be adjusted for your specific situation.
I am using a template for the edit popup. I am trying to force the grid to go into edit mode and show the edit template popup when a link within one of the columns is clicked.
I tried using a command but I am unable to data bind the hyperlink's text to a field declared in the model, in this case to 'CourseType'. Is data binding supported within command columns?
columns: [
{
command: [
{
id: "edit",
title: "School Item",
template: '#=CourseType#',
width: 120
}
]
}
]
If data binding is not supported within a command column, then how do I put the grid into edit mode when the templated field is clicked?
columns: [
{
field: "CourseType",
title: "School Item",
template: '#=CourseType#'
}
]
I'm not sure why do you want to define the cell as an HTML anchor but there is no problem on making it enter on popup edit mode when clicking on the anchor.
1) Add to your template a class that would allow us to find those cells. Something like:
columns: [
{
field: "CourseType",
title: "School Item",
template: '#=CourseType#'
}
]
where I have include class="ob-edit-popup" to the template.
2) add to your grid definition the option editable: "popup".
3) add the following JavaScript code after the initialization.
$(".ob-edit-popup", grid.tbody).on("click", function (e) {
var row = $(this).closest("tr");
grid.editRow(row);
})
Where grid is the result of:
var grid = $("#grid").kendoGrid({...}).data("kendoGrid");
I'm using the edit event on a Kendo grid to show a couple of hidden columns. I'll then hide them again on the save event.
Problem I have is that there doesn't appear to be an event for cancelling edit mode, so the column get screwed up if the user clicks cancel.
Is there an undocumented event for cancel or do I need to find a workaround?
Basically there is no such "Cancel" event, however you can attach click event on the "Cancel" button in the еdit event of the Grid. Please check the example below:
function onEdit(e) {
e.container.find(".k-grid-cancel").bind("click", function () {
//your code here
})
}
EDIT: From some time the Grid have "cancel" event which can be used instead of the above solution:
cancel event
I've been looking for an answer to the same question but this didn't work for me. I had a scenario where new and edited records within my grid are validated within my controller and error messages are added to the ModelState's ModelError collection. I had hooked up the grid's datasource error event which then displayed the error message within an alert, and then added the following which reset the changes:
$('#MyGrid').data("kendoGrid").cancelChanges();
It was a neat solution for me because I am using paging and the current page the user is viewing is preserved.
Contrary to what the accepted answer states there is in fact a cancel event just like the edit event.
$("#grid").kendoGrid({
...
edit: function(e) {
alert("edit")
},
cancel: function(e) {
alert("cancel");
},
...
});
Try this,
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
dataBound: function(e) {
$("#grid").on("mousedown", ".k-grid-cancel-changes", function (e) {
//custom logic
});
}
});
In dataBound, wire click event for the kendo grid Toolbar cancel button. It will work.