8 Replies Latest reply on Jul 12, 2018 11:03 PM by DSteele41

    Removing Search Bar | Actions | Edit in Interactive Grid

    DSteele41

      Hello Community,

       

      Our Team is using Oracle APEX  5.1.0.00.45 with Google Chrome

       

      We are Adding an Interactive Grid to page to allow for more than 1 Payment Type for Customers   (I.e.  Cash and Check   or Credit Card and Check  or Cash and Credit Card  etc...)

       

      But We only want the User to be able to ADD ROW Button  but We want to Remove  Search Bar, Actions, Edit

       

       

       

      Regards,

       

      DSteele41

       

       

        • 1. Re: Removing Search Bar | Actions | Edit in Interactive Grid
          Alli Pierre Yotti

          try that

           

          add a static id to your IG Region . example:  my_static_id

           

          add that code in inline css at page level

          #my_static_id .a-Toolbar-group #my_static_id_ig_toolbar_search_field,

          #my_static_id button[data-menu="my_static_id_ig_toolbar_actions_button_menu"],

          #my_static_id button[data-menu="my_static_id_ig_toolbar_column_filter_button_menu"],

          #my_static_id button[data-action="search"] , #my_static_id div[data-action="edit"]{

              display: none !important;

          }

          • 2. Re: Removing Search Bar | Actions | Edit in Interactive Grid
            John Snyders-Oracle

            Hi,

            I do not recommend hiding toolbar buttons with css. It is better to customize the IG toolbar in Advanced: JavaScript Initialization Code. For example:

             

            function(config) {

                config.toolbar = [

                    {

                        controls: [

                            {

                                type: "BUTTON",

                                action: "selection-add-row"

                            }

                        ]

                    }

                ];

                return config;

            }

             

            There are many possibilities. Search to find more information on IG toolbar customization including here: How to hack APEX Interactive Grid Part 2 – HardLikeSoftware

            Regards,

            -John

            • 3. Re: Removing Search Bar | Actions | Edit in Interactive Grid
              Alli Pierre Yotti

              John is correct.

               

              just add that code in initialization JS code in your GRIG

               

              function(config) {

                  config.toolbarData = [

                      {

                          controls: [

                              {

                                 type: "BUTTON",

                                  action: "selection-add-row"

                              },

                              {

                                  type: "BUTTON",

                                  action: "save",

                                  hot:true

                              },

                              {

                                  type: "BUTTON",

                                  action: "selection-delete"

                              }

                          ]

                      }

                  ];

                  return config;

              }

              • 4. Re: Removing Search Bar | Actions | Edit in Interactive Grid
                DSteele41

                Alli Pierre Yotti

                 

                Let me preface this " I'm new to JS" (Hoping to take some online courses in it and/or in-class )

                 

                I'm reading over John Synders "How to hack APEX Interactive Grid Part 2"  and trying to follow along

                 

                First Question is where in Page Designer is

                " just add that code in initialization JS code in your GRIG"  ?

                 

                are you referring to the "Function and Global Variable Declaration"  Section ?

                 

                 

                Thank You

                 

                Thank You and Regards,

                 

                DSteele41

                • 5. Re: Removing Search Bar | Actions | Edit in Interactive Grid
                  DSteele41

                  Alli Pierre Yotti

                   

                  I'm Guessing Mine is showing as just  "JavaScript Code"  Because I'm on a Different or Older Version of APEX  (Application Express 5.1.0.00.45)   ??

                   

                  We will be Upgrading our APEX version to the current one once another group completes a migration to 12C

                   

                   

                   

                  Thank You Again

                   

                  DSteele41

                  • 6. Re: Removing Search Bar | Actions | Edit in Interactive Grid
                    DSteele41

                    John Snyders-Oracle

                    Alli Pierre Yotti

                     

                    John / Alli,

                     

                    Reading over Both Responses,  the JS Initialization Works to Only show  "Add-Row"

                     

                    Is there a way to default to show 1 Row Initially Because there would always be at least 1 Payment Type   (  Adding Interacive Grid to add Functionality for Customers to Pay with more than one payment type) ?

                     

                    Thanks to Both

                     

                    Regards,

                     

                    DSteele41

                    • 7. Re: Removing Search Bar | Actions | Edit in Interactive Grid
                      Alli Pierre Yotti

                      "Is there a way to default to show 1 Row Initially Because there would always be at least 1 Payment Type   (  Adding Interacive Grid to add Functionality for Customers to Pay with more than one payment type) ?"

                       

                      Do you means to show empty row if there is no data?

                      • 8. Re: Removing Search Bar | Actions | Edit in Interactive Grid
                        DSteele41

                        Alli Pierre Yotti

                         

                        No,  Not if there is No Data

                         

                        Default 1 Blank Line in the Grid Because there has to be at least 1 Payment Type to Pay for Items  (Meaning the Customer has to pay with something;  Cash, Check, or Credit Card)

                         

                        What We are running into is Customers wanting to pay with more than One Payment Type; i.e.  Total is 100.00  and Customer Wants to pay $50.00 Cash and $50.00 Check  or a Combination of the 3 Payment Types

                         

                        Currently with the JS you and John pointed me to  without a IG Grid Line by Default

                         

                         

                         

                        Looking for this  by Default without the User having to click "Add  Row"  (Again the 1 Row be there by Default because there has to be at least 1 Payment Method

                         

                        Also in regards to "Add Row" Button  ... How Can I Rename the Button   for instance to "Add Additional Payment"  Would that be in the JS Function ?

                         

                         

                         

                        Thanks in Advance Alli

                         

                        DSteele41