Develop Reference

Kendo scheduler custom view doesn't get the right class when selected

I am currently working on a kendo scheduler.
I was asked by my client to implement a 3-days view, which I successfully did, but there is one problem : that custom view does not get the "k-state-selected" class when it is selected, which means it can't be fully stylized.
I failed to find why that could be the case : none of the examples for creating a custom time view I found mentionned anything about defining the class the view takes when selected, and furthermore, it does get the "k-state-hover" class when hovered. Strange.
Here's the (I think) relevant JS :
var ThreeDayView = kendo.ui.MultiDayView.extend({
nextDate: function () {
return kendo.date.nextDay(this.startDate());
},
options: {
selectedDateFormat: "{0:D} - {1:D}"
},
name: "ThreeDayView",
calculateDateRange: function () {
//create a range of dates to be shown within the view
var start = this.options.date,
idx, length,
dates = [];
for (idx = 0, length = 3; idx < length; idx++) {
dates.push(start);
start = kendo.date.nextDay(start);
}
this._render(dates);
}
});
$("#scheduler").kendoScheduler({
date: new Date(), // The current date of the scheduler
showWorkHours: true,
height: 600,
views: [
"week",
{ type: ThreeDayView, title: "3 Jours", selected: false },
"day"
],
editable:
{
resize: true,
move: true,
template: $("#templateEdition").html()
},
dataSource: finalSource,
add: onAdd,
edit: onUpdate,
remove: onDelete,
save: onSaving
})
});
Does anyone have any idea why that might be ?
Thanks !

The type or the view should be a string - the name of the custom view - "ThreeDayView" (instead of ThreeDayView) in this case.

Prevent click event in angular nvD3 Stacked Area Chart

I'm trying to prevent the default behavior when I click on the angular-nvD3 Stacked Area Chart. I managed to access the onclick function, but I don't know how to prevent the event (modifies the graphic) from happening. I don't want the graphic to change when the user clicks on it.
.js:
$scope.stackedAreaChartOptions = {
chart: {
type: 'stackedAreaChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 30,
left: 40
},
x: function(d){return d[0];},
y: function(d){return d[1];},
useVoronoi: false,
clipEdge: true,
duration: 100,
useInteractiveGuideline: true,
xAxis: {
showMaxMin: false,
tickFormat: function(d) {
return d3.time.format('%H:%M')(new Date(d))
}
},
yAxis: {
tickFormat: function(d){
return d3.format(',.2f')(d);
}
},
zoom: {
enabled: false,
scaleExtent: [1, 10],
useFixedDomain: false,
useNiceScale: false,
horizontalOff: false,
verticalOff: true,
unzoomEventType: 'dblclick.zoom'
},
//chart events
stacked: {
dispatch: {
areaClick:
function (t,u){ null; console.log("areaClick");}
,
areaMouseover:
function (t,u){ null; console.log("areaMouseover");}
,
areaMouseout:
function (t,u){null; console.log("areaMouseout");}
,
renderEnd:
function (t,u){null; console.log("renderEnd");}
,
elementClick:
function (t,u){null; console.log("elementClick");}
,
elementMouseover:
function (t,u){null; console.log("elementMouseover");}
,
elementMouseout:
function (t,u){ null;console.log("elementMouseout");}
}
},
controlLabels: {stacked:"Absoluto", expanded:"Relativo"},
controlOptions:
[
"Stacked",
false,
"Expanded"
]
},
title: {
enable: true,
text: '',
css: {
'font-weight': 'bold'
}
},
caption: {
enable: true,
html: 'Visualización por horas de acceso a noticia',
css: {
'text-align': 'center',
'margin': '2px 13px 0px 7px',
'font-style': 'italic'
}
}
};
HTML:
<nvd3 options="stackedAreaChartOptions" data="stackedAreaChartData" api="api"></nvd3>
When I click on the graphic, the messages (console.log) are being shown, but I need to prevent the click event from happening.

