Bug report

Reproduction of the problem

1. Run this dojo example: https://dojo.telerik.com/VBprsrAf
2. Inspect the clear button (the element with class "k-clear-value").

Current behavior

The button does not have an aria-label attribute.

Expected/desired behavior

The button has an aria-label attribute.

Workaround:

<script>
    $(document).ready(function() {
        $(".k-clear-value").attr("aria-label", "Clear");
    })
</script>

Environment

• Kendo UI version: 2024.3.1015
• jQuery version: x.y
• Browser: [all]

I have a cshtml page that uses Kendo UI ASP.NET MVC that does the following:

• sends an ajax request to a controller action method,
• opens a new tab using window.open(),
• displays a temporary message to let the user know that something is happening,
• then overwrite the new tab content using the view that is contained in the ajax response.

The view contains one or more grid widgets (the number depends on how many result types were requested) and each grid is set up to export Excel.

The problem is that when window.open() is used to open a new tab, the browser history state is null and the window.location.href is empty with the browser location showing "about:blank". For Chrome and Firefox, this does not cause any issues when exporting excel for the grid.  However, when using Edge with this situation, when the Export to Excel grid toolbar button is clicked and the onExportExcel event is fired,  the browser Open or Save dialog prompt is displayed but the active tab (the one that contained the grid) closes. This behaviour is very undesireable. The ProxyUrl grid excel option does not fire since Edge supports javascript file saving.

A workaround for this situation is to forcibly set the new tab window object location href by using the window.history.pushUpdate function. A code snippet is included below.

let dataModel = {Id = 123571113, Name="jason bourne"};
let jsonModel = JSON.stringify(dataModel);
let curDate = new Date();
let targetUrl = '@Url.Action("Reports", "Report", new { @area = "Reports" })';
let targetWindowName = "something meaningful" + " " + curDate.toISOString();//add datetime stamp to avoid issue where you cannot open a window with the same name as the current window.
let html = "some html content to provide a temporary message to your audience";
let targetWindow = window.open(targetUrl, targetWindowName);
if (targetWindow !== null && targetWindow !== undefined)
{
   targetWindow.document.write(html);
   targetWindow.document.close(); // to finish loading the page
   targetWindow.document.title = targetWindowName;

   //attempt to forcibly update the URL in the history and target window location to fix problem with grid export to excel on Edge browser
   let targetWindowHistoryHref = window.location.href;
   if (oModel.BuildingDesigns !== null && oModel.BuildingDesigns !== undefined && oModel.BuildingDesigns.length > 0) {
       targetWindowHistoryHref += "?oBuildingDesignId=" + oModel.BuildingDesigns[0].ObfuscatedBuildingDesignId + "&BuildingDesignName=" + oModel.BuildingDesigns[0].BuildingDesignName;
   } else {
       targetWindowHistoryHref += "?" + oModel.Target;
   }
   targetWindow.history.pushState(null, null, targetWindowHistoryHref);
}
$.when(
	$.ajax({
		type: "POST",
		dataType: "html", // this is the data type expected to be returned from the controller method
		contentType: "application/json", // this is the content type expected by the controller method
		url: targetUrl,
		data: jsonModel,
		beforeSend: function() {
			console.log(".... submitting report request");
			athena.loader.loading("submitting report request");
		},
		success: function(response) {
			athena.loader.stopLoading();
			if (debugLevel > 2) {
				console.log(".... response = " + response + " : ", response);
			}

			//attempt to populate the target browser tab with the response
			try {
				console.log(".... attempting to open a browser tab and populate it with the HTML response object");
				console.log(".... targetWindow = " + targetWindow);
				//will trigger popup blockers :: targetWindow = window.open("", oModel.Target);
				if (targetWindow !== null) {
					if (response === null || response === undefined) {
						targetWindow.document.body.innerHTML = '';
					} else {
						//completely replace the existing document (not just the innerhtml)
						targetWindow.document.open();
						targetWindow.document.write(response);
						targetWindow.document.close();
						targetWindow.document.title = targetWindowName;
					}
				}
			} catch (ex) {
				// do nothing, just catch when the open fails.
				console.log("error: " + ex.message);
			}
		},
		error: function(jqXhr, textStatus, errorThrown) {
			console.log('.... error :: ajax status = ' + textStatus + ' :: errorThrown = ' + errorThrown);
			console.log('....-- jqXhr.responseText :: \n' + jqXhr.responseText);
		}
	})
).done(
	function() {
		console.log(".... report request has completed");
		targetWindow.focus();
	}
);

Bug report

It was possible to use Html in the Select button message up to R1 2023. The current behavior is a regression in R1 2023 SP2.

Reproduction of the problem

