Enabling and disabling zoom in htmlchart

6 posts, 1 answers
  1. Francisco
    Francisco  avatar
    11 posts
    Member since:
    Oct 2012

    Posted 03 Aug Link to this post

    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.

     

  2. Francisco
    Francisco  avatar
    11 posts
    Member since:
    Oct 2012

    Posted 03 Aug Link to this post

    I jus wanted to add that I tried with the properties as true and false without the quotes.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 08 Aug Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  5. Francisco
    Francisco  avatar
    11 posts
    Member since:
    Oct 2012

    Posted 09 Aug in reply to Danail Vasilev Link to this post

    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.

  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 11 Aug Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  7. Francisco
    Francisco  avatar
    11 posts
    Member since:
    Oct 2012

    Posted 11 Aug in reply to Danail Vasilev Link to this post

    OK, thanks for your help.

    Regards.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017