Telerik Forums
Kendo UI for jQuery Forum
3 answers
719 views
We need your feedback, because we are considering changes in the release approach for Kendo UI for jQuery. Please provide your feedback in the comments section below:


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.

Jack
Top achievements
Rank 2
Iron
 answered on 23 Jun 2023
1 answer
18 views

 

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 }"#>

 

 

Vessy
Telerik team
 answered on 14 Feb 2025
0 answers
8 views

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?

Kent
Top achievements
Rank 1
 asked on 13 Feb 2025
0 answers
13 views
Hi,

Within kendo jquery charts, using aggregate: "avg" for series.
Is it possible to have the 'count' value inside the series labels to be displayed (using template or whatever) ?

Thank you
Regards
arnaud
Top achievements
Rank 1
 asked on 12 Feb 2025
1 answer
16 views
Hello,

when i open image on kendo editor from file upload then by default it's show selected as crop with default aspect ratio i have specified one
and also want to hide following from crop dialog -

- hide aspect ratio dropdown field
- hide orientation
- hide lock aspect ratio

only confirm and cancel button should show on crop dialog

so basic purpose it user will crop the image of required aspect ratio only no other option to be given to user.
also post crop we need to validate image size should not be more than 10MB

I am using kendo version 2024.1.130

Thanks!
Martin
Telerik team
 answered on 10 Feb 2025
1 answer
10 views

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

Martin
Telerik team
 answered on 10 Feb 2025
1 answer
10 views

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?

 

 

Nikolay
Telerik team
 answered on 07 Feb 2025
1 answer
17 views

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

Martin
Telerik team
 answered on 06 Feb 2025
0 answers
14 views

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"); });


Alessandro
Top achievements
Rank 1
Iron
Iron
Iron
 asked on 05 Feb 2025
1 answer
12 views

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.

Martin
Telerik team
 answered on 05 Feb 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Mohamad Javad
Top achievements
Rank 2
Iron
Iron
Iron
Andrew
Top achievements
Rank 2
Iron
Aaron
Top achievements
Rank 1
Iron
Roland
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Mohamad Javad
Top achievements
Rank 2
Iron
Iron
Iron
Andrew
Top achievements
Rank 2
Iron
Aaron
Top achievements
Rank 1
Iron
Roland
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?