Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Disabling mousewheel zoom in Javascript.

2 Answers 68 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Ahmet
Top achievements
Rank 1
Ahmet asked on 27 Aug 2018, 08:18 PM

Hello again

On HtmlChart is there any way to disable the mousewheel zoom in Javascript ? 

I've tried the following but zooming by mousewheel is still enabled, so neither of them worked. I'd appreciate your help.

$find("chart")._options.zoomable.mousewheel = "false";

$find("chart")._options.zoomable.mousewheel = false;

$find("chart")._options.zoomable.mousewheel.set("false");

$find("chart")._options.zoomable.mousewheel.set(false);

Thanks.

 

 

2 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 28 Aug 2018, 10:08 AM
Hello Ahmet,

You should use the setOptions() method of the underlying Kendo Chart widget when changing properties. Here's an example:

<script>
    function disableWheelZoom() {
        var chart = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
        var opts = chart.options;
        opts.zoomable.mousewheel = false;
        chart.setOptions(opts);
    }
</script>
<asp:Button Text="disable mousewheel zoom" ID="btn1" OnClientClick="disableWheelZoom(); return false;" runat="server" />
<telerik:RadHtmlChart runat="server" Height="600px" Width="600px" ID="RadHtmlChart1" Transitions="false"
    DataSourceID="SqlDataSource1">
    <Pan Enabled="true" />
    <Zoom Enabled="true">
        <MouseWheel Enabled="true" />
        <Selection Enabled="true" ModifierKey="Shift" />
    </Zoom>
    <PlotArea>
        <Series>
            <telerik:ColumnSeries DataFieldY="UnitsInStock">
                <TooltipsAppearance Color="White">
                    <ClientTemplate>
                        #= dataItem.ProductName# :  #= dataItem.UnitsInStock#
                    </ClientTemplate>
                </TooltipsAppearance>
            </telerik:ColumnSeries>
        </Series>
        <XAxis DataLabelsField="ProductName" MinValue="3" MaxValue="15">
            <LabelsAppearance RotationAngle="90"></LabelsAppearance>
            <MinorGridLines Visible="false" />
        </XAxis>
        <YAxis MinValue="0" MaxValue="125">
            <MinorGridLines Visible="false" />
            <TitleAppearance Text="Quantity">
            </TitleAppearance>
        </YAxis>
    </PlotArea>
    <Legend>
        <Appearance Visible="false">
        </Appearance>
    </Legend>
    <ChartTitle Text="Units in Stock">
        <Appearance Position="Bottom" />
    </ChartTitle>
</telerik:RadHtmlChart>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    ProviderName="System.Data.SqlClient" SelectCommand="SELECT [ProductName], [UnitsInStock] FROM [Products]"></asp:SqlDataSource>


Regards,
Marin Bratanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ahmet
Top achievements
Rank 1
answered on 28 Aug 2018, 07:56 PM
Thank you Marin, that worked perfectly. I wasn't aware of we had the get_kendoWidget feature for the RadHtml chart. 
Tags
Chart (HTML5)
Asked by
Ahmet
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Ahmet
Top achievements
Rank 1
Share this question
or