In case others have the issue, I have posted my question on Stack Overflow.
https://stackoverflow.com/questions/60724995/kendoui-for-jquery-chart-databound-event-does-not-work
Here's a simplified example of my data:
[{"Name": "Bob", "Count":3}, {"Name": "Steve", "Count":5}]What I want is a chart title of: Total FOO: 8. So the title must be based on the data. The data is AJAX and this is an ASP.MVC application.
In my CSHTML I have:
.DataSource(ds => ds.Read(read => read.Action("MeMethodName", "MyControllerName"))).Events(events => events.DataBound("setChartTitle('chartName', 'Total FOO')"))Here's the crazy hack I had to do:
function setChartTitle(name, title) { let chart = $("#" + name).data("kendoChart"); if (chart) { let ds = chart.dataSource; let total = 0; for (let i = 0; i < ds.data().length; i++) { total += ds.data()[i].Count; } chart.options.title.text = title + ": " + total; chart.refresh(); } else if (arguments.length < 3) { // Data source was not found and this was initiated through Kendo. Wait and try again but only once setTimeout(function () { sumEntityCount(name, title, "stop"); }, 500); } }
This is really bad.
1. Accessing the kendoChart returns undefined, yet the chart itself called this. This is why I need to check if (chart) above.
2. This leads to a hacky ELSE block I added where I can call this again with a 500 ms delay. This alone is a bug as 500ms is a random number and may not be enough. I can't ship like this.
3. To prevent recursion I call the same function with a different parameter.
4. If the values are found, then I can't just set the chart options. I need to call refresh which redraws everything.
Questions:
1. Why is the kendoChart data undefined initially? Why has Telerik called dataBound when there's nothing there?!
2. Isn't there a dataBinding event? I don't want to do this after the fact nor do I want to refresh the whole thing.
@Html.AntiForgeryToken()@(Html.Kendo().Grid<UniTech.ICAP.Extranet.Web.Models.ActivityViewModel.ActivityListItem>(Model.ActivityList) .Name("Grid") .Columns(columns => { columns.Bound(i => i.UserName); columns.Bound(i => i.ActionString).Filterable(filterable => filterable.UI("actionFilter")); columns.Bound(i => i.ItemString); columns.Bound(i => i.RepositoryString); columns.Bound(i => i.ActionDate).Title("Date").Width(150).Format("{0:dd MMM yyyy HH:mm}"); }) .Sortable() .Filterable(filterable => filterable .Extra(false) .Operators(operators => operators .ForString(str => str.Clear() .StartsWith("Starts with") .IsEqualTo("Is equal to") .IsNotEqualTo("Is not equal to") )) ) .Resizable(resize => resize.Columns(true)) .DataSource(datasource => datasource.Ajax().ServerOperation(false).Read(read => read.Action("ActivityGridRead", "Admin"))) .Pageable(p => p.PageSizes(new[] { 10, 50, 100 }).Enabled(true)) )$(function () { var grid = $("#Grid").data("kendoGrid"); grid.dataSource.transport.options.read.beforeSend = function (req) { var header = $('[name=__RequestVerificationToken]').val(); req.setRequestHeader('__RequestVerificationToken', header); };});if (request.IsAjaxRequest()){ var antiForgeryCookie = request.Cookies[AntiForgeryConfig.CookieName]; var cookieValue = antiForgeryCookie != null ? antiForgeryCookie.Value : null; AntiForgery.Validate(cookieValue, request.Headers["__RequestVerificationToken"]);}var grid = $("#Grid").data("kendoGrid").dataSource.read();Hi,
Extra li tag shows up when I select a page number.
Thanks,

I have an upload system in my .Net Core site that allows for a user to upload as many files as they want at a time. The files are uploaded directly to an S3 bucket and then processed. The problem is that when uploading, lets say 1,000 files, the browser does not like to create that many connections and more often than not, files routinely fail to upload. Even with retries enabled, those retries tend to fail since the browser only allows a certain number of concurrent connections.
What I am looking to do is place the files into a queue and only allow 20 files to be actually uploading at any given time (Think of how FileZilla queues items to upload). When a file completes, a new files is added until the queue is exhausted. I already have it so `AutoUpload` is set to `false` and I can place the files into an array to process but the `uploadSelectEvent.sender.upload()` method enables upload for everything.
Is there a way to pause all the uploads prior to enabling the upload so I can then resume them as needed? Is there a better way to handle this?

this.spreadsheet.activeSheet().range(3,2,1,1).select();this.spreadsheet.activeSheet().range(3,2,3,3).select();core.js:6014 ERROR TypeError: e.toRangeRef is not a function<br> at init.activeCell (kendo.all.min.js:sourcemap:98)<br> at init.select (kendo.all.min.js:sourcemap:98)<br> at init.select (kendo.all.min.js:sourcemap:98)<br> at init.select (kendo.all.min.js:sourcemap:97)<br> at SafeSubscriber._next (prgx-lib.js:9946)<br> at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)<br> at SafeSubscriber.next (Subscriber.js:122)<br> at Subscriber._next (Subscriber.js:72)<br> at Subscriber.next (Subscriber.js:49)<br> at Subject.next (Subject.js:39)
Hello, I have a problem with chart rendering after scale parent container of chart.
Example is presented in dojo: https://dojo.telerik.com/aqEdofAZ
I am transforming chart parent container with code below, chart is looking great but there is something wrong with mouse events. It looks like mouse events are pinned to non transformed chart. For example mouse hover on 2006 (green line) selects 2004 (green line). I tried to refresh and redraw chart but nothing changed. Can you help me with this case?
$(".demo-section").css({
'transform': 'scale(0.5)',
'-ms-transform': 'scale(0.5)',
'-moz-transform': 'scale(0.5)',
'-webkit-transform': 'scale(0.5)',
'transform-origin': '0 0',
'-ms-transform-origin': '0 0',
'-moz-transform-origin': '0 0',
'-webkit-transform-origin': '0 0'
});


Do we have any feature for below requirement please confirm..
Initially will load like 10 items (we have around 100+ items )
and then as we scroll through the 10 items and come to the end, will automatically load 10 more items
I tried what I thought was a pretty basic use of the observables: binding a numeric text box to a value, and then using that value in the datasource. However, it does not work. I'm wondering if what I'm trying to do is possible and I'm just doing it wrong, or if what I'm trying to do isn't possible. Here's a dojo, and the code is below as well.
<div id="example"> <div class="demo-section k-content wide"> <div class="box"> <input id="Value1NumericTextBox" data-role="numerictextbox" data-format="c0" data-decimals="0" data-bind="value: Value1, events: { change: ValueChange }" data-min="0" /> <input id="Value2NumericTextBox" data-role="numerictextbox" data-format="c0" data-decimals="0" data-bind="value: Value2, events: { change: ValueChange }" data-min="0" /> </div> <div> <div id="chart1" data-role="chart" data-series-defaults="{ type: 'line' }" data-series="[ {field: 'amount'} ]" data-bind="source: values" style="height: 200px;" ></div> </div> </div><script> (function() { var viewModel = kendo.observable({ Value1: 10, Value2: 20, ValueChange: function(e) { var chart = $("#chart1").kendoChart(); chart.refresh(); }, values: new kendo.data.DataSource({ data: [ { amount: function() { return this.get("Value1"); } }, { amount: function() { return this.get("Value2"); } } ] }) }); kendo.bind($("#example"), viewModel); })();</script></div>