Resize on Client

2 posts, 0 answers
  1. Christopher Blickley
    Christopher Blickley avatar
    202 posts
    Member since:
    Jan 2004

    Posted 19 Jun 2013 Link to this post

    Hello:

    With the regular RadGrid, I have been able to resize it on the client dynamically using the following pseudo-code:
    grid.get_element().style.height = "300px";
    grid.repaint();

    Is there any way to do something similar on the client with RadPivotGrid? I use this code to dynamically size
    the grid to the browser window and would like to be able to do something similar with the PivotGrid.
    I also use a similar technique to resize the ReportViewer in Telerik Reporting.

    Thanks,
    Chris
  2. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 24 Jun 2013 Link to this post

    Hi Christopher,

    I am afraid client side resizing of RadPivotGrid is not supported due to its complex rendering level.
    Nevertheless, you can try the following approach to work around it:
    <ClientSettings>
        <Scrolling AllowVerticalScroll="true" />
    </ClientSettings>
    JavaScript:
    window.onresize = function () {
        var grid = $find("<%= RadPivotGrid1.ClientID %>");
        var gridEl = grid.get_element();
        var screenSize = $telerik.getViewPortSize();
        var scrollDiv = grid._verticalScrollDiv;
        if (($(gridEl).height() > screenSize.height) ||
            $(scrollDiv).height() < grid._scrolling._scrolling._scrollHeight.Value) {
     
            var headerZoneDiv = $(gridEl).find(".rpgRowHeaderZoneDiv")[0];
            var contentZoneDiv = $(gridEl).find(".rpgContentZoneDiv")[0];
     
            var topDelta = $(scrollDiv).height() - $(contentZoneDiv).height();
            var heightDelta = $(gridEl).height() - $(headerZoneDiv).height();
     
            headerZoneDiv.style.height = (screenSize.height - heightDelta) + "px";
            contentZoneDiv.style.height = (screenSize.height - heightDelta) + "px";
            scrollDiv.style.height = (screenSize.height - heightDelta + topDelta) + "px";
            grid.get_element().style.height = screenSize.height + "px";
     
            grid.repaint();
        }
    }

    Hope this helps.

    Regards,
    Eyup
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top