Dojo example: https://dojo.telerik.com/uyuhocUL

Current behavior

No actual Html can be used in the button's message.

Expected/desired behavior

Html can be used in other messages of the Upload, e.g., dropFilesHere, so it should be possible to do it in the Select button message as well.

Environment

• Kendo UI version: 2022.1.425
• jQuery version: x.y
• Browser: [all]

Aren't the files in the /Content/kendo/2023.1.314/ folder KendoUI version files, not MVC version files?

Below is the contents of the file after upgrading to the new version.

I thought it was strange, so I browsed the stylesheet folder of the newly installed version.

The folder contents of the previous version were as follows.

Isn't it a problem with the distributed installation files?

Describe the bug
Column headers do not resize properly in IE11 when scrollable is set to false. Regression introduced in 2021.3.914.

To reproduce
Steps to reproduce the behavior:

1. Go to https://demos.telerik.com/kendo-ui/grid/selection-export?autoRun=true&theme=bootstrap-main

The column headers are squished to the left side.

Expected behavior
Columns headers must have the same width as the respective columns.

Workaround:

.k-ie .k-grid-header {
  display: table-header-group;
}

Affected package (please remove the unneeded items)

• theme-default
• theme-bootstrap
• theme-material

Affected suites (please remove the unneeded items)

• Kendo UI for jQuery

Affected browsers (please remove the unneeded items)

• IE version: 11

Build system information (please remove the unneeded items)

• Not Applicable

Bug report

When we want to add a formula in a given cell in the Spreadsheet, we double-click it and enter the "=" in it as an identifier that a formula definition will follow. If we want to include in the formula a cell that is not inside the visible range of the Spreadsheet, we scroll to that cell and select it. In Internet Explorer, if we scroll to a given cell using the arrows of the Spreadsheet's scrollbar the "double-clicked" cell becomes just a selected one and the "=" sign is converted to a string value.

Reproduction of the problem

1. Open this Dojo example in Internet Explorer 11
2. Select the A1 cell and enter "=" in it.
3. Press the "down" direction arrow of the Spreadsheet trying to reach cell A50.
4. With the first click on the arrow, the A1 cell is no more "double-clicked" and the "=" inside it is converted to a string

Current behavior

When building a formula in a given cell and trying to navigate to a cell using the scrollbar, this usage stops the formula building and converts the "=" into a string.

Expected/desired behavior

When a user creates a formula for a given cell, they should be able to navigate through the Spreadsheet using its scrollbars.

Environment

• Kendo UI version: 2019.2.619
• jQuery version: x.y
• Browser: IE 11.950.17134.0

Bug report
Error is thrown when using Kendo HTML Editor Control in Kendo Grid Popup EditorTemplate in IE only

Reproduction of the problem
Place Kendo editor in Grid popup template
   @(Html.Kendo().Grid<TelerikMvcApp2.Models.Person>().Name("persons")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(m => m.PersonID))
            .Read(read => read.Action("GetPersons", "Home"))
            .Update(up => up.Action("UpdatePerson", "Home"))
    )

    .Columns(columns =>
    {
        columns.Bound(c => c.PersonID).Width(200);
        columns.Bound(c => c.Name);
        columns.Bound(c => c.BirthDate).Format("{0:g}");
        columns.Command(cmd => cmd.Edit());
    })

    .Pageable()
    .Sortable()
    .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Person"))
)
Person.cshtml
            @(Html.Kendo().EditorFor(model => model.Text))

1. Run and open in IE

2. Click edit, make a change in the popup and Save

2. Click again on Edit

https://www.screencast.com/t/kZFZ9hZNEp

Expected/desired behavior
No error is thrown


Environment
Kendo UI version: 2020.3.118

With the latest 2022 release, the grid toolbar seems to be rendering buttons incorrectly.  It is generating them with k-button and k-button-icontext classes only on them.  I don't 100% know this is wrong, but i expected them to render with k-button-solid-base and k-rounded-md classes, and i'm pretty sure i saw docs saying the icontext is not used anymore.

Note:  this is about the mvc wrapper.

I'm not sure if this is a bug but if you leave the size off of a column, it stretches to fill the remaining area.  However I discovered that this does NOT happen if you lock one of your columns.  If you do this, the column doesn't render at all.

there seems to be a bug in your commands column and it's made worse when loading/saving grid layouts.

When i load a page with this grid column definition, 

