Hello,
I have the following grid with a deleteRow event where I want to use my own conformation (sweetalert). In the event I first cancel the delete operation and then ask the user if he will delete the row or not.
Which code is necessary to delete the current row with Javascript/jQuery (line 19. in the code)?
01.
function deleteRow(e) {
02.
03.
$("#grid").data("kendoGrid").cancelChanges();
04.
05.
swal({
06.
title: "Löschen",
07.
text: "Sind Sie sich sicher, dass Sie den aktuellen Datensatz löschen wollen?",
08.
type: "warning",
09.
showCancelButton: true,
10.
confirmButtonColor: "#DD6B55",
11.
confirmButtonText: "OK",
12.
cancelButtonText: "Abbrechen",
13.
closeOnConfirm: true,
14.
closeOnCancel: true
15.
},
16.
function (isConfirm) {
17.
if (isConfirm) {
18.
19.
20.
21.
}
22.
});
23.
}
6 Answers, 1 is accepted
You can remove a grid row by using removeRow method of the grid and pass a jQuery object or a DOM element that represent the table row.
Regards,
Kostadin
Telerik
I use the following code but it does'nt work - what I'm doing wrong?
function
deleteRow(e) {
$(
"#grid"
).data(
"kendoGrid"
).cancelChanges();
swal({
title:
"Löschen"
,
text:
"Sind Sie sich sicher, dass Sie den aktuellen Datensatz löschen wollen?"
,
type:
"warning"
,
showCancelButton:
true
,
confirmButtonColor:
"#DD6B55"
,
confirmButtonText:
"OK"
,
cancelButtonText:
"Abbrechen"
,
closeOnConfirm:
true
,
closeOnCancel:
true
},
function
(isConfirm) {
if
(isConfirm) {
var
tr = $(e.target).closest(
"tr"
);
//get the row for deletion
var
data = $(
"#grid"
).data(
"kendoGrid"
).dataItem(tr);
var
grid = $(
"#grid"
).data(
"kendoGrid"
);
grid.removeRow(data);
}
});
}
Thank you for contacting us.
Please note that you need to pass a jQuery object or a DOM element and not the DataItem. Please try using the following approach.
var
tr = $(e.target).closest(
"tr"
);
grid.removeRow(tr);
I hope this information helps.
Regards,
Kostadin
Telerik
Hi,
it doesn't work because it seems that using "cancelChanges()" in the deleteRow event prevents a delete (see code below)
what I want to do is cancel the delete of a row in the deleteRow(e) event and use my own confirmation dialog (sweetalert). if the user
clicks "OK" I want to delete the current row - isn't this possible?
why does cancelChanges prevent me from deleting the current row?
function
deleteRow(e) {
$(
"#grid"
).data(
"kendoGrid"
).cancelChanges();
swal({
title:
"Löschen"
,
text:
"Sind Sie sich sicher, dass Sie den aktuellen Datensatz löschen wollen?"
,
type:
"warning"
,
showCancelButton:
true
,
confirmButtonColor:
"#DD6B55"
,
confirmButtonText:
"OK"
,
cancelButtonText:
"Abbrechen"
,
closeOnConfirm:
true
,
closeOnCancel:
true
},
function
(isConfirm) {
if
(isConfirm) {
var
grid = $(
"#grid"
).data(
"kendoGrid"
);
var
tr = $(e.target).closest(
"tr"
);
grid.removeRow(tr);
}
});
}
@(Html.Kendo().Grid<GPDBTest.Models.SELECT_Anrede>()
.Name(
"grid"
)
.Columns(columns =>
{
columns.Command(command => { command.Edit().Text(
" "
).CancelText(
"Abbrechen"
).UpdateText(
"Speichern"
); }).Width(95);
columns.Command(command => { command.Custom(
"cmdloeschen"
).Click(
"loeschen"
).Text(
"Löschen"
); }).Width(85);
columns.Bound(p => p.Anrede_ID).Filterable(
false
).Width(100);
columns.Bound(p => p.Anrede);
columns.Bound(p => p.angelegt).Format(
"{0:dd.MM.yyyy}"
).Width(110);
columns.Bound(p => p.geändert).Format(
"{0:dd.MM.yyyy}"
).Width(110);
columns.Bound(p => p.Benutzer).Width(100);
columns.Command(command => { command.Destroy().Text(
" "
); }).Width(45);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation(
false
))
.Sortable()
.Resizable(resize => resize.Columns(
true
))
.Scrollable(s => s.Height(
"100%"
))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(0)
.Model(model => model.Id(p => p.RowVersion))
.Create(create => create.Action(
"Anrede_Create"
,
"Anrede"
))
.Read(read => read.Action(
"Anrede_Read"
,
"Anrede"
))
.Update(update => update.Action(
"Anrede_Update"
,
"Anrede"
))
.Destroy(update => update.Action(
"Anrede_Destroy"
,
"Anrede"
))
)
.Events(e => e.Remove(
"deleteRow"
))
)
In order to achieve your requirement I would recommend you to use a Custom command to delete the record. I prepared a small runnable sample where you can see how to implement a custom delete.
Regards,
Kostadin
Telerik