How to add select list item in search bar of IG

Hi,

What Franck proposed will work and has the advantage that if the select item is already something that is in page items to submit for the IG then there is nothing more to do than refresh the IG region. But as I pointed out yesterday Image button interactive grid making assumptions about how APEX components generate internal element IDs could break in the future. So the "_ig_toolbar" suffix could change or be removed altogether. The IG region could also refresh the toolbar at any time (it used to do this but in more recent releases I don't think it does) and this would lose any DOM modifications. A minor disadvantage is that when you put an item on the page a lot of markup gets generated by the engine like label and a place holder for error messages etc. If you move just the select element then you leave a bunch of useless stuff behind that you probably want to hide.

The toolbar widget is not documented and therefore unsupported at this time (we hope to document it in the future). Aspects of the API have already been shown including in the Sample Interactive Grids app. The toolbar supports select lists as can be seen when there are saved reports. The following code in the IG Advanced: JavaScript Init Code gives an example of adding a select list. The key thing is that rather than responding to a select list change with a DA you put the action code in the set method.

function(config) {

    var $ = apex.jQuery,

        toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),

    toolbarData.toolbarFind("actions2").controls.push({

        type: "SELECT",

        action: "change-size"

    });

    config.toolbarData = toolbarData;

    config.initActions = function(actions) {

        var ig$ = $(actions.context);

        actions.add({

            name: "change-size",

            label: "Change Size",

            choices: [{label: "Small", value: "S"},{label: "Medium", value: "M"},{label: "Large", value: "L"}],

            set: function(v) {

                this.value = v;

                console.log("do something with ", v);

                // example: $s("some hidden page item", v);

                // ig$.interactiveGrid("refresh");

            },

            get: function() {

                return this.value;

            },

            value: "S"

        });

    };

    return config;

}

You don't say what values the select list contains or what you will do when the value changes. I assume something related to the IG region. The advantage of using the toolbar API and actions is that it is the natural way that the toolbar works. Note there is no need for special CSS rules. The down side is that if you need the value in a page item to be sent to the server then you need to set a hidden item. Also getting the list of values from the server can require more work if it is not a fixed set as shown in the simple example above.

Regards,

-John