PivotView UpdatePanel Problem

Posted by: andrewpedp on 3 August 2017, 3:52 pm EST

  • Posted 3 August 2017, 3:52 pm EST

    Hi

    I have been trying to update the Pivot View in an ASP .net UpdatePanel; when I now resise a browser window I set the Height and Width of the PivotView in a postback, but after the update panel is updated the PivotView is blank(The default blue fill and the control is not rendered).

    Any idea what I am doing wrong or what is another approach of updating the PivotView to reflect the size change? ie remembering selections and state after the refresh.

    ascx code:

       

           
               
                   
                   
               
           
       



    ascx.cs code:

    PivotView1.Height = int.Parse(arg1);
    PivotView1.Width = int.Parse(arg2);              
    PivotViewUpdatePanel.Update();



    I would greatly appreciate some help.

    All the best

    Andrew

  • Replied 3 August 2017, 3:52 pm EST

    Hello,



    I have read your query and tried testing the said scenario at my end. I have created a website and added a pivot view into an ASP.Net update panel and set the code similar to the one provided by you.

    Now after the postback the pivot view is resizing itself as per the size defined in the code.

    Please find the sample attached. I have created this sample in the latest build 1.0.464.0. Please make sure you are using the latest build as well.



    Try to run the sample and see if you are experiencing the same behavior.



    Do let me know if you need further assistance/clarification.



    Regards,

    Gaurav
    2009/02/AJAXEnabledWebSite1.zip
  • Replied 3 August 2017, 3:52 pm EST

    Hi

    Thanks for looking into this, but when I try your example the whole page reloads, I want only that update panel with the PivotView to update.

    So for example if you put the button in its own update panel, or even the same update panel as the PivotView is in.

          
               
               
               

           


    Then try it and the control is not rendered; How can I force it to render again.

    Yes the example you provided did work, but only with a whole page refresh, We need it working in its own update panel so that it won't reload all the other controls that I would have on the page. making the page seamless.

    Thanks again

    Andrew
  • Replied 3 August 2017, 3:52 pm EST

    Hello,



    We currently do not support PivotView with UpdatePanel. This happens

    because of DataDynamicsAnalysis initializes when event onload of window occurs.There is no known workaround for this either.



    Do let me know if you need further assistance/clarification.



    Regards,

    Gaurav





  • Replied 3 August 2017, 3:52 pm EST

    One workaround would be to instead of hosting the control directly within the update panel, you could use an iframe inside of the update panel and the page in the iframe can host the control.

    James
  • Replied 3 August 2017, 3:52 pm EST

    I have added case 127509 to add a feature to the web control to allow you to control the size at runtime without requiring a page reload/postback.

    Once this feature has been implemented you may be contacted to try out the feature in an interim build.  Please subscribe to the Announcements Forum to know when an official build has been released.

    Thanks,

    James
  • Replied 3 August 2017, 3:52 pm EST

    Hi

    Thanks for the info, that sounds like a good ideas and I look forward to testing out the new features when they are available.

    I have currently implemented an ugly work around using a function call to your DD stuff, so that it works for the mean time.




    Using Jquery:

    $().ready(function() {
        // Bind window resize
        $(window).bind("resize", updatePivotView);
    });

    function updatePivotView() {
        // Refresh the dimensions in case they are old.
        windowDimensions.update();
       
        var setSize = false;
        if(setSize == false) {
            // Call some DD (Data Dynamics) code that will set the size of the control after the window is resized.
            setSize = DD.PivotView.SetSize('EnquiryControl_PivotView1', (windowDimensions.getRight() - 10), (windowDimensions.getBottom() - 30));
        }
       
    }

    /*
    * Custom object that is used to hold window dimensions for dynamic sizing scripts
    * Date: 18/02/2009
    * Version 1.0
    * Author Andrew Powell
    * @class
    */
    function WindowDimensions() {
    }

    WindowDimensions.prototype.init = function() {
        this.update();
    }

    /*
    * Call to update the dimension values
    */
    WindowDimensions.prototype.update = function() {
        // Calculate the visible window dimensions
        var CWidth, CHeight, CScrollX, CScrollY;

        if (self.innerWidth) {
            CWidth = self.innerWidth;
            CHeight = self.innerHeight;
            CScrollX = window.pageXOffset;
            CScrollY = window.pageYOffset;
        } else if (document.documentElement.clientWidth) {
            CWidth = document.documentElement.clientWidth;
            CHeight = document.documentElement.clientHeight;
        if (CWidth==0) {
            CWidth = document.body.clientWidth;
            CHeight = document.body.clientHeight;
        }
        CScrollX = document.documentElement.scrollLeft +
                   document.documentElement.scrollLeft;
        CScrollY = document.documentElement.scrollTop +
                   document.documentElement.scrollTop;
        } else if (document.body.clientWidth) {
            CWidth = document.body.clientWidth;
            CHeight = document.body.clientHeight;
            CScrollX = document.body.scrollLeft;
            CScrollY = document.body.scrollTop;
        }
       
        this.left = CScrollX;
        this.right = CWidth + CScrollX;
        this.top = CScrollY;
        this.bottom = CHeight + CScrollY;
        this.middleX = Math.round(CWidth/2) + CScrollX;
        this.middleY = Math.round(CHeight/2) + CScrollY;
    }

    /*
    * Get the left value
    */
    WindowDimensions.prototype.getLeft = function () {
        return this.left;
    }

    /*
    * Get the right value
    */
    WindowDimensions.prototype.getRight = function () {
        return this.right;
    }

    /*
    * Get the top value
    */
    WindowDimensions.prototype.getTop = function () {
        return this.top;
    }

    /*
    * Get the bottom value
    */
    WindowDimensions.prototype.getBottom = function () {
        return this.bottom;
    }

    /*
    * Get the middle x value
    */
    WindowDimensions.prototype.getMiddleX = function () {
        return this.middleX;
    }

    /*
    * Get the middle y value
    */
    WindowDimensions.prototype.getMiddleY = function () {
        return this.middleY;
    }

    var windowDimensions = new WindowDimensions();
    windowDimensions.init();

    /*
    * End -> WindowDimensions
    */


    Also when the window loads the PivotView size doesnt change to fit to the window so an even uglier function was used to tell the control that it needs to redraw, giving 10 seconds for the control to finish doing what it needs to do, then resize it.

    $(document).ready(function() {
        setTimeout(updatePivotView, 10000);
    });

    Many thanks, I hope the update will prove cleaner than my approach!!!!


    Andrew

  • Replied 3 August 2017, 3:52 pm EST

    Andrew,



    Thanks for posting a nice workaround.



    Here is another way through which we can resize PivotView in an UpdatePanel.



    As per this sample you may resize PivotView:



    (1) Resize main PivotView div. In few situations, when initial width and height was not set, this step can be omitted.



    (2) Set PivotView content size. It can be done using DD.PivotView.SetSize(...) JavaScript method.



    Best Regards,

    Amit
    2009/03/ResizingPivotViewTutorial.zip
  • Replied 3 August 2017, 3:52 pm EST

    Andrew - Thanks for your work around. I have a similar workaround but (like yours) it requires a lot of ugly code and I have many subtle glitches here and there.

    Amit - Thanks for your suggestions as well. I'm downloading the new build and will try your sample to see if I can get ideas on what my problem might be.

    My current problem with my work around is that the panels inside the PivotView are moved where they need to be, but the hosting container (inside the PivotView) is not sizing correctly. It's a bug that I need to fix, but is proving to be very tricky for me.

    This leads me to my next question: I would like to ask if GrapeCity plans to allow the PivotView to accept percentages or pixels for width and height on the client? The DD.PivotView.SetSize() has it's own set of problems (as I've described above). It requires hooking into jQuery events to size the control and then requires a certain level of expertise. It is a very complex, but necessary process for anybody that needs the control to size with the window. In my particular work around, I've added a lot of (what I feel is) unnecessary code that navigates through hard coded class names and div id's within the PivotView to do a simple thing (ie. resize).

    This is very important to my application, as my solution uses multiple PivotView instances on a single dashboard. I'm currently using James' approach with iFrame to get around the problem. However, this too presents it's own problems since the PivotView is now moved to another page and I don't have direct access to it and it's properties. I'm now forced to set connections and load layouts on the PivotView using url parameters. All of this extra work I'm doing is simply to get around a resize issue.

    Thanks for your great support!

  • Replied 3 August 2017, 3:52 pm EST

    Thanks for your detailed explanation of the issue.



    I have updated Case 127509 with these comments.



    Regards,

    Amit
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels