Interactive Grid - Disappearing Hamburger Column when using jQuery IG api

Matt McGee

I have built out a proof of concept interactive grid where we allow users to edit data in configuration tables. I'm utilizing the plsql return function query source and am renaming and sorting the columns on the fly with jQuery. I have pretty much accounted for everything however, when I execute the jQuery, the APEX$ROW_ACTION (hamburger menu column) disappears and I cannot seem to keep it once the jQuery fires. Anyone have a solution?

We are running APEX 20.2

This is what I am firing after the page loads. It is generated by PL/SQL via AJAX call.

$(document).ready(function () {
    var Grid_1 = apex.region("aaGridEdit").widget().interactiveGrid("getViews").grid;
    Grid_1.view$.grid({
        "editable": true,
        "columns": [{
                "VC1": {
                    "heading": "Batch Mask",
                    "seq": 1
                },
                "VC2": {
                    "heading": "Autobatch Method",
                    "seq": 2
                },
                "VC3": {
                    "heading": "Descr",
                    "seq": 3
                },
                "VC4": {
                    "heading": "User Id",
                    "seq": 4
                },
                "LOV1": {
                    "heading": "Setofbooks",
                    "seq": 5
                },
                "LOV2": {
                    "heading": "Auto Close",
                    "seq": 6
                },
                "LOV3": {
                    "heading": "Auto Settle",
                    "seq": 7
                },
                "VC5": {
                    "heading": "Email Address",
                    "seq": 8
                },
                "LOV4": {
                    "heading": "Batch Type",
                    "seq": 9
                }
            }
        ]
    });
    Grid_1.view$.grid("refreshColumns").grid("refresh");
});

Oleh Tyshchenko

Does this work

$(document).ready(function () {
    var rowAction, Grid_1 = apex.region("aaGridEdit").widget().interactiveGrid("getViews").grid;
    rowAction = Grid_1.getColumns()[0];
    Grid_1.view$.grid({
        "editable": true,
        "columns": [{
                "APEX$ROW_ACTION" : rowAction,
                "VC1": {
                    "heading": "Batch Mask",
                    "seq": 2
                },
                "VC2": {
                    "heading": "Autobatch Method",
                    "seq": 3
                },
                "VC3": {
                    "heading": "Descr",
                    "seq": 4
                },
                "VC4": {
                    "heading": "User Id",
                    "seq": 5
                },
                "LOV1": {
                    "heading": "Setofbooks",
                    "seq": 6
                },
                "LOV2": {
                    "heading": "Auto Close",
                    "seq": 7
                },
                "LOV3": {
                    "heading": "Auto Settle",
                    "seq": 8
                },
                "VC5": {
                    "heading": "Email Address",
                    "seq": 9
                },
                "LOV4": {
                    "heading": "Batch Type",
                    "seq": 10
                }
            }
        ]
    });
    Grid_1.view$.grid("refreshColumns").grid("refresh");
});

Oleh Tyshchenko

If I were you I would do this in a different way. Probably I would create as many grids as the configuration tables exist (it would definitely take less than those two days you're waiting for a clue to done the work, it's 100% declarative so no problem to support this in the future). Or I would use page item substitutions to change columns headers and server-side conditions or moveColumn to put columns in the right order (have never tried this before). But since you want to recreate a grid on the fly on the client side then why don't your add your APEX$ROW_ACTION to the list of your columns?

Matt McGee

Oleh, I have tried adding the row_action column (in various forms) to the above JSON call. No change. Also, currently we have 695 tables utilizing our current grid and what we are wanting to implement here in IG and we add tables to that every once in awhile so doing the individual table approach is not on the table unfortunately.

Matt

Oleh Tyshchenko

Does this work

$(document).ready(function () {
    var rowAction, Grid_1 = apex.region("aaGridEdit").widget().interactiveGrid("getViews").grid;
    rowAction = Grid_1.getColumns()[0];
    Grid_1.view$.grid({
        "editable": true,
        "columns": [{
                "APEX$ROW_ACTION" : rowAction,
                "VC1": {
                    "heading": "Batch Mask",
                    "seq": 2
                },
                "VC2": {
                    "heading": "Autobatch Method",
                    "seq": 3
                },
                "VC3": {
                    "heading": "Descr",
                    "seq": 4
                },
                "VC4": {
                    "heading": "User Id",
                    "seq": 5
                },
                "LOV1": {
                    "heading": "Setofbooks",
                    "seq": 6
                },
                "LOV2": {
                    "heading": "Auto Close",
                    "seq": 7
                },
                "LOV3": {
                    "heading": "Auto Settle",
                    "seq": 8
                },
                "VC5": {
                    "heading": "Email Address",
                    "seq": 9
                },
                "LOV4": {
                    "heading": "Batch Type",
                    "seq": 10
                }
            }
        ]
    });
    Grid_1.view$.grid("refreshColumns").grid("refresh");
});

Matt McGee

@Oleh Tyshchenko yes it did! Thank you very much!