Issue with using kendo.resize inside the window.resize function. i need to bootstrap 3 functionalists for kendo chart, when i change the browser size so i used kendo.resize function. chart re sizing work perfectly only chart in visible area. as example i have kendo tab strip with two tab with 2 chart (tab 1 -chart1, tab 2-chart 2) when i click on tab 1 and re size the browser chart will re size, then go to tab 2 chart 2 is still in previous size when i re size the browser its again re size.
I suggest to look at example on kendo website:
http://demos.telerik.com/kendo-ui/bootstrap/
There is exactly what you request:
here is a sample code:
function resizeTabStripContent() {
kendo.resize("#tabstrip");
}
$("#tabstrip").kendoTabStrip({
animation: {
open: { effects: "fadeIn" }
},
activate: resizeTabStripContent
});
// resize nested charts when window resizes
$(window).resize(resizeTabStripContent);
It resizes charts in tab strip on window resize event and when tab is activated.
Related
I have a react app that uses ChartJS through 'npm react-chartjs-2'.
I am working with a Line chart and I a have the following requirements:
1- Detect clicking on chart area (white area; other than data set line, and legend), then do some logic
2- Detect clicking on legend rectangle at the top to hide/show the dataset (current default behaviour)
I have tried using options.onClick but it seems to override legend click.
Also tried getElementAtEvent it returns the dataset clicked on but when clicking on legend/chart area comes as empty. getDatasetAtEvent always return empty array. And if I use options.legend.onClick I loose default hide/show behaviour and need to do it programmatically.
I was wondering is there is a better way to achieve requirements above. Thanks
You can use the getElementsAtEvent property. This gives value only when the chart area is clicked, the element is null if it is clicked on the legend. If it is clicked on the chart area then it holds properties from which we can get the clicked xAxis and legend value.
document.getElementById("yourChartCanvasId").addEventListener("click", function (e) {
var element = instance.getElementsAtEvent(e)[0];
if (element) {
//Handle click on chart area
}
else {
//Handle click on legend area
}
});
Also if you don't want to do anything on legend click, keeping the default Chart.js behavior then don't include the else block.
In a Codenameone app, I'm trying to develop a carousel with a thumbnail list at the bottom. I've used Tabs control to display files (of diff types like images, video, text, button etc) in carousel style in the center of a form and another Tabs control to display thumbanail images (of the first carousel files) at the bottom of the form. When a user selects a thumbnail image in the bottom carousel, corresponding component should be displayed in the first carousel.
hi.add(BorderLayout.CENTER, mainCarousel);
hi.add(BorderLayout.SOUTH, bottom_tab);
bottom_tab.addSelectionListener((i1, i2) -> {
// bottom_tab.getTabComponentAt(i2).addPointerPressedListener((i) -> {
mainCarousel.getTabComponentAt(i2).setVisible(true);
mainCarousel.getTabComponentAt(i2).repaint();
// });
});
But the component not getting displayed in the central carousel.
Also, I tried to capture the event addPointerPressedListener, but it's not getting fired when I select a thumbnail image.
You can't set tab components to visible/invisible to show/hide them. That won't work. I'm guessing that what you want is a horizontal list for the bottom UI similar to the answer here.
I would suggest using pointer released always. Notice that this will only get delivered to focusable components or the form. To make sure you get the event you can register a pointer release listener on the form.
I have an angularJs directive that create an ChartJs chart. I would like to resize the chart when the parent div is resized. According to documentation this is possible with:
.resize()
Use this to manually resize the canvas element.
This is run each time the browser is resized,
but you can call this method manually if you
change the size of the canvas nodes container element.
Here a plunkr: http://run.plnkr.co/KarokZXZ0hGNJpe9/
If you wanna see the files: http://plnkr.co/edit/1cx681?p=info
Try to click button, the chart does not change dimension. If you try to change window size, it's resized.
How can I obtain this without having to change window dimension?
I was having this same issue and used the Firebug extension in Firefox to see what ChartJS is doing when you resize the browser. I found that it is passing some parameters to the resize method. The following worked for me:
$scope.$apply();
chart.resize(chart.render, true);
You may not need the $scope.$apply(), but in my case I found it necessary since I am changing scope properties that cause the canvas size to change.
I'm working on a web app that uses lots of modal overlays with scrollable content in the modal . On touch devices, and in particular on Android, the mobile browser wants to scroll the body content behind the modal instead of the actual scrollable content area within the modal. Or, if the content does scroll, when it hits the top or bottom of the scrollable area, the scrolling then continues on the body. I don't want the body to scroll at all under any circumstances when the modal is visible/active.
I tried to prevent this with the following code but it seems to have no effect (in this case, $context is the document root):
$context.on('touchmove touchstart touchend', '[data-modal-content]', function(e) {
e.stopPropagation();
});
Anyone have other ideas/insight?
Is there anything wrong with the provided z-index of your elements? Maybe the Modal itself or an inner container isn't stacked on top of the body-text
I am using a BorderLayout and trying to resize the center region when the left side panel is collapsed. My center region is a tab panel. One of my tabs contains a grid panel. I want to resize any panel that is in the center region tab panel on collapse.
App.centerTabPanel is a reference to the tab panel in the center region.
App.mainPanel is just one of the tabs I am testing the resize with.
Nothing gets resized, I have my tabs with layout "fit". The tabs with a gridpanel do get resized only when I reload the store.
Here is my code:
Ext.override(Ext.layout.BorderLayout.Region, {
onCollapse : Ext.layout.BorderLayout.Region.prototype.onCollapse.createSequence(function() {
//App.centerTabPanel.doLayout(); //doesn't work
//App.centerTabPanel.getActiveTab().doLayout() // doesn't work
//App.centerTabPanel.syncSize(); // doesn't work
App.mainPanel.getStore().reload(); // this works, when the store reloads it resizes the grid
})
});
Try to add config option split : true to all items(regions) within border layout