Rank 1
Iron
Iron
Iron
Hi,
I'm trying to use grid with custom popup editor.
All works fine, but with my code, if I remove a line of the grid (custom remove with prompt), and then I try to insert a new one, the editor does not close and triggers both the "create" event and the "destroy" event (this with same parameters as the last called one), but I want only the "create" and to close the popup.
How can I prevent this unwanted behaviour?
here's the code:
<div id="corsi"></div><div id="window"></div><script id="popupTemplate" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="Inizio">Inizio:</label>
</div>
<div class="k-edit-field">
<input id="Inizio" name="datainizio" data-bind="value:datainizio" required />
<span class="k-invalid-msg" data-for="Inizio"></span>
</div>
<div class="k-edit-label">
<label for="products">Fine:</label>
</div>
<div class="k-edit-field">
<input id="Fine" name="datafine" data-bind="value:datafine" required />
<span class="k-invalid-msg" data-for="Fine"></span>
</div>
<div class="k-edit-label">
<label for="Turno">Turno:</label>
</div>
<div class="k-edit-field">
<input id="Turno" name="turno" data-bind="value:turno" required />
<span class="k-invalid-msg" data-for="Turno"></span>
</div>
</script><script type="text/x-kendo-template" id="windowTemplate">
<p>Eliminare il corso <strong>#= datainizio # - #= datafine # (#= turno #)</strong>?</p>
<p style="color: red; font-weight: bold;">Eliminerai anche tutte le prenotazioni!</p>
<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" id="yesCancelButton"><span class="k-button-text">Si</span></button>
<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" id="noCancelButton"><span class="k-button-text">No</span></button>
</script><script type="x/kendo-template" id="page-template">
<div class="page-template">
<div class="header">
<div style="float: right">Report Corsi Scuola Vela <?=(isset($_GET["anno"]) ? $_GET["anno"] : date("Y"));?></div>
</div>
<div class="footer">
Pagina #: pageNum # di #: totalPages #
</div>
</div>
</script><script>
$(document).ready(function () {
var windowTemplate = kendo.template($("#windowTemplate").html());
const dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/gest/ajax/corsiScuolaVela-view.php<?=(isset($_GET["anno"]) ? "?anno=" . $_GET["anno"] : NULL);?>",
dataType: "json"
},
update: {
url: "/gest/ajax/corsiScuolaVela-update.php<?=(isset($_GET["anno"]) ? "?anno=" . $_GET["anno"] : NULL);?>",
method: "post",
dataType: "json"
},
destroy: {
url: "/gest/ajax/corsiScuolaVela-destroy.php",
method: "post",
dataType: "json"
},
create: {
url: "/gest/ajax/corsiScuolaVela-create.php<?=(isset($_GET["anno"]) ? "?anno=" . $_GET["anno"] : NULL);?>",
method: "post",
dataType: "json"
},
},
batch: false,
schema: {
model: {
id: "id",
fields: {
id: { type: "number", editable: false },
datainizio: { type: "date", validation: { required: true } },
datafine: { type: "date" , validation: { required: true }},
turno: { type: "string" },
prenotazioni: { type: "string", editable: false },
}
}
}
});
function initDropDownLists() {
var inizio = $("#Inizio").kendoDatePicker({format: "dd/MM/yyyy", dateInput: true}).data("kendoDatePicker");
var fine = $("#Fine").kendoDatePicker({format: "dd/MM/yyyy", dateInput: true}).data("kendoDatePicker");
var turni = $("#Turno").kendoDropDownList({
autoBind: false,
optionLabel: "Seleziona Turno...",
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Mattina", value: "Mattina" },
{ text: "Pomeriggio", value: "Pomeriggio" }
]
}).data("kendoDropDownList");
}
let grid = $("#corsi").kendoGrid({
sortable: {
mode: "multiple"
},
resizable: true,
dataBound: function() {
for (var i = 0; i < this.columns.length; i++) {
this.autoFitColumn(i);
}
},
toolbar: [
{ name: "create", text: "Nuovo" },
{ name: "excel", text: "Esporta Excel" },
{ name: "pdf", text: "Esporta PDF" },
],
excel: {
fileName: "Report Corsi Scuola Vela <?=(isset($_GET["anno"]) ? $_GET["anno"] : date("Y"));?>.xlsx"
},
pdf: {
allPages: true,
avoidLinks: false,
paperSize: "A4",
margin: { top: "2cm", left: "0.6cm", right: "0.6cm", bottom: "1cm" },
landscape: true,
repeatHeaders: true,
template: $("#page-template").html(),
scale: 1
},
pdfExport: function(e) {
e.sender.wrapperClone.addClass('k-clone');
},
columnMenu: {
messages: {
sortAscending: "Ordina Crescente",
sortDescending: "Ordina Decrescente",
filter: "Filtra",
columns: "Colonne"
}
},
width: "98%",
height: "860px",
editable: { mode: "popup", window: { width: 600 }, template: $("#popupTemplate").html() },
edit: function (e) {
initDropDownLists();
},
columns: [
{ field: "id", title: "Prog.", exportable: { pdf: true, excel: true }},
{ field: "datainizio", title: "DATA INIZIO", format: "{0:dd/MM/yyyy}", exportable: { pdf: true, excel: true } },
{ field: "datafine", title: "DATA FINE", format: "{0:dd/MM/yyyy}", exportable: { pdf: true, excel: true } },
{ field: "turno", title: "TURNO", exportable: { pdf: true, excel: true }},
{ field: "prenotazioni", title: "PRENOTAZIONI", exportable: { pdf: true, excel: true }},
{ command: [
{
className: "btnEdit",
name: "edit",
text: {
edit: "Modifica",
update: "Salva / Aggiorna",
cancel: "Annulla"
}
},
{
name: "delete",
text: "Elimina",
click: function(e){
var window = $("#window").kendoWindow({
title: "Sei sicuro di voler eliminare questo Corso?",
visible: false,
width: "400px",
height: "200px",
}).data("kendoWindow");
e.preventDefault(); //prevent page scroll reset
var tr = $(e.target).closest("tr"); //get the row for deletion
var data = this.dataItem(tr); //get the row data so it can be referred later
window.content(windowTemplate(data)); //send the row data object to the template and render it
window.center().open();
$("#yesCancelButton").click(function(){
grid.dataSource.remove(data) //prepare a "destroy" request
grid.dataSource.sync() //actually send the request (might be ommited if the autoSync option is enabled in the dataSource)
window.close();
});
$("#noCancelButton").click(function(){
window.close();
});
}
}
], exportable: { pdf: false, excel: false }
}
],
filterable: {
messages: {
filter: "Filtra", // Sets the text for the "Filter" button.
clear: "Annulla Filtro", // Sets the text for the "Clear" button.
// When filtering Boolean numbers.
isTrue: "è vero", // Sets the text for "isTrue" radio button.
isFalse: "è falso", // Sets the text for "isFalse" radio button.
// Changes the text of the "And" and "Or" of the Filter menu.
and: "E",
or: "O"
},
operators: {
// The filter menu for "string" type columns.
string: {
eq: "è uguale a",
neq: "è diverso da",
startswith: "comincia per",
contains: "contiene",
endswith: "finisce con"
},
// The filter menu for "number" type columns.
number: {
eq: "è uguale a",
neq: "è diverso da",
gte: "è maggiore o uguale a",
gt: "è maggiore di",
lte: "è minore o uguale a",
lt: "è minore di"
},
// The filter menu for "date" type columns.
date: {
eq: "è uguale a",
neq: "è diverso da",
gte: "è successiva o uguale a",
gt: "è successiva a",
lte: "è precedente o uguale a",
lt: "è precedente a"
},
// The filter menu for foreign key values.
enums: {
eq: "è uguale a",
neq: "è diverso da"
}
}
},
filterable: true,
dataSource: dataSource
}).data("kendoGrid");
});
Hi Alessandro,
I tried to replicate this undesired behaviour but I was unable to. Please refer to the below Dojo demo I managed to assemble:
https://dojo.telerik.com/cKqbhWEU
Could you please modify it to showcase the problem?
Regards,
Nikolay
Hi Nikolay,
I was unable to replicate it in Dojo (you have done a beatiful work!), but I bypassed the problem reloading page after destroy is triggered.
I will try again later, and if I can replicate the problem in Dojo I will add a comment.
Thank you
Kind regards.
Alessandro
Hi Alessandro,
Thank you for the follow-up. Please let me know if you manage to replicate the problem.
Regards,
Nikolay