1. Is it hard to understand the version numbers of our releases? If yes, what makes them hard to understand them?
2. Would semantic versioning (SemVer) of our releases make it easier to understand our version numbers and what's behind them?
3. If we go with SemVer, we might need to start with version 3000.0.0 as we currently use 2022.x.x. Please share your thoughts about this approach and ideas for what number versioning would work best for you.
I am using Vue Js with Kendo.
I need to escape a function within a HTML input element. :
This is the input values
<input type="checkbox" class="checkbox" :class="{ 'checked': myVar }">
This is what i tried to do but it did not work:
<input type="checkbox" class="checkbox" \#:class="{ 'checked': myVar }"#>
In my excelExport JavaScript function for my Kendo Grid definition I am requesting the merge of two cells using:
sheet.mergedCells = []; sheet.mergedCells.push("A2:A3");
On the created spreadsheet I do get a merged cell at A2 spanning two rows, but the cell that was at A3 (and all of the cells to the right of it) get shifted right instead of being absorbed by the merge.
So I now want to delete the cell at A3. But I can't find any way to select/delete cells using this api.
Any thoughts on how to delete that cell?
Hi,
I use the MultiViewCalendar, and have a style for selected days. I let the user save those days, and apply them when he opens the calendar, with:
kendoCalendar.selectDates(dateArray);
The days get colorized as I styled them like:
#IdentificationName > .k-calendar-view > table > tbody > tr > td.k-state-selected .k-link {
background-color: lightgreen !important;
background-clip: padding-box !important;
box-shadow: inset 0 0 10px mediumseagreen;
color: black;
}
it works, except for the "today" day.
When I inspect, it seems, the framework has overwritten the "k-state-selected"-class with "k-today".
What happens then is, my selected days are green, but the selected day which is also the "today" day, is white with red border.
From Browser Dev Tools:
(Any other "selected" day:)
<td role="gridcell" class="k-state-selected" aria-selected="true"><a tabindex="-1" class="k-link" href="#" data-value="2024/3/1" title="Montag, 1. April 2024"></a></td>
(Today selected day:)
<td class="k-today" role="gridcell" id="IdentificationName_cell_selected" aria-selected="false"><a tabindex="-1" class="k-link" href="#" data-value="2025/1/5" title="Mittwoch, 5. Februar 2025">5</a></td>
How can I keep the green filling color of my selected class which gets loaded initally?
(and only add the red border in css for the "today selected day")
Thank you,
Best regards
Using the Telerik WPF controls I can specify pretty much whatever content I want by setting the shape's content to a WPF control. Is it possible to do something like that with the Kendo controls (i.e. specify a Circular Gauge as a visual for example) or am I limited to the shapes defined in the diagram (Image, Group, Circle, etc.).?
If not I guess I could overlay HTML elements on top of the diagram but that is a bit of a hack. Is there a better way to do it?
Hi,
Does the chat control support rendering messages that are in Markdown format? For Example:
**James Smith**
- Department: Development
- Role: Senior Developer
This should show James Smith in bold. If the chat control does not support this can you suggest any approaches to achive this?
Thanks,
Euan
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");
});
We tried to apply the arabic conversion logic to the page. We have control like textbox, dropdown, date and grids with labels. The labels of all controls was changed without any issue. The grid column header caption and the data was also changed.
But the value inside the textbox, dropdown was not changed. Any guidance to resolve this issue.
I used the below code to enable the Google Translation in page.
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: 'ar,en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
I herewith shared a video for your reference.