Morning, 

As my title suggests I've surrounded a few elements on my page with a KendoUI Panel (k-block), but the panels is affecting the contents. Heres a Dojo showing what I mean, http://dojo.telerik.com/uHiHixiV.

My questions are;
1) Why are the elements enlarged slightly, namely the widgets?
2) Why are the kendoUI widgets underlined?
3) Why does the Time widget suddenly stretch to the length of the panel?

Any advice would be appreciated.

Thanks and kind regards, 
Grant

Hi everyone,

I'm using a stacked bar chart and is not rendering correctly, there're missing bars (attachment 1)

2 Questions:

1.- When I set tool tip shared to true, the next error is shown in console:

Uncaught TypeError: Cannot read property 'toRect' of undefined
    at init.createHighlight (kendo.all.js:156672)
    at init.toggleHighlight (kendo.all.js:146628)
    at init.togglePointHighlight (kendo.all.js:161066)
    at init.show (kendo.all.js:161043)
    at init._trackSharedTooltip (kendo.all.js:165450)
    at init._mousemove (kendo.all.js:165416)
    at o (kendo.all.js:3210)

2.- My code is the next, why does the bars are not rendering correctly?:

$("#chart").kendoChart({
                        title: {
                            text: "Tests"
                        },
                        legend: {
                            position: "bottom"
                        },
                        series: [data.series.ABC, data.series.Serie1, data.series.Serie2, data.series.Serie3],
                        valueAxis: [{
                            name: "abc",
                            title: {
                                text: "ABC"
                            },
                            min: 0,
                            max: 100,
                        }, {
                            name: "units",
                            type: "log",
                            title: {
                                text: "Units"
                            }
                        }],
                        categoryAxis: {
                            categories: data.categories,
                            axisCrossingValue: [0, data.categories.length + 1],
                            labels: {
                                visible: true,
                                rotation: 90
                            },
                            crosshair: {
                                visible: true
                            }
                        },
                        tooltip: {
                            visible: true,
                            shared: true
                        }
                    });

The length of the series is the same, and the series are the next (json formatted):

ABC:
color:"#555"
data:(49) [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 99, 99, 98, 98, 98, 98, 97, 97, 97, 96, 95, 93, 92, 91, 89, 88, 88, 88, 85, 84, 83, 82, 80, 80, 79, 78, 76, 66, 55, 50, 8, 0, 0, 0, 0, 0]
name:"ABC"
tooltip:{visible: true, template: "#= value #"}
type:"line"

Serie1:
axis:"units"
color:"#ffacaa"
data:(49) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 11, 1, 3, 5, 2, 7, 3, 3, 3, 6, 19, 8, 13, 29, 2, 6, 8, 13, 4, 4, 1, 15, 3, 18, 2, 31, 3, 22, 1, 2, 7, 4, 1]
name:"Serie1"
stack:true
tooltip:{visible: true, template: "#= value #"}
type:"bar"

Serie2:
axis:"units"
color:"#aaffb3"
data:(49) [20, 20, 185, 38, 4, 40, 21, 66, 73, 107, 3, 15, 14, 216, 149, 71, 778, 66, 182, 240, 80, 242, 81, 70, 44, 79, 194, 71, 103, 220, 15, 34, 45, 67, 19, 16, 4, 58, 11, 60, 4, 39, 3, 2, 0, 0, 0, 0, 0]
name:"Serie2"
stack:true
tooltip:{visible: true, template: "#= value #"}
type:"bar"

Serie3:
axis:"units"
color:"#4286f4"
data:(49) [20, 20, 185, 38, 4, 40, 21, 66, 73, 107, 3, 15, 14, 217, 150, 72, 789, 67, 185, 245, 82, 249, 84, 73, 47, 85, 213, 79, 116, 249, 17, 40, 53, 80, 23, 20, 5, 73, 14, 78, 6, 70, 6, 24, 1, 2, 7, 4, 1]
name:"Serie3"
stack:true
tooltip:{visible: true, template: "#= value #"}
type:"bar"

Hi , I have attached the sample code snippet of the problem.

The requirement is that grid will automatically select the drop down option based on server response as I already have a separate list of possible options at client side also ( drop down editor data source ) , this seems to work fine , but in certain scenario server will send blank/"" which means server doesn't have the data for this field and we need to correct at client side  by populating "please select an option" to and then user can select the other option. Now the problem is that when I change the selection of  last record ( the record which has blank/null) and then try to select drop down of some other row then its not allowing me to open the drop down of other row until and unless I fix the last column value .

http://jsbin.com/hegajixuse/1/edit?html,js,output

Below are the steps to reproduce - 

   * select last  record ( 4th record) dropdown 

    * 4th record - change selection to Apples

   *4th record change the selection back to "please select an option"

  * Now try to open any other drop down ( record 1/2/3 ) , screen wont allow me to open the dropdown of record1/2/3 until and unless I change the record 4 selection to something else from "please select and option"

Hi there! I'm having a problem with my wicks going through my candles. I wanted to change the color of them so it wouldn't show up but I can't find a setting for that either. Do you have any advice you can offer? I'm attaching a screenshot.

Thanks!

Michael

I have data that looks like this coming out of SQL Server and being returned to my UI via JSON

OrderCount | SubmittedDate | OrderStatus

5                  | 05/01/2018       | Hold

1                  | 05/02/2018       | In Process

1                  | 05/02/2018       | Pending

What I am trying to achieve is to have a chart that displays the order status count by day so

• along the X-Axis I want to see 05/01/2018 and 05/02/2018 (SubmittedDate)
• along the Y-Axis I want to see Order Counts
• and the values for each bin would be the various statuses 

So with my example data I would expect to have a bin for 05/01/2018 that shows a column that represents my hold status that indicates a count of 5.  On 05/02/2018 I would expect the bin to have 2 columns: a column with a count of 1 for In Process and a column with a count of 1 for Pending.  I haven't been able to figure out how to configure the chart to make this work properly and, something else that is weird, the chart only displays one of the data points for 05/02 regardless of how I manipulate the code. 

If it matters the date field is represented as MM/dd/yyyy in the JSON object. Any help would be greatly appreciated!  

Hello

 I am working on Including KendoSortable in my Kendo UI Grid. I am able to add it on a radio button select event (as below). 

 http://demos.telerik.com/kendo-ui/sortable/integration-grid

 This is how I am able to add it:

 currentGrid.table.kendoSortable({
                filter: filter,
                cursor: "move",
                ignore: ignore,
                hint: $.noop,
                //hint: function (element) { //customize the hint
                //    return element.clone().addClass("hint");
                //},
                placeholder: function (element) {
                    return element.clone().addClass("k-state-hover").css("opacity", 0.65);
                },...............

 How can I remove it and re-add it dynamically, say on addSortable and removeSortable radio button click events.

Thanks.

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:

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?