Enabling and disabling zoom in htmlchart

[Francisco]

Hi, I have been trying to enable and disable zoom in my column htmlchart through a RadCheckBox and a Javascript function which I call in the RadCheckBox event OnClientCheckedChanged, and this is my function:

    function Cambio_Chk_Zoom(args) {

                var b = $find("ctl00_MainContent_ChartCantClientes");
                a = $telerik.toHtmlChart(b);

                if ($telerik.findCheckBox("<%=CheckBox1.ClientID %>").get_checked() == false) {
                    a.get_kendoWidget().options.zoomable.mousewheel = "false";
                    a.get_kendoWidget().options.zoomable.mousewheel.lock = "none";
                }
                else {
                    a.get_kendoWidget().options.zoomable.mousewheel = "true";
                    a.get_kendoWidget().options.zoomable.mousewheel.lock = "y";
                }
                a.repaint();
            }

 

Initially of course I can't zoom with the mouse scroll.

I have already tested the function and it goes correctly to the if statement, i.e.: when it should enable zooming, it goes to else and it enables the wheel zoom, and when it should disable zooming it goes to the if part but it does't disable the zoom.

The other problem is that it really doesn't lock my y axis in the zoom.

I have this in my chart creation: ChartName.Zoom.Enabled = true;

I have read something about the default state of the chart but that didn't help me.

Any help will be appreciated.

Thanks in advance.

 

[Francisco]

I jus wanted to add that I tried with the properties as true and false without the quotes.

[Danail Vasilev]

Hello Francisco,

This is an issue with the control. I have logged it here (https://github.com/telerik/kendo-ui-core/issues/2047), so that you can monitor it status.

As a small token of gratitude I have updated your Telerik points.

Regards,
Danail Vasilev
Telerik by Progress

[Francisco]

Hi, thanks a lot for your answer, there is a guy in the link below who has some workaround but i couldn't manage to adapt it. After I made the code changes, my htmlchart does't load the content, and I can disable and enable the zoom but there is no data in the chart. He used the PreventDefault.

Here is the link, maybe it can help to solve the issue:

http://stackoverflow.com/questions/37921801/chart-setoptions-bug-in-kendo-ui

Below I will put my modified code according to the above link, and the function preventThisPlease executes succesfully, it prevents zoom wheen the checkBox is false, but as I said, there is no data in the chart.

In the end of my code there are two alerts and a refresh between them, the first alert (alert('repaint');) is executed but the second one isn't (alert('repaintya');)

In the code I used repaint and redraw instead of refresh but they didn't work, maybe I didn't use them in the right way...

Here is my modified JS code:

function Cambio_Chk_Zoom() {
                var a = $find("<%=CheckBox1.ClientID%>")
                var b = $("#ctl00_MainContent_ChartCantClientes");
                var b = $find("ctl00_MainContent_ChartCantClientes");
                a = $telerik.toHtmlChart(b);

                var toLock = "none";
                if ($telerik.findCheckBox("<%=CheckBox1.ClientID %>").get_checked() == false) {
                    alert('1');
                    toLock = "none";
                    alert('1');
                }
                else {
                    alert('2');
                    toLock = "x";
                    alert('2');
                }

                a.get_kendoWidget().options.pannable.lock = toLock;
                a.get_kendoWidget().options.zoomable.mousewheel.lock = toLock;
                a.get_kendoWidget().options.zoomable.selection.lock = toLock;
                alert('antes');

                $("#ctl00_MainContent_ChartCantClientes").kendoChart({
                    zoom: preventThisPlease,
                    zoomable: {
                        mousewheel: {
                            lock: "x"
                        }
                    }
                });
                alert('repaint');
                a.refresh();                
                alert('repaintya');
            }

            function preventThisPlease(e) {
                alert('arriba de if');
                if ($telerik.findCheckBox("<%=CheckBox1.ClientID %>").get_checked() == false) {
                    e.preventDefault();
                    alert('prevent en if');
                }
                alert('sale de prevent');
            }

Regards.

[Danail Vasilev]

Hi Francisco ,

Yes, a possible approach is to handle the zoom event where you can cancel the zooming when the checkbox is not checked. For example:

<input type="checkbox" id="zoomchkb" />

zoom:function(e){
        if($("#zoomchkb")[0].checked){
        e.preventDefault();
    }
},

A fully runnable sample is available here as well - http://dojo.telerik.com/iwinE. The sample is for the Kendo UI chart but you can use the same approach for the RadHtmlChart as well.

Regards,
Danail Vasilev
Telerik by Progress

[Francisco]

OK, thanks for your help.

Regards.