Initialise Modal Dialogs when a Row is Expanded

[meister-d]

Hi BForms Team,
I have the need to be able to open a Modal Dialog after that a Row is expanded. When the Modal Dialog is closed. I will then refresh the row with the Details to see the Updates made in the modal Form.

At the moment I have some Forms where I trigger the Modal Dialog from the Edit mode:

//#region DetailsHandler
    numberRangeIndex.prototype._beforeDetailsSuccessHandler = function (e, data) {

        var $row = data.$row,
            response = data.data;

        var objId = $row.data('objid');

        var rangeOpt = this._editableOptions($row, this.options.editComponents.Range);

        $row.find('.js-editableRange').bsPanel(rangeOpt).bsPanel('option', 'onEditableShow', $.proxy(function () {

            this.$grid.bsGrid('disableRowActions', $row);

            var $saveBtn = $row.find('.js-editableRange').find('.bs-savePanelQuestion');

            $saveBtn.bsInlineQuestion({
                question: "Are you sure?",
                placement: 'auto',
                buttons: [{
                    text: 'Yes',
                    cssClass: 'btn-primary bs-confirm',
                    callback: $.proxy(function () {
                        this.$grid.bsGrid('getRowElement', objId).find('.js-editableRange').bsPanel('save');
                    }, this)
                },
                    {
                        text: 'No',
                        cssClass: 'btn-theme bs-cancel',
                        callback: function (e) {
                            $saveBtn.bsInlineQuestion('toggle');
                        }
                    }]
            });

        }, this));


        //initialize the options for the Reserved Pannel
        var projectOpt = this._editableOptions($row, this.options.editComponents.Reserved);

        //$row.find('.js-editableReserved').bsPanel(projectOpt);

        $row.find('.js-editableReserved').bsPanel(projectOpt).bsPanel('option', 'onEditableShow', $.proxy(function () {

            this.$grid.bsGrid('disableRowActions', $row);

            numberRangeIndex.prototype._modalRegisterClick();

        }, this));

        //initialize the options for the Reserved Pannel
        var locationOpt = this._editableOptions($row, this.options.editComponents.Location);

        $row.find('.js-editableLocations').bsPanel(locationOpt).bsPanel('option', 'onEditableShow', $.proxy(function () {

            this.$grid.bsGrid('disableRowActions', $row);

            numberRangeIndex.prototype._modalRegisterClick();

        }, this));
    };

    numberRangeIndex.prototype._modalRegisterClick = function ()
    {
        $("a[data-modal]").on("click", function (e) {
            // hide dropdown if any (this is used wehen invoking modal from link in bootstrap dropdown )
            //$(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');

            var modalcontent = $('#myModalContent');

            modalcontent.load(this.href, numberRangeIndex.prototype._modalLoad);
            return false;
        });
    }

Eg. when I get into the Edit-Mode for the Locations Panel, I am able to update the the Form by modal Dialog, go back to the Readonly mode and see the refreshed Panel.

Ist there something like an Event which is triggered when the Row Expand has finished?
Or What would be the best way to achive such an Functionality?

Thanx for your help & Regards Dumitru

[meister-d]

Hi Bforms Team
any updates on this Question? I tried in meantime to do the initialization of the modal Form in some other places. The best results i achieved when adding the modal code to the init event of the rowAction:

//#region Grid
    teamIndex.prototype.initGrid = function () {
        this.$grid.bsGrid({
            uniqueName: 'teamsGrid',
            pagerUrl: this.options.pagerUrl,
            detailsUrl: this.options.getRowsUrl,
            beforeRowDetailsSuccess: $.proxy(this._beforeDetailsSuccessHandler, this),
            afterRowDetailsSuccess: $.proxy(this._afterDetailsSuccessHandler, this),
            inlineActionSelector: '.js-inlineAction',
            //#region rowActions
            rowActions: [{
                btnSelector: '.js-btn_state',
                url: this.options.enableDisableUrl,
                init: function () {
                    $("a[data-modal]").on("click", function (e) {
                        // hide dropdown if any (this is used wehen invoking modal from link in bootstrap dropdown )
                        //$(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');

                        var modalcontent = $('#myModalContent');

                        modalcontent.load(this.href, teamIndex.prototype._modalLoad);

                        return false;
                    })
                },
                handler: $.proxy(this._enableDisableHandler, this)
            }, {
                btnSelector: '.js-btn_delete',
                url: this.options.deleteUrl,
                init: $.proxy(this._deleteHandler, this),
                context: this
            }],
            //#endregion

But after the refresh of the panel to be updated the buttons on that panel are not initialized any more again. Also after the refresh of the panels i must to initialize the modals again.

Regards Dumitru