I am looking for a way to make the vertical splitter between the grid data and the graph data not resizable. I know the Kendo Gantt Widget uses a Kendo Splitter widget, but when I try to disable the resizable option, it completely hoses the chart; the code I tried is below. The #gantt ID is where my gantt chart renders.
$("#gantt").kendoSplitter({
panes: [ { resizable: false }, { resizable: false } ]
});
Not great, but a solution could be to return false for dragstart/mousedown on the splitter bar and set the cursor to default and pointer events to none:
$("#gantt .k-resize-handle").hide();
$("#gantt .k-splitbar").on("dragstart mousedown", function(e){
return false;
}).css("cursor", "default").css("pointer-events", "none");
DEMO
Related
I want to create a popover ontime of click event in bar charts. i am creating bar charts using nvd3.
chart.multibar.dispatch.on("elementClick", function(d,element) {
$('nvd3 .nv-multibar .nv-groups rect:hover').popover({
'trigger':'hover'
,'container': 'body'
,'placement': 'top'
,'white-space': 'nowrap'
,'show': true
,'html':'true'
}); }
but this popover is not working!!
any help please......?
I want to remove stream style (state ? ("Stream", "Stacked" and "Expanded")) on stacked area chart and use this code :
d3.selectAll("g.nv-series")
.filter(function() {
return d3.select(this).select("text").text() == "Stream";
})
.remove();
But it works only the first time.
I tryed to handle events on chart because i want to refresh rendering of chart but it didn't work for the styles click. It works only for the legend click.
chart.legend.dispatch.on('legendClick', function(e){
console.log('legend was clicked', 'no namespace.');
});
How i can i handle click on style event ?
setter
chart.style('stream');
getter
chart.dispatch.on('stateChange', function(e) {
console.log(e); //e.style holds the current style
});
List of available styles can be found here https://github.com/novus/nvd3/blob/master/src/models/stackedArea.js#L299-L318
I also had hard time with this issue so I hope this would help you.
Cheers!
I need some help with how Kendo Chart tool.
I am trying to plot a line graph with bookings on particular date. I have a booking on a particular day and can see the circular plot. If i hover on it i can see the tool tip which contains the summary of the booking. I want this tooltip to always be visible/open. At the moment it only happens on mouse over.
function createChart() {
$("#chart").kendoChart(data);
var tooltip = $("#chart").kendoTooltip({
width: 120,
position: "top",
visibe: true
}).data("kendoTooltip");
}
I am using Kendo for the first time and am very confused now. Any help will be much appreciated.
You can always show the tooltips or labels without having to hover over them by mouse, by using setting the visible of the series labels to true as follows:
seriesDefaults: {
type: "line",
labels: {
visible: true
}
}
You can check and see a demo example here: http://demos.telerik.com/kendo-ui/line-charts/local-data-binding
I have craete KendoChart pie with legend.
For some reason legend by default is interactive and by clicking on legend items chart enables/disables pieces of the pie.
I didn't find any way to disable this behavior: http://docs.telerik.com/kendo-ui/api/dataviz/chart
Could it be disabled?
I needed to do the same thing and after some research found out in the Kendo UI documentation the following solution:
- hook to the legendItemClick and legendItemHover events of the chart
- in the handler call e.preventDefault();
Here is the code I used (MVVM-style):
In HTML:
data-bind="events: { legendItemClick: disableEvent, legendItemHover: disableEvent } "
In the ViewModel:
disableEvent: function(e) {
e.preventDefault();
}
Here is the article - http://docs.telerik.com/kendo-ui/api/dataviz/chart
Use the code Below
legend: {
position: "bottom",
visible: false
},
Hello a have a simple question I have defined columns with property resizable: true.
How do I manage to let user re-size column with their mouse, like they will do in most grid control?
Columns are resizable by default, but you have to activate resizing on the whole grid by setting enableColumnResize to true in the grid options. See this Plunker.
$scope.gridOptions = {
data: 'myData',
enableColumnResize: true
};