.Groupable()
                    .Columns(columns =>
                    {
                        columns.Command(cmd => cmd.Custom("Undelete")
                            .Click("undelete"))
                            .Width(60);

when you inspect the grid, the grid internally shows two classes for the command cell:

attributes: {class: 'k-command-cell k-command-cell'}

now, if i apply a grid layout, the problem gets worse.  This sample code will cause the dom to end up with multiple k-command-cell classes on the grid's td element.

$("#UndeleteGrid").data("kendoGrid").setOptions($("#UndeleteGrid").data("kendoGrid").getOptions())

<td class="k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell k-command-cell" role="gridcell"><a role="button" class="k-button k-grid-Undelete" href="#" title="Undelete"><span class="k-icon k-i-undo"></span></a></td>

I load a pdf on a PDFViewer component using loadDefault function, but Open event is not fired.

Also, I want to scroll to the end of the document and for that, I need to retrieve the count of the pages and activate the last page in the render event, even it's called multiple times.

How can I get the count of the pages and scroll to the end of the .pdf document after it is loaded?

    @(Html.Kendo().PDFViewer().Name("documentViewer")
        .PdfjsProcessing(pdf => pdf.File(Url.Content("~/Content/data/default.pdf")))
        .Events(e => e
            .Error("(function(e) { onDocumentViewerError(e); })")
            .Render("(function(e) { onDocumentViewerRender(e); })")
            .Open("(function(e) { onDocumentViewerOpen(e); })")
        )
    )
...
<script type="text/javascript">
...

function loadDefault() {
    var docUrl = window.location.origin + window.location.pathname + "Content/data/default.pdf";

    var pdfViewer = $("#documentViewer").data("kendoPDFViewer");
    pdfViewer.fromFile(docUrl);
 }

onDocumentViewerRender = function(e) {
    console.log("render");

    if (goToEnd) {
         goToEnd = false;

         setTimeout(function () {
              var pdfViewer = $("#documentViewer").data("kendoPDFViewer");
              pdfViewer.activatePage(pagesCount); // how to get pagesCount
         }, 2000);
    }
}

onDocumentViewerOpen = function(e) {
    console.log("open"); // not shown in Console
}
...
</script>

UI Component name doesn't validate if there are spaces being used, (an expression is used for name). When spaces are used it doesn't work and throws no errors at all in web console or visual studio output window.

For example if we use an Telerik expression (like we did) as part of the name it will break if said expression returns a value with a space. Which in hindsight makes 100% sense. I think it would be beneficial to any developers in the future if there was a layer of validation that would check to see if a UI component name has a space in it which will break the component functionality. 

In the Telerik-example.png I showed what the fields Im searching by are and you can see grid 1 is loading (which is correct and will work when I continue through the process) However grid 2 simply shows/outputs nothing in the grid at all, and the name of the grid is the black underlined field. Which is breaking due to the space being there.

Using Kendo through MVC creation. Create any chart with @(Html.Kendo().Chart()) code. Plug in a color into any property: Font.Color, MajorGridLines.Color, Series.Color (line, area, column), ValueAxis.Color etc. The color should be a hex string in the format of #102030. The pound character in here messes up the ToClientTemplate() method or alternatively the parsing of that finished template back on the Kendo scripts.

A workaround is to instead use rgb(16, 32, 48) since the # character is not there.

For now I added this extension method if it helps anyone who stumbles along to this.

public static string ToRgbColor(this string hexColor) {
   var color = ColorTranslator.FromHtml(hexColor);
   if (color.A == 255) {
      return $"rgb({color.R},{color.G},{color.B})";
   }
   else {
      return $"rgba({color.A},{color.R},{color.G},{color.B})";
   }
}

Hi Support,

In the kendo editor html format differs from the browser. please find below screenshot, dojo link and html file imported to editor.

When html file imported to editor there is no space in between the lines.

Same html file opened in chrome browser, then proper spacing can be visible.

Please help to fix the issue asap.

Regards,

Jyotika

When the page first loads, everything looks okay...

But if I show a hidden column...

Here's what happens...

The newly shown column is circled in blue. The problem, as you can see, is that the position of the column circled in red should actually be swapped with the column to the left of it. And column #2 (ordering from left to right in the picture, starting from #1) now has an incorrect parent header ("Average") - it should be "Total". And column #4 (the one circled in red), "Constrained", should have a parent header of "Average" (that gray one in column #2).

And just FYI, if I show another column (which should also be under "Session Time [minutes]")...

...then here's what we get...

(Newly shown column circled in blue.)

But, you can see that the data columns are placed correctly. Just not the headers.

I was try to upgrade Telerik UI for Asp.Net to 2020.2.513 form 2019.3.1023 ,but after I done the upgrade , 

the checkbox in the grid was disappeared with nothing change in my code.

I use the simple function columns.Select(), it seems the <label for='xxx#' class='k-checkbox-label k-no-text'></label>  no been build.

Is there anything I need to do after upgrade ?