Questions on Kendo UI for jQuery Forum

2 answers

260 views

I have a chart that uses series data (no dataSource). I also have a dropdown that has time ranges that I use to filter the data.

The chart is configured as the following:

this.chartConfiguration = {

title: "Weight Chart",

renderAs: "canvas",

series: [

{

data: dataPoints.map(dp => dp.value),

field: "value",

type: 'column',

color: "#ff1c1c",

axis: "weight",

markers: {

visible: false

}

],

pannable: true,

zoomable: false,

valueAxis: [

{

name: "weight",

color: "#000000",

title: { text: "lbs" },

labels: {

format: "n"

}

],

tooltip: {

visible: true,

format: '{0}',

template: '${value} lbs'

},

categoryAxis: {

categories: dataPoints.map(dp => moment(dp.date).format("MM/DD/YY")),

max: 15,

labels: {

rotation: "auto"

}

};

}

InitialWeightChartData.png is how the chart looks like after initial page load

When drop down is selected do filtering and other stuff with the following code:

let threeMonths = moment().subtract(90, "days");

let filtered = this.filterDataPointsByDateRange(this.allDataPoints, moment(), threeMonths);

let weightDataPoints = this.configureWeightDataPoints(filtered);

//this.chartConfiguration.dataSource.data(weightDataPoints.map(dp => dp.value));

//this.chartConfiguration.series[0].data = weightDataPoints.map(dp => dp.value);

//this.detailsChart.options.series[0] = this.configureWeightSeriesDataPoints(filtered);

this.handler(filtered, moment(), threeMonths);

this.detailsChart.options.categoryAxis = this.chartConfiguration.categoryAxis;

this.detailsChart.options.series[0].data = weightDataPoints.map(dp => dp.value); // this.chartConfiguration.series;

//this.detailsChart.dataSource.read();

this.detailsChart.refresh()

InitialWeightChartAfterFilteringDatesHaveChanged.png is how it looks after the refresh. Notice the dates have changed by

this.detailsChart.options.categoryAxis = this.chartConfiguration.categoryAxis;

this.detailsChart.options.series[0].data = weightDataPoints.map(dp => dp.value); seems to be the problematic line

I've also done this.detailsChart.options.series = this.chartConfiguration.series; which doesn't worker either

the line this.handler(filtered, moment(), threeMonths) actually goes through and configures the chart options again as shown in the first code block

the below code appears to work as can seen by the second screen shot....the dates have changed

1.categoryAxis: {

2. categories: dataPoints.map(dp => moment(dp.date).format("MM/DD/YY")),

3. max: 15,

4. labels: {

5. rotation: "auto"

6. }

Thanks

Charts

answered on 18 Jul 2016

1 answer

382 views

Gantt and weekdays

Hello!

I’m using the kendo Gantt as an angular directive and I need to define a range of week days to be displayed on my Gantt. Example: I want to display always from Wednesday to Saturday of the week, for example.

I know that If I set the properties showWorkDays: true, It will be displaying days by default Monday to Friday (excluding Saturday and Sunday as weekends).

But the problem is, I just want to display an specific range of weekdays,
Starting by, for example, Wednesday and ending on Saturday ( not Monday to Friday). I saw that in JSP, it’s possible to use workDayStart and workWeekEnd properties to define this range, based on weekday index.

And I saw also here in the forum, that is possible to set that start day of the week, doing this : kendo.culture().calendar.firstDay = 3 before the Gantt loads (which is working fine for me), but I couldn’t find nothing to set the lastDay of the week.

The question is: how do I set the lastDay? I tried different things and nothing worked. I need to define something similar to the workDayStart and workWeekEnd to the gantt angular directive.

Thank you

Gantt

answered on 18 Jul 2016

3 answers

145 views

Chart become black when url has query param with '('

I am using chart type bar and pie. When the theme is the default theme (series are not flat but has the glowing effect) the url is entered into the fill attribute.
If the url has query param with the char '(' all series become black.

See attached screenshot.

Please advice

Charts

answered on 18 Jul 2016

1 answer

326 views

Multi Drop Down with ToolTip

Hello,

We are looking for a way to do a tooltip on the drop down list so we can have additional information on an item. Is this possible?

DropDownList

answered on 18 Jul 2016

1 answer

166 views

Loading Kendo js file locking UI thread

Has anyone has issues with kendo js blocking the UI thread on the browser?

I have a loading indicator that I show until the grid is ready to load. When the browser starts to load "kendo.web.min.js" it locks the UI thread and the gif stops briefly until the browser loads the js file (usually around 1.5 seconds for the 2mb file).

It's not that big of a deal but when the gif freezes it looks like garbage.

Any ideas?

General Discussions

answered on 18 Jul 2016

1 answer

179 views

Catch empty cells

Hello,

I was using the below code to get the empty cells with no events in it .But not working exactly.

http://dojo.telerik.com/oguzU

If i even select an empty cell it says it has event in it.

Can i get a solution for this.

Scheduler

answered on 18 Jul 2016

1 answer

545 views

Hierarchical DropDownList

Hi,

I am looking for a Dropdown list with a tree view(Multi level). Please let me know how can we achieve this in Kendo.

Thanks.

Thanks

Asmita Singh

DropDownList

answered on 18 Jul 2016

4 answers

740 views

Forcing loading image when expanding nodes

Hi,

I have implemented some code in the expand function of the treeview to be able to add childeren nodes to a node. The problem I'm facing is that adding the childeren can take some seconds and in the meantime the tree does not show the loading gif. I have looked at the demos provided on the kendoui website. When you use the Binding to remote data example you can see that a loading image is displayed instead of the arrow for the duration of the populating event. I need to implement code that allows this image to be shown in my example.

I have created a fiddle with a javascript sleep for 5 seconds to simulate the time it takes to add the childeren. The fiddle can be found at:

http://jsfiddle.net/cgkzR/4/

Thanks in advance for everyone's time and effort on this one.

TreeView

answered on 18 Jul 2016

1 answer

123 views

Slot template with input - input can't be unfocused

Hello,

I have modified this example working with slot template:

http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/set-slot-background-color-using-slot-templates

The modification was to add an input into the slot template, so the slot template looks like this:

"<div style='background:#=getColorBasedOnHour(date)#; height: 100%;width: 100%;'><input/></div>"

When I click in the input, it receives focus. However, when I click somewhere else in the scheduler, the input is still focused. To unfocus the input, I have to click outside the area of the scheduler.

I want to unfocus the input when I click somewhere inside the scheduler. Is it possible?

Thanks for answers,

Boris

Scheduler