I know this is an old question, but I run into this problem for my project and here is how I solved it.
It seems it's not possible to disabled these events using angular-nvd3. You must disable them using NVD3.
Get the chart api object available on your angular-nvd3 chart and disable the events on the chart object binded to this api:
HTML
<nvd3 options="options" data="data" api="chartAPI"></nvd3>
Javascript
$timeout( function() {
if ($scope.chartAPI) {
var chart = $scope.chartAPI.getScope().chart;
chart.stacked.dispatch.on('areaClick.toggle', null);
chart.stacked.dispatch.on('areaClick', null);
}
}, 1000);
I made a timeout be sure to have the chartAPI when doing the changes.
Note : It seems you have to disable these events again when you update or refresh the chart (chart.refresh()).
Working example here: https://codepen.io/mvidailhet/pen/JNYJwx
It seems there is a glitch in the chart update on Codepen, but you get the point :)
Hope it helps!

You were close. CSS pointer-events:none; has the disadvantage that it turns off every pointer event (most importantly hover, mouseenter and mouseout).
So IMHO you should avoid to use it.
Actually you were close. You should not pass an it-does-nothing function but null or undefined instead to options.chart.stacked.dispatch.areaClick. Like this:
//chart events
stacked: {
dispatch: {
areaClick: void 0
}
}
I had this very same problem and spent more than an hour to find it out.
EDIT
Turned out that I was wrong. It solved just because it ran into an error that prevented the event. So you can throw an error and everything is fine... :)
Also found a workaround but that causes memory leak, so I'll not share that.
My solution was: accept that it applies click event and hides all other layers. Too small issue to invest more time and effort in it.

Plotly hover text not displaying

Although I've specified text and hoverinfo, I'm not getting any hover annotation at all.
If I comment out the "text" attribute, I get the default behavior of hoverinfo: "x+y". I've also tried hoverinfo: "text" and hoverinfo: "x+text" (which is what I really want), but these do not change the behavior.
https://jsfiddle.net/abalter/0cjprqgy/
var data =
{
"x":["2014-02-10 00:00:00.0","2014-02-18 00:00:00.0","2014-02-24 00:00:00.0"],
"y":[0,0,0],
"text":["gemcitabine","gemcitabine + Abraxane","Xeloda"],
"hoverinfo": "all",
"name":"Treatment",
"type":"scatter",
"mode":"markers",
"marker":
{
"size":9,
"color":"#800000"
},
"uid":"c2e171"
};
var layout =
{
"title":"Treatments",
"height":600,
"width":655,
"autosize":true,
"yaxis":
{
"titlefont":
{
"size":12,
"color":"#800000"
},
"domain":[0.85,0.9],
"showgrid":false,
"showline":false,
"showticklabels":false,
"zeroline":true,
"type":"linear",
"range":[0,0],
"autorange":true
},
"hovermode":"closest",
"xaxis":
{
"type":"date",
"range":[1389215256994.8186,1434909143005.1814],
"autorange":true
}
};
Plotly.plot('graph', [data], layout);

