Forum Stats

  • 3,816,002 Users
  • 2,259,128 Discussions
  • 7,893,362 Comments

Discussions

Interactive Grid - Disappearing Hamburger Column when using jQuery IG api

Matt McGee
Matt McGee Member Posts: 33 Blue Ribbon
edited Aug 27, 2021 2:07AM in APEX Discussions

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");
});


Tagged:

Best Answer

  • Oleh Tyshchenko
    Oleh Tyshchenko Member Posts: 716 Gold Trophy
    edited Aug 28, 2021 2:37PM Answer ✓

    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");
    });
    

Answers

  • Oleh Tyshchenko
    Oleh Tyshchenko Member Posts: 716 Gold Trophy

    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
    Matt McGee Member Posts: 33 Blue Ribbon

    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
    Oleh Tyshchenko Member Posts: 716 Gold Trophy
    edited Aug 28, 2021 2:37PM Answer ✓

    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
    Matt McGee Member Posts: 33 Blue Ribbon

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