<div id="grid"></div>
<script>
// The dataSource is initialized as a stand-alone widget that can be bound to the Grid.
var dataSource = new kendo.data.DataSource({
transport: {
read: {
// The remote endpoint from which the data is retrieved.
url: "https://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
},
pageSize: 10
});
$("#grid").kendoGrid({
// The dataSource configuration is set to an existing DataSource instance.
dataSource: dataSource,
pageable: true
});
</script>
The breakpoint is added at the last line (326079) of the file.
The breakpoint is added at the desired line (e.g., 3715).
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
Dojo: https://dojo.telerik.com/iMuMedOd
A js exception is thrown:
Uncaught TypeError: Cannot read property 'click' of undefined
kendo.all.js:168073
With the toolbar disabled the shortcuts should do nothing. There should be no exceptions.
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 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>
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")
)
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.
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 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.
Dojo example: https://dojo.telerik.com/oDOcanIk
The checked radio button of the RadioGroup appears unchecked.
The RadioGroup check state remains the same.
<div id="pdfViewer">
</div>
<script type="text/javascript">
$("#pdfViewer").kendoPDFViewer({
pdfjsProcessing: {
file: ""
}
});
function loadFile() {
$("#pdfViewer").data("kendoPDFViewer").fromFile("@Url.Action("GetPDF", "Home")");
}
</script>
public ActionResult GetPDF()
{
var name = "sample.pdf";
string path = Server.MapPath("/Content/pdf/sample.pdf");
//generate a random boolean:
Random rng = new Random();
bool randomBool = rng.Next(0, 2) > 0;
if (randomBool)
{
byte[] fileBytes = System.IO.File.ReadAllBytes(path);
return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, name);
}
else
{
return new HttpNotFoundResult("File not found.");
}
}
In the case where the request returns HttpNotFoundResult, a number of js errors are thrown:
util.js:417 Uncaught (in promise)
The user loses the ability to load a file, because subsequent attempts to load a file by clicking the button result in another js exception:
api.js:1114 Uncaught TypeError: Cannot read properties of null (reading 'sendWithStream')
The component should show a message that a file is not found, without throwing js exceptions and should not become unusable after a failed attempt to load a file.
The attributes handler overload does not get executed when the column is initially marked as hidden.
hidden
property of the ContactTitle field to true
.The attributes handler is not executed when the column is hidden.
The attributes handler should be executed when the column is hidden.
Using the PDFViewer with the latest version of PDF.js (3.9.179) throws js exceptions. Version 3.4.120 is the last one, with which no js exception is thrown.
Dojo example: https://dojo.telerik.com/IHedIhur/3
The file is loaded, however, js exceptions are thrown:
The --scale-factor
CSS-variable must be set, to the same value as viewport.scale
, either on the container
-element itself or higher up in the DOM. text_layer.js:480:14
No js exceptions when using PDF.js versions newer than v3.4.120.
There are multiple differences in the theme files. In the theme file added by the NuGet browser-specific styles are missing and calc values differ. Likely the issue is due to autoprefixer and postcss-calc being used in the kendo-themes repo: https://github.com/telerik/kendo-themes/blob/develop/postcss.config.js
and not being used in theme compilation logic in the kendo repo:
https://github.com/telerik/kendo/blob/production/gulpfile.js#L55C38-L55C39
https://github.com/telerik/kendo/blob/master/build/gulp/sass.js
There are multiple differences similar to the exemplary ones posted below:
Example 1:
CDN line 33994:
.k-menu-vertical > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
margin-inline-start: var(--kendo-spacing-2, 0.5rem);
margin-inline-end: calc(var(--kendo-spacing-2, 0.5rem)*2*-1 + -16px - var(--kendo-spacing-2, 0.5rem)/2*-1);
}
NuGet:
.k-menu-vertical > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
margin-inline-start: var(--kendo-spacing-2, 0.5rem);
margin-inline-end: calc( -1 * (calc( var(--kendo-spacing-2, 0.5rem) * 2 + 16px) - var(--kendo-spacing-2, 0.5rem)/2));
}
Note the difference in the margin-inline-end value.
Example 2:
CDN line 36510:
.k-progressbar-vertical .k-progress-status {
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
}
NuGet:
.k-progressbar-vertical .k-progress-status {
writing-mode: vertical-lr;
}
The theme files distributed through CDN and NuGet should be identical.
Alternatively to step 2, click the first justify tool and then consecutively click the other 3 justify buttons.
The Editor's toolbar does not close.
The Editor toolbar closes
Bundling the Kendo js files in an ASP.NET MVC application throws a NullReferenceException error. Reproduced with versions 2024.1.319 and 2024.2.514. The bundling works without exceptions in version 2023.3.1114.
bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/2024.2.514/kendo.web.min.js",
"~/Scripts/kendo/2024.2.514/kendo.aspnetmvc.min.js"
));
Instead of kendo.web.min.js you can use kendo.all.min.js with the same result.
@Scripts.Render("~/bundles/kendo")
Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.
Workaround:
Use bundles.Add(new Bundle("~/bundles/kendo") instead of bundles.Add(new ScriptBundle("~/bundles/kendo")
No exception is thrown when bundling the Kendo script files.
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.
The ClientGroupFooterTemplate and ClientFooterTemplate configuration lead to an invalid template error when strict CSP mode is enabled. There are no corresponding methods that accept a TemplateHandler.
@(Html.Kendo().Grid<TelerikMvcApp3.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID).Filterable(false);
columns.Bound(p => p.Freight);
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity).ClientGroupFooterTemplate("Total:").ClientFooterTemplate("Team Total");
})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Home"))
)
)
@(Html.Kendo().DeferredScriptFile())
JS exceptions on initializing the Grid and on attempting to group it by ShipCity.
CSP compatible templates.
The dropdown opens and the Editor hides.
The dropdown opens and the Editor remains open.