First of all, thank you for having me to discover this really cool graphic platform! I checked at the documentation to get to know how the data has to be formatted (here: https://plot.ly/javascript/hover-events/#coupled-hover-events-on-single-plot)... And "played" with you fiddle.
First, I removed all the unnessessary double quotes you had there, wrapping the param names and placed your value arrays outside of the "data" array. I don't know if it is part of the problem... I just tryed to format it as the example I found.
The "x+y+text" suddenly appeared when I played with the "domain" parameter.
I don't know what it really defines.
I repeat, I have a 10 minutes experience with this thing. (lol)
Check this update I made of your fiddle : https://jsfiddle.net/0cjprqgy/6/
var dates = ["2014-02-10 00:00:00.0","2014-02-18 00:00:00.0","2014-02-24 00:00:00.0"],
qty = ["0.2","0.5","1"],
product = ["gemcitabine","gemcitabine + Abraxane","Xeloda"],
data =
{
x:dates,
y:qty,
text:product,
hoverinfo: "x+y+text",
name:"Treatment",
type:"scatter",
mode:"markers",
marker:
{
size:9,
color:"#800000"
},
uid:"c2e171"
};
var layout =
{
title:"Treatments",
height:600,
width:655,
autosize:true,
yaxis:
{
titlefont:
{
size:12,
color:"#800000"
},
domain:[0.85,1.9],
showgrid:false,
showline:false,
showticklabels:false,
zeroline:true,
type:"linear",
range:[0,0],
autorange:true
},
hovermode:"closest",
xaxis:
{
type:"date",
range:[1389215256994.8186,1434909143005.1814],
autorange:true
}
};
Plotly.plot('graph', [data], layout);

Set default focus on first item in grid list

Once a grid is rendered how can I set focus to the first item. I am running into a problem where when the grid is updated (collection changes) then focus is lost for the entire application .
I am using the moonstone library.
{
kind: "ameba.DataGridList", name: "gridList", fit: true, spacing: 20, minWidth: 300, minHeight: 270, spotlight : 'container',
scrollerOptions:
{
kind: "moon.Scroller", vertical:"scroll", horizontal: "hidden", spotlightPagingControls: true
},
components: [
{kind : "custom.GridItemControl", spotlight: true}
]
}

hightlight() is a private method for Spotlight which only adds the spotlight class but does not do the rest of the Spotlight plumbing. spot() is the method you should be using which calls highlight() internally.
#ruben-ray-vreeken is correct that DataList defers rendering. The easiest way to spot the first control is to set initialFocusIndex provided by moon.DataListSpotlightSupport.
http://jsfiddle.net/dcw7rr7r/1/
enyo.kind({
name: 'ex.App',
classes: 'moon',
bindings: [
{from: ".collection", to: ".$.gridList.collection"}
],
components: [
{name: 'gridList', kind:"moon.DataGridList", classes: 'enyo-fit', initialFocusIndex: 0, components: [
{kind:"moon.CheckboxItem", bindings: [
{from:".model.text", to:".content"},
{from:".model.selected", to: ".checked", oneWay: false}
]}
]}
],
create: enyo.inherit(function (sup) {
return function () {
sup.apply(this, arguments);
// here, at least, the app starts in pointer mode so spotting the first control
// isn't apparent (though it would resume from that control upon 5-way action).
// Turning off pointer mode does the trick.
enyo.Spotlight.setPointerMode(false);
this.set("collection", new enyo.Collection(this.generateRecords()));
};
}),
generateRecords: function () {
var records = [],
idx = this.modelIndex || 0;
for (; records.length < 20; ++idx) {
var title = (idx % 8 === 0) ? " with long title" : "";
var subTitle = (idx % 8 === 0) ? "Lorem ipsum dolor sit amet" : "Subtitle";
records.push({
selected: false,
text: "Item " + idx + title,
subText: subTitle,
url: "http://placehold.it/300x300/" + Math.floor(Math.random()*0x1000000).toString(16) + "/ffffff&text=Image " + idx
});
}
// update our internal index so it will always generate unique values
this.modelIndex = idx;
return records;
},
});
new ex.App().renderInto(document.body);

Just guessing here as I don't use Moonstone, but the plain enyo.Datalist doesn't actually render its list content when the render method is called. Instead the actual rendering task is deferred and executed at a later point by the gridList's delegate.
You might want to dive into the code of the gridList's delegate and check out how it works. You could probably create a custom delegate (by extending the original) and highlight the first child in the reset and/or refresh methods:
enyo.Spotlight.highlight(this.$.gridList.childForIndex(0));

Ruben's answer adds on to my answer that I posted in the Enyo forums, which I'm including here for the sake of completeness:
Try using
enyo.Spotlight.highlight(this.$.gridList.childForIndex(0));
I added a rendered() function to the Moonstone DataGridList sample in the Sampler and I found that this works:
rendered: function() {
this.inherited(arguments);
this.startJob("waitforit", function() {
enyo.Spotlight.highlight(this.$.gridList.childForIndex(0));
}, 400);
},
It didn't work without the delay.

Dojo Dgrid - canedit on filteringselect

I have a dgrid assigned to a REST service with JSON.
It works fine.
I have a filterselect in one of the columns.
The filterselect is populated from another dojo store.
My question is, how can I disable the filterselect when it's value is for example 10?
I tried canEdit, but it does not work.
Any suggestions?
Thanks!
Editor({
label: 'Size', autoSave: true, field: 'picsubtype',
canEdit: function(object, value) {
return value != 10;
},
widgetArgs: {
store: filesubtypeStore, maxHeight: 150, style: "height: 20px;"
},
}, FilteringSelect)
This code does not work...

Have you tried setting up a onChange handler in the widgetArgs?
Something like:
onChange: function(newValue) { if(newValue === 10) { this.set('disabled', true); } }
But how would the widget get re-enabled?