To illustrate the probelm I will use a simple example. I'm using the following code in the OnSelect() event handler:
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");var sheet = spreadsheet.activeSheet();
sheet.range(1,5,1,1).select();
The problem is that it never really highlights the correct cell and the cell it does select varies depeding on whether I use the left, right, up or down scroll key to navigate. I'm not sure what is going on under the covers, but I'm guessing that the issue has to do with the fact that the selection was changing from one cell to another before the event was called, therefore, there is some soft of clash or confusion between the two select events.
I use the exact same code when I initalize the spreadsheet and it works perfectly. Inside the event handler though, I cannot figure out what it's doing.
Also, is there any documentation on the arguments that are passed to event handlers. There is a lot of stuff going in there but I cannot find any good documentation on it? I find that the API documentation does not go very deep, especially with events.
1 Answer, 1 is accepted
Hi Daniel,
Thank you very much for the report.
Based on the provided information I logged a Bug report on your behalf in our official Feedback Portal. Below you will find a link to the item.
As a small token of gratitude, I have updated your Telerik points.
Regards,
Neli
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
I checked out a sample from Kendo UI Demos and I found it has the same issue, so this seems to be a bug. Here is the code. I added the part in the changing event to select a cell. When you first run this, the cell it selects will vary deping on whether you use the left, right, up or down arrows. In any case, it never goes to the correct one. If you use the same code in the change event, it seems to work.
<!DOCTYPE html><html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js"></script>
</head>
<body>
<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet();
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
var sheet = spreadsheet.activeSheet();
sheet.bind("changing", function() {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("sheet state changed");
var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
var sheet = spreadsheet.activeSheet();
sheet.range("B2").select();
});
sheet.range("A1:B2").values([ [1, 2], [2, 3] ]);
</script>
</body>
</html>