Hi,
How can I customize the diagram background? I would like to draw some horizontal bands with custom size, specific background colour and border to separate the diagram boxes levels. I would like to achieve something like "https://www.telerik.com/products/winforms/diagram.aspx" in section "Shapes, Container Shapes and Connections". On that page we have a sample with separation for "First Game", "Second Game" etc.
Hello.
I pulled Kendo down from npm however webpacking kendo.all.js results in a 3MB file so I would prefer to only pack the controls that my application is going to utilize. I found this link which shows all of the script dependencies so, the chart for example, I assume I could pack that up like:
const path = require('path');module.exports = { entry: './node_modules/@progress/kendo-ui/js/kendo.dataviz.chart.js', output: { filename: 'kendo.js', path: path.resolve(__dirname, 'wwwroot/js') }};
but what is the preferred approach to bundling multiple controls?

Hi.
We're using multiple Kendo UI Editor controls on a page. Each editor control have a custom toolbar set.
We're experiencing quite a slow load.
Here's an example with 4 editor controls. Using the Chrome Performance tool, it takes an estimated 4-5 seconds to load the empty controls. Sometimes as much as 8 seconds.
https://dojo.telerik.com/aMUcArob
We're running Kendo UI 2018 R1. But switching to the later versions doesn't seem to make a difference.
What can we do to speed up the controls? Is this what should be expected?

Hi,
Is it possible to configure the "HorizontalSeparation" between diagram elements (shapes) for every diagram level?
If parent diagram element is wide and all it's childs are not so wide, then parent elements are overlapping.
Example with this problem can be found here: https://dojo.telerik.com/erAFiwIB/2
Hello!
I would like to display the chart every 2,000 ms (with animation).
Is there a way?

Hi Team,
I am using attribute for column definition like below and giving class for entire column. But not getting how to give cell class based on condition like for index 3 I wanted class for particular column cell.
attributes: { "class": "my-class"},
Thanks in Advance,
Jose

$("#Grid").kendoGrid({ magicalThemePropertyThatDoesntExist: default;Is it possible to affect data asynchronicaly (ajax) that is used by kendo.observable object?
With below code `cart.add()` function is triggered and `cart.contents` variable is updated, but this not affect the template and not refreshing data used by template. I'm expecting that changing cart.contents changes data used by template, like text: quantity and text: itemPrice
template script 1:
<script type="text/x-kendo-template" id="cart-preview-template">
<div id="shop-info" data-bind="attr: { class: cartContentsClass }">
<ul data-role="listview" data-bind="source: cart.contents" data-template="cart-item" id="shop-list"></ul>
<div id="shopping-cart">
<p class="total-price" data-bind="html: totalPrice"></p>
<a id="empty-cart" href="#" data-bind="click: emptyCart">empty cart</a>
</div>
</div>
</script>
template script 2:
<script type="text/x-kendo-template" id="cart-item">
<li class="selected-products-list">
<a data-bind="click: removeFromCart" class="view-selected-items">
<img data-bind="attr: { src: imageSource, alt: imageAlt }"
/>
</a>
<span data-bind="text: quantity"></span>
<span data-bind="text: itemPrice"></span>
</span>
</li>
</script>
model:
var cartPreviewModel = kendo.observable({
cart: cart,
cartContentsClass: function () {
return this.cart.contentsCount() > 0 ? "active" : "empty";
},
removeFromCart: function (e) {
this.get("cart").remove(e.data);
},
emptyCart: function () {
cart.empty();
},
itemPrice: function (cartItem) {
return kendo.format("{0:c}", cartItem.item.unitPrice);
},
imageSource: function (cartItem) {
var baseUrl = "{{ absolute_url(asset('images/products/')) }}";
return baseUrl + cartItem.item.image;
},
imageAlt: function () {
return "Product image";
},
totalPrice: function () {
return this.get("cart").total();
},
});
cart - object observable used by above cartPreviewModel :
var cart = kendo.observable({
contents: [{"item":"productID":1,"unitPrice":"111.00","image":"5.jpg"},"quantity":1}],
add: function (item) {
$.ajax({
type: 'POST',
url: '{{ path('add_product') }}',
dataType: 'json',
data: {'item': JSON.stringify(item)},
success: function (cart) {
// original code:
// this.contents = cart;
// code for testing:
this.contents = [{"item":{"productID":1,"unitPrice":"111.00","image":"5.jpg"},"quantity":1},{"item":{"productID":2,"unitPrice":"999.00","image":"8.jpg"},"quantity":1}];
},
});
},
binding model and template:
kendo.bind($("#shop-info"), cartPreviewModel);
Once again, With above code `cart.add()` function is triggered and `cart.contents` variable is updated but this not affect the template and not refreshing data used by template.

Hi Team,
I am using column menu in grid toolbar and storing column state on local-storage. Whenever page reload I am getting the grid options from local storage using below code.
var grid = $("#myGrid").data("kendoGrid");
var options = localStorage.getItem("kendo-grid-myGrid");
if (options) {
grid.setOptions(JSON.parse(options));
}
I am using row editable as popup with template. In this template I am using some kendo drodpdown and a custom window scroll.
Once the setOptions called drop drown source and window scroll is not working. Any help on this.
Thanks in Advance
Jose