10 Replies Latest reply on Jun 20, 2019 6:50 AM by Dima

    IG: How to change dynamically Fixed Report Height

    Dima

      Hello to all

       

      I use APEX 19.1

       

      May be someone can tell How to change dynamically (using JS) Fixed Report Height in the IG?

       

      Respectfully,
      Dmitriy.

       

       

        • 1. Re: IG: How to change dynamically Fixed Report Height
          eric.sacramento

          Hi,

           

          You can use this on your DA, instead of 100px you can put a variable.

           

          $('#YOUR_IG_ID').find('th.a-GV-header').css({"height":"100px"});
          

           

          cheers,

          Eric

          • 2. Re: IG: How to change dynamically Fixed Report Height
            Dima

              Thank you, but in my opinion you did not understand. Below is a screenshot for explanation.

            • 3. Re: IG: How to change dynamically Fixed Report Height
              Franck N

              Hi,

               

              why and what is the use of it?

               

              anyway are you aiming to achieve something like this?:

              SetMaxHeight.gif

              how to do it:

              • create text field item on your page  for my use case "P1_HEIGHT"
              • give an ID to your IG region for my use- case  "max"
              • create a button with a click dynamic action with true action execute Javascript code.

              use the code bellow:

               

              $('#max_ig').css({"max-height":+$v("P1_HEIGHT")+"px"});

               

              you will then be able to set the Fixed report height from the APP itself.

               

              regards,

              Franck

              1 person found this helpful
              • 5. Re: IG: How to change dynamically Fixed Report Height
                Dima

                Hi, Franck!

                 

                Many thanks for your attention and advice.

                 

                 

                I did just that as you demonstrated, but the result was unsuccessful.

                 

                Next, I cite the features of my case.

                1) I have a modal window.
                2) On the page there are two or more IG regions, where one master and several detailed ones, i.e. one to many relationship - Stack type.
                3) Use Region Selector
                4) The heading of the master table is fixed to the Region and a fixed height of the region is established.

                My goal is this:
                Dynamically (on interactivegridviewchange or interactiveGrid.viewchange) reduce or adjust the height of the master region set at the design stage to such a height as to eliminate voids in height (visually not nice and I would like to allocate more space for the child tables) in the case where the master table contains a small number of records which do not fill the entire area.

                I really hope that I could explain my task.

                Thank you in advance.

                • 6. Re: IG: How to change dynamically Fixed Report Height
                  Dima

                  Спасибо, коллега!

                  Прежде чем приступить к задаче, я внимательнейшим образом изучил эту страницу.....

                  • 7. Re: IG: How to change dynamically Fixed Report Height
                    Oleh Tyshchenko

                    So you have already know almost everything you need to resize an IG. The bad news is that your have to do the math yourself because calculations depend on the content of your page, templates and template options used by your regions, etc. But it's doable. For example, here is a code from my test page for changing a height of a detail region depending on how many records it contains:

                    var masterModel = this.data.model,
                        masterRecord = this.data.selectedRecords[0],
                        detailItemsCount, height, maxHeight;
                    if(masterRecord){
                        maxHeight = $(window).height(); // start with the window height;
                        // subtract off all the fixed height regions and header
                        maxHeight -= $("#master").outerHeight();
                        maxHeight -= $(".t-Header").outerHeight();
                        maxHeight -= $("#t_Body_content_offset").height();
                        maxHeight -= $(".t-Footer").outerHeight();
                        maxHeight -= $("#detail .t-Region-header").outerHeight();
                        maxHeight -= 2; // - 2 for the border on the IG region
                        
                        // number of rows in the detail region for current master record
                        detailItemsCount = parseInt(masterModel.getValue(masterRecord, 'DETAIL_ITEMS_COUNT'));
                        
                        // desired height for the detail region
                        height =
                            $("#detail .a-IG-header").outerHeight() +
                            $("#detail .a-GV-header").outerHeight() +     
                            $("#detail .a-GV-footer").outerHeight() +
                            ( $("#detail .a-GV-row").outerHeight() * detailItemsCount );
                        
                        // if the screen is very small then the responsive features of UT kick in
                        // and the height set on the notes region for example gets ignored. 
                        // So just incase set a minimum height for the report
                        if ( maxHeight < 150 ) {
                            height = 150;
                        } else if ( height > maxHeight ) {
                            height = maxHeight;
                        }
                        // then set the height of the regions that will stretch
                        // setOuterHeight takes into consideration the borders etc. on the grid itself.
                        apex.util.setOuterHeight(apex.region("detail").widget(), height);
                    }
                    

                    I put it in a dynamic action triggered by Interactive Grid Selection Change event for the master region.

                    1 person found this helpful
                    • 8. Re: IG: How to change dynamically Fixed Report Height
                      Dima

                      Strange, in my Recipes (the latest version 19.1) there is no such recipe.

                       

                      However, thanks buddy, I will keep that in mind.


                      Currently, I am making my way. As soon as I finish, I will share ....

                      • 9. Re: IG: How to change dynamically Fixed Report Height
                        Oleh Tyshchenko

                        dima wrote:

                         

                        Strange, in my Recipes (the latest version 19.1) there is no such recipe.

                        No wonder, because it's my own tests created under John's influence. So the main idea is to use apex.util.setOuterHeight(apex.region().widget(), ...) to change the height and how to calculate it is completely up to you.

                        • 10. Re: IG: How to change dynamically Fixed Report Height
                          Dima

                          As promised above, sharing my solution.

                           

                          I use the following code fragment to adjust the height of the IG master region so that there is no empty space if the number of rows in the master table is not enough to fill out, the entire allocated space.

                          I use a modal window.

                           

                          Function and Global Variable Declaration

                           

                          var adjHeight = function(event){
                            var rid="lv", // Master Region ID
                                adj=(
                                     parseInt($v("P22_ROW$COUNT"))==0?0:$("#"+rid+"_ig_grid_vc div.a-GV-bdy div.a-GV-w-scroll").outerHeight(true)-
                                                                        $("#"+rid+"_ig_grid_vc div.a-GV-bdy div.a-GV-w-scroll table.a-GV-table tbody").outerHeight(true)
                                    );
                            if(adj > 0){
                              with($("#"+rid+"_ig")){
                                css({"max-height":outerHeight() - adj + 1});
                              }
                            }
                          };
                          
                          

                           

                          Execute when Page Loads

                           

                          adjHeight();
                          $(self).on("apexwindowresized",adjHeight);
                          

                           

                          Next, I provide examples of screen forms (in Russian)

                           

                          Fixed Report Height = 313

                           

                          1) Without adjustment

                           

                          2) With adjustment

                           

                           

                          I would be grateful to everyone for any constructive remarks and advice.

                           

                          Respectfully,
                          Dmitriy.