Regression introduced in 2024.4.1112.
The gutter values are ignored:
$("#exampleform").kendoForm({
formData: {
FirstName: "John",
LastName: "Doe",
Email: "john.doe@email.com",
Country: "1",
City: "Strasbourg",
AddressLine: ""
},
layout: "grid",
grid: {
cols: 2,
**gutter: 50**
},
items: [
{
type: "group",
label: "Personal Information",
layout: "grid",
grid: { cols: 1, **gutter: 50** },
//...
The gutter values are applied to the Form.
Workaround:
Set the values through CSS:
<style>
/*columns gap */
.k-form .k-form-layout {
column-gap: 50px;
}
/*rows margin*/
.k-form-md .k-form-field, .k-form-md .k-form-buttons {
margin-top: 50px;
}
</style>
When the kendo js references are rendered as module, the licensing banner and watermark appear, even when a valid license license key has been installed.
<link href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.mjs" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.worker.mjs" type="module"></script>
<script src="https://cdn.kendostatic.com/2025.1.211/js/kendo.all.min.js" type="module"></script>
<script src="https://cdn.kendostatic.com/2025.1.211/js/kendo.aspnetmvc.min.js" type="module"></script>
No banner and watermark appears.
A banner and a watermark appears.
Workaround: reference a js file containing your script key after the kendo js files:
<script src="~/Scripts/telerik-license.js" type="module"></script>
**Kendo UI version: 2025.1.211
**Browser: [all]
Clearing the value with the Signature "clear" button does not trigger the widget's change event.
Run the following Dojo example: https://dojo.telerik.com/KhlVWvam
The change event fires.
The change event does not fire.
**Kendo UI version: 2025.1.211
**Browser: [all]
In a state persistence scenario, the Grid state is not properly restored when the "all" pageSizes option is selected.
The Grid shows page 1 of the data and the currently selected page sizes option is shown (e.g., 20).
The Grid shows all the data and the pager dropdown shows "all" as the selected value.
I use the ASP.NET MVC widget code to add a ButtonGroup to a view. The ButtonGroup configuration has 2 buttons, has selection = many, and one of the buttons is selected.
@(Html.Kendo().ButtonGroup()
.Name("select-data-source-filters")
.HtmlAttributes(new { @class = "", @style = "text-align: center; flex-flow: row;"})
.Selection("multiple")
.Items(t =>
{
t.Add().Text("Include Default Product Scenarios").Selected(false).HtmlAttributes(new { @id = "databaseItems", @class= "mb-2 k-ml-2.5" });
t.Add().Text("Include User Defined Product Scenarios").Selected(true).HtmlAttributes(new { @id = "userDefinedItems", @class = "mb-2 ml-2" });
})
)
In an event handler for a different widget (e.g., Grid), I programmatically select the button that is not yet selected. This should cause both buttons to now be selected. However, the act of getting a reference to the button group widget object causes the selection property to be reset to "single". The workaround is to manually reset the selection option to "multiple".
let buttonGroupWidget = $("#select-data-source-filters").kendoButtonGroup().data("kendoButtonGroup");
if (debugLevel > 0) {
console.log(".... buttonGroupWidget = " + buttonGroupWidget + " : ", buttonGroupWidget);
console.log(".... (initial) buttonGroupWidget.selectedIndices = " + buttonGroupWidget.selectedIndices + " : ", buttonGroupWidget.selectedIndices);
}
if (buttonGroupWidget !== null && buttonGroupWidget !== undefined) {
buttonGroupWidget.options.selection = "multiple";//workaround for a bug in 2024Q3 that resets selection to single when get reference to the kendo widget
buttonGroupWidget.select(0);
buttonGroupWidget.trigger("select");
console.log(".... (updated) buttonGroupWidget.selectedIndices = " + buttonGroupWidget.selectedIndices + " : ", buttonGroupWidget.selectedIndices);
}
### Bug report
When setting the NoDataTemplate() option to an empty string, the option is not serialized.
### Reproduction of the problem
1. Define an AutoComplete with NoDataTemplate("")
2. Search for a non-existing option and notice how the popup opens and displays the default "No data found" message. When initializing the AutoComplete with jQuery and the "noDataTemplate" is set to "", the popup does not open.
A REPL sample for reproduction: https://netcorerepl.telerik.com/cfkPEClS50FUVU5z00
### Expected/desired behavior
When the NoDataTemplate("") is set and there are no results, the popup must not open. The NoDataTemplate option must work equally when using either the AutoComplete HtmlHelper or Kendo UI for jQuery AutoComplete.
### Environment
* **Telerik UI for ASP.NET MVC version: 2024.4.1112
* **Browser: [all]
The SaveButton() method does not render the Cancel Command button in Grid's Toolbar Template
@(Html.Kendo().Grid<GridModel>()
...
.Name("grid")
.ToolBar(t =>
{
t.Template(@<text>
<span class="group-buttons">
@item.SaveButton();
</span>
</text>);
})
)
The SaveButton() method does not render the Cancel Command in Grid's Toolbar Template.
The SaveButton() method should render the Cancel Command in Grid's Toolbar Template.
A possible way to circumvent this behavior would be to explicitly declare both the Save and Cancel buttons as independent Button components via the Toolbar.ClientTemplate() API configuration.
@(Html.Kendo().Grid<GridModel>()
...
.Name("grid")
.ToolBar(t =>
{
t.ClientTemplate(Html.Kendo().Template()
.AddHtml(@<text>
<span class="group-buttons">
</text>)
.AddComponent(saveBtn => saveBtn
.Button()
.Name("saveBtn")
.Icon("check")
.HtmlAttributes(new { @class = "k-grid-save-changes", style="margin-right: 2%;" })
.Content("Save Changes")
)
.AddComponent(cancelBtn => cancelBtn
.Button()
.Icon("cancel")
.Name("cancelBtn")
.HtmlAttributes(new { @class = "k-grid-cancel-changes" })
.Content("Cancel Changes")
)
.AddHtml("</span>")
);
})
)
Describe the bug
Setting the Sortable "cursor" option results in inline styles being applied through the _setCursor function in kendo.all.min.js. This causes a CSP related js exception.
To reproduce
<ul id="sortable">
<li>ItemA1</li>
<li>ItemA2</li>
<li>ItemA3</li>
</ul>
<script>
$("#sortable").kendoSortable({
cursor: "move"
});
</script>
Expected behavior
No inline styles should be added, to ensure CSP compatibility.
Actual behavior
A js error related to inline styles is thrown.
Affected browsers (please remove the unneeded items)
Product Version
2024.4.1112
Describe the bug
The k-toolbar-solid class is not rendered in the Grid's toolbar. As a result, the theme background color is not applied to the toolbar.
To reproduce
Steps to reproduce the behavior:
Expected behavior
The k-toolbar-solid class should be applied to the toolbar's div element, as in the Kendo UI for jQuery Grid and the Core Grid.
The workaround is to add the class with jQuery, for example in the DataBound event of the Grid:
<script>
function onGridDataBound(e) {
$(e.sender.wrapper).find(".k-toolbar").addClass("k-toolbar-solid");
}
</script>
Affected browsers (please remove the unneeded items)
Product Version
2024.4.1112
The Scheduler is not rendered correctly when the Custom Toolbar is declared with a Template component
Open the following demo and notice that the Scheduler has not been rendered accordingly.
The Scheduler is not rendered accordingly.
The Scheduler should be rendered accordingly.
The button does not have an aria-label attribute.
The button has an aria-label attribute.
Workaround:
<script>
$(document).ready(function() {
$(".k-clear-value").attr("aria-label", "Clear");
})
</script>
The jQuery dependency is defined as follows in the package .nuspec file:
<dependency id="jQuery" version="(, 3.7.1]" />
This causes the following warning to appear when installing the package in a project:
Telerik.UI.for.AspNet.Mvc5 2024.3.1015 does not provide an inclusive lower bound for dependency jQuery (<= 3.7.1). jQuery 1.4.1 was resolved instead.
The affected packages are:
Telerik.UI.for.AspNet.Mvc5
Telerik.UI.for.AspNet.Mvc5.Trial
Install the Telerik.UI.for.AspNet.Mvc5 package in a project and check the warnings list.
Warning:
Telerik.UI.for.AspNet.Mvc5 2024.3.1015 does not provide an inclusive lower bound for dependency jQuery (<= 3.7.1). jQuery 1.4.1 was resolved instead.
Add a lower bound (https://learn.microsoft.com/en-us/nuget/reference/errors-and-warnings/nu1604) to resolve the warning about the jQuery dependency.
The TabStrip Item Action()
method is not loading content correctly.
@(Html.Kendo().TabStrip() .Name("tabs") .Items(strip => { strip.Add().Text("Back").Action("About", "Home"); // ...
For kendo.version '2024.3.806', when the tab is clicked, the controller method does not load from the Action().
For previous versions, like '2023.2.718', when the tab is clicked, the URL from the action method is loaded into the browser URL.
I'm trying to modify the filter ui with a custom function that i passed to the kendo UI fuction.
here's my code :
@using Alstom_penali.Models.database;
@{
ViewBag.Title = "Tutte le penali";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container-fluid">
<div class="row">
<h3>@ViewBag.Title</h3>
@*sotto permessi*@
@if (ViewBag.CanUploadFilePenali == string.Empty)
{
@(Html.Kendo().Upload()
.Name("up_supplychain")
.Messages(y => y.Select("Upload excel penali").UploadSelectedFiles("Avvia"))
.HtmlAttributes(new { accept = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" })
.Multiple(false)
.ShowFileList(false)
.Events(e => e.Success("onUploadSuccess"))
.Async(a => a
.Save("SuppChainExcelRead", "Summary", new { operation = "save" })
.Remove("SuppChainExcelRead", "Summary", new { operation = "remove" })
.AutoUpload(false)
)
)
<br />
}
@if (ViewBag.CanViewSummaryAll == string.Empty)
{
@(Html.Kendo().Grid<PenaliModel>
()
.Name("grid")
.Events(e => e.ExcelExport("excelExport"))
.Columns(
columns =>
{
columns.Bound(c => c.PO_Number).Title("PO Number").Width(125).Locked(true);
columns.Bound(c => c.Pos).Width(100).Locked(true);
columns.Bound(c => c.ddl_stato).Title("STATO").Width(180).Filterable(false).Sortable(false).Locked(true).ClientTemplate("#=ddl_stato.Text#").EditorTemplateName("DropDownEditor");
columns.Bound(c => c.ddl_Responsabilita).Title("Responsabilità ").Width(200).Filterable(false).Sortable(false).Locked(false).ClientTemplate("#=descriptionTemplate(data) #").EditorTemplateName("DropDownEditorResponsabilita");
columns.Bound(c => c.isConQ).Title("Tipo").Width(125)
.Filterable(filter=> filter.UI("isConQRadioFilter"))
.Sortable(false)
.Locked(false)
.ClientTemplate("#=typeTemplate(data) #");
columns.Command(command => { command.Edit().Text("Modifica"); }).Width(100);
columns.Bound(c => c.Progressivo_Conferma).Width(150).Title("CONQ Report");
columns.Bound(c => c.DataInvioConferma).Title("Data Invio CONQ").Width(200).Format("{0:dd/MM/yyyy HH:mm}");
columns.Bound(c => c.NCR).Width(100);
columns.Bound(c => c.SupplierName).Title("Supplier Name").Width(200).Format("{0:n2}");
columns.Bound(c => c.ProgettoSito).Title("MBTO").Width(150);
columns.Bound(c => c.ImportoDaAddebitare).Title("Importo").Width(100).Format("{0:n2}");
columns.Bound(c => c.Importo_Negoziato).Title("Importo Negoziato").Width(150).Format("{0:n2}");
columns.Bound(c => c.Quality_Owner).Title("Quality Owner").Width(200);
columns.Bound(c => c.Progressivo_Avviso).Width(150).Title("ID_CLAIM");
columns.Bound(c => c.DataInvioAvviso).Title("Data Invio CLAIM ").Width(150).Format("{0:dd/MM/yyyy HH:mm}");
columns.Bound(c => c.DataInvioPenale).Title("Data Invio penale").Width(150).Format("{0:dd/MM/yyyy HH:mm}");
columns.Bound(c => c.NotaDebitoNr).Title("Nota debito").Width(125);
columns.Bound(c => c.DataInvioStorno).Title("Data Invio storno").Width(150).Format("{0:dd/MM/yyyy HH:mm}");
columns.Bound(c => c.NotaCreditoNr).Title("Nota credito").Width(125);
columns.Bound(c => c.Id);
columns.Bound(c => c.WBS).Width(200);
columns.Bound(c => c.Progressivo).Width(150);
columns.Bound(c => c.YearMonth).Width(150);
columns.Bound(c => c.Material).Width(200);
columns.Bound(c => c.Description).Width(300).ClientTemplate("<span class='ellipsis'>#:Description#</span>");
columns.Bound(c => c.Del_Note_Nr).Width(150);
columns.Bound(c => c.EmailProcurement).Title("Material planner").Width(200);
columns.Bound(c => c.TotalOrderQty).Width(150);
columns.Bound(c => c.ReceivedQtyInDelay).Width(150);
columns.Bound(c => c.OrderValue).Width(150).Format("{0:n2}");
columns.Bound(c => c.Stat_Del_Date).Width(150).Format("{0:dd/MM/yyyy HH:mm}");
columns.Bound(c => c.Del_Date).Width(150).Format("{0:dd/MM/yyyy HH:mm}");
columns.Bound(c => c.WeeksOfDelay).Width(150);
columns.Bound(c => c.ReceivedValue).Width(150);
columns.Bound(c => c.DataCreazione).Width(150).Format("{0:dd/MM/yyyy HH:mm}");
columns.Bound(c => c.DataModifica).Width(150).Format("{0:dd/MM/yyyy HH:mm}");
columns.Command(command => { command.Destroy().Text("Elimina"); }).Width(100);
})
.HtmlAttributes(new { style = "height: 500px;" })
.ToolBar(tools => tools.Excel().Text("Esporta excel"))
.Excel(excel => excel.AllPages(true).FileName("Penali.xlsx"))
.Editable(editable =>
{
editable.Mode(GridEditMode.InLine);
editable.ConfirmDelete("Sei sicuro?");
})
.Scrollable()
.Groupable()
.Filterable(filterable => filterable
.Operators(operators => operators
.ForString(str => str.Clear()
.IsEqualTo("E' uguale a").StartsWith("Inizia con").EndsWith("Finisce con")
.Contains("Contiene").DoesNotContain("Non contiene"))
.ForDate(dt => dt.Clear()
.IsGreaterThanOrEqualTo("Dopo o uguale al").IsLessThanOrEqualTo("Prima o uguale del"))
))
.Sortable()
.Selectable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
)
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.DataInvioAvviso).Editable(false);
model.Field(p => p.DataInvioPenale).Editable(false);
model.Field(p => p.DataInvioStorno).Editable(false);
model.Field(p => p.DataCreazione).Editable(false);
model.Field(p => p.DataModifica).Editable(false);
model.Field(p => p.Del_Date).Editable(false);
model.Field(p => p.Del_Note_Nr).Editable(false);
model.Field(p => p.Description).Editable(false);
model.Field(p => p.Det_Selected).Editable(false);
model.Field(p => p.EmailProcurement).Editable(false);
model.Field(p => p.ImportoDaAddebitare).Editable(false);
model.Field(p => p.Importo_Negoziato).Editable(false);
model.Field(p => p.Material).Editable(false);
model.Field(p => p.NotaCreditoNr).Editable(false);
model.Field(p => p.NotaDebitoNr).Editable(false);
model.Field(p => p.OrderValue).Editable(false);
model.Field(p => p.PO_Number).Editable(false);
model.Field(p => p.Pos).Editable(false);
model.Field(p => p.ProgettoSito).Editable(false);
model.Field(p => p.Progressivo).Editable(false);
model.Field(p => p.ReceivedQtyInDelay).Editable(false);
model.Field(p => p.ReceivedValue).Editable(false);
model.Field(p => p.Stat_Del_Date).Editable(false);
model.Field(p => p.SupplierName).Editable(false);
model.Field(p => p.TotalOrderQty).Editable(false);
model.Field(p => p.WBS).Editable(false);
model.Field(p => p.WeeksOfDelay).Editable(false);
model.Field(p => p.YearMonth).Editable(false);
model.Field(p => p.NCR).Editable(false);
model.Field(p => p.Progressivo_Avviso).Editable(false);
model.Field(p => p.Progressivo_Conferma).Editable(false);
model.Field(p => p.Quality_Owner).Editable(false);
model.Field(p => p.ddl_stato).DefaultValue(new SelectListItem() { }); //unico editabile
model.Field(p => p.ddl_Responsabilita).DefaultValue(new SelectListItem() { });
model.Field(p => p.isConQ).Editable(false);
model.Field(p => p.DataInvioConferma).Editable(false);
})
.Events(events =>
{
events.RequestEnd("onRequestEnd");
events.Error("onGridError");
})
.Read(read => read.Action("Penali_List", "Summary"))
.Update(update => update.Action("Penali_Update", "Summary"))
.Destroy(update => update.Action("Penali_Destroy", "Summary"))
.PageSize(10)
)
)
}
else
{
<p style="font-size:16px;color:red">@ViewBag.CanViewSummaryAll</p>
}
</div>
</div>
<div id="Pop_up" style="display:none">
<p>Seleziona di chi sarà la responsabilità di questa penale</p>
</div>
@section scripts {
<script type="text/javascript">
function isConQRadioFilter(element) {
// Create radio buttons for filtering boolean values
var html = `
<label>
<input type="radio" name="isConQFilter" value="true" /> CONQ
</label>
<label>
<input type="radio" name="isConQFilter" value="false" /> Ritardo
</label>
`;
// Append the radio button HTML to the filter container
element.append(html);
// Trigger filtering when a radio button is clicked
element.find("input[type=radio]").change(function () {
var filterValue = $(this).val();
var grid = $("#grid").data("kendoGrid");
grid.dataSource.filter({
field: "isConQ",
operator: "eq",
value: filterValue === "true" // Convert the value to a boolean
});
});
}
function onEdit(e) {
}
function excelExport(e) {
var sheet = e.workbook.sheets[0];
var template2 = kendo.template(e.sender.columns[2].template);
var template3 = kendo.template(e.sender.columns[3].template);
var data = e.data;
for (var i = 0; i < data.length; i++) {
sheet.rows[i + 1].cells[2].value = template2(data[i]);
sheet.rows[i + 1].cells[3].value = template3(data[i]);
if (data[i].isConQ) {
sheet.rows[i + 1].cells[4].value = "CONQ";
} else {
sheet.rows[i + 1].cells[4].value = "Ritardo";
}
}
}
function descriptionTemplate(data) {
if ((data.ddl_stato.Text == "INLAVORAZIONE" || data.ddl_stato.Text == "NEGOZIATA") && data.ddl_Responsabilita.Text != null) {
return data.ddl_Responsabilita.Text;
}
else {
return "";
}
}
function typeTemplate(data) {
var html;
if (data.isConQ) {
html = kendo.format(
"<a class=\"k-button\" href='" + '@Url.Action("Create_Penale_CONQ", "Summary")' + "/" + data.Id + " '>CONQ</a> ",
);
} else {
html = kendo.format(
"Ritardo ",
);
}
return html;
}
//(function () {
// isConQFilter("ciao");
//})();
function isConQFilter(element)
{
console.log("isConQFilter called");
element.kendoDropDownList({
dataSource: [
{ text: "CONQ", value: true },
{ text: "Ritardo", value: false }
],
dataTextField: "text",
dataValueField: "value",
optionLabel: "-- Seleziona Tipo --",
valuePrimitive: true
});
}
//function isConQFilter(element) {
// debugger;
// console.log("isConQFilter called");
//}
</script>
}
<style>
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.k-grid-header .k-header {
height: 20px;
padding: 0;
}
.k-grid tbody tr {
line-height: 14px;
}
.k-grid tbody td {
padding: 1px;
}
</style>
the coulm i'm talking about is the "isConq" one, i would like to show "Conq" or "Ritardo" instead of "è vero" or "è falso".
Following the doc, i'm calling the "isConQFilter" js function, but it is never triggered by the kendo.
Where am i wronged?
If you need something else, please, tell me.
I'm using kendo mvc grid version 2016.
There is a difference in behavior between the wrappers (MVC and Core) and the Kendo UI for jQuery DateRangePicker. See the following dojo example, which shows initializing the component with a null value for the End date: https://dojo.telerik.com/IkAMUJoG/2
In contrast, the MVC and Core helpers display the Start value as End value.
The End value is the same as the Start value.
The End value is null.
Consider also the scenario, where the Range configuration is not set and the component gets the Start and End values from the model, and the value of the EndDate field is null:
@(Html.Kendo().DateRangePickerFor(m => m.StartDate, m => m.EndDate )
.Name("dateRangePicker")
)
### Bug report
When the Grid is set up for InCell editing, and the column editor is the Upload widget, the user cannot select a file to upload when the Grid is navigatable.
The issue occurs in version >= 2024.1.130
### Reproduction of the problem
1. Create an InCell editable Grid and enable its "navigatable" option.
2. Set the Upload widget as a column editor.
3. Enter a specified cell in edit mode and try to select a file for upload.
4. The cell closes immediately.
A Dojo sample for reproduction: https://dojo.telerik.com/oDaNaLiQ
### Expected/desired behavior
The cell must remain focused when the Upload button is clicked.
### Workaround
Handle the "edit" event of the Grid, handle the "mousedown" event of the Upload button, and call stopImmediatePropagation():
$("#grid").kendoGrid({
editable: true,
navigatable: true,
edit: function(e) {
if($(e.container).find("input[type='file']")) {
$(".k-upload-button").on("mousedown", function (event) {
event.stopImmediatePropagation();
});
}
}
...
});
### Environment
* **Kendo UI version: 2024.1.130
* **jQuery version: 3.7.0
* **Browser: [all]
The dropdown opens and the Editor hides.
The dropdown opens and the Editor remains open.
No dropdown is rendered.
A dropdown is rendered (see the same demo in Kendo UI for jQuery, or UI for ASP.NET Core)
Workaround - call the Grid's setOptions method on document.ready as shown below:
<script>
$(document).ready(function() {
//replace 'grid' with the actual Name value of your Grid:
$("#grid").data("kendoGrid").setOptions({
toolbar: ["paste"]
})
})
</script>