Resize chart when div width increase and decrease

2 posts, 0 answers
  1. Rohan
    Rohan avatar
    10 posts
    Member since:
    Sep 2012

    Posted 17 Jul Link to this post

    I try resize , refresh and redraw but chart width is still same.

    When i click left menu a left menu hide and kendo div show from 70% to 100% but when div 100% show then kendo width is still 70% and once i toggle to 70% kendo cut right side on 70% width

    my code structure 

     

    Html

    <div>

    <div class="slider"><a class="showhide" href="#">Click Width increase and decrease </a></div>

    <div class="kendo-chart-half"">

    <div id="kendo-chart">

    chart show

    </div>

    </div>

    </div>

     

    css 

    .slider {width:30%: float:left}

    .kendo-chart-half{width: 70%: float:left}

    .kendo-chart-full{width: 100%: float:left}

    Jquery 

    $(document).on('click', '.showhide', function () {
        $('#verticalTabCol , .hiddenSlideVariable').toggle(200);
        $('.kendo-chart-half').toggleClass("kendo-chart-full", 200);
        $('#kendo-chart').data('kendoChart').resize();
        $('#kendo-chart').data('kendoChart').refresh();

        $('#kendo-chart').data('kendoChart').redraw();
    });

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1055 posts

    Posted 20 Jul Link to this post

    Hello, Rohan,

    It appears that the CSS is defined with invalid values where there is a colon instead of a semicolon.

    Defining the CSS appropriately, seems to work just fine in this simple test:

    https://dojo.telerik.com/@bubblemaster/uqoBuwUB/2

    Let me know in case you need further assistance with the chart resize() method.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik

Back to Top