jQuery-bootgrid modal dialog

Question

I have a jQuery-bootgrid as described in the examples on the homepage. In the last column I have two buttons for Edit/Delete of the row-content.

All I want to do is to show a modal dialog when the user clicks the Delete-button. However, nothing happens on click. No error, no warning, nothing.

Here is the code for the bootgrid commands-part:

"commands": function(column, row) {
                return "<button type=\"button\" class=\"btn btn-sm btn-primary command-edit\" data-row-id=\"" + row.EventId + "\"><span class=\"icon glyphicon glyphicon-pencil\"></span>@Translator.TranslateGlobal(Keys.Global.Edit)</button> " +
                    "<button class=\"btn-default btn\" data-content-close=\"Close\" data-content-id=\"Div\" data-content-save=\"Save\" data-target=\"#6698CB2F-2948-45D9-8902-2C13A7ED6335\" data-title=\"Title\" data-toggle=\"modal\" type=\"button\">Show modal</button>";
            },

I have the exact same button outside the bootgrid and on click it shows the dialog as expected. Any ideas where to look at or what is causing this behavior?

score 3 · Answer 1 · answered Jun 16 '15 at 19:37

Opening Modal on click Event Reference

  formatters: {
            "commands": function (column, row) {
                return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\"  data-toggle=\"modal\" data-target=\"#confirmation\"><span class=\"fa fa-pencil\"></span></button> " +
                    "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" ><span class=\"fa fa-trash-o\"></span></button>";
            }
        }
    }).on("loaded.rs.jquery.bootgrid", function () {
        /* Executes after data is loaded and rendered */
        $(this).find(".command-delete").click(function (e) {
            $($(this).attr("data-target")).modal("show");
        });
    });

Hope it works :)

That puts a click handler on every row. You'd be better to put one on the table itself, then filter that for any click bubbling up from a row. That way you don't have to reapply the handler if the grid pages, and there are many fewer event handlers (more efficient): $('table').on("click",".command-delete", function(e){ console.log('your stuff happens here'); }); — philw, Jun 26 '15 at 07:37

ZaibTabs · Answer 2 · 2018-09-10T09:47:42.983

its an excellent idea, Could you please show in a script format please. Which part of the script we can replace.

That way you don't have to reapply the handler if the grid pages, and there are many fewer event handlers (more efficient): $('table').on("click",".command-delete", function(e){ console.log('your stuff happens here'); }); – philw Jun 26

 formatters: {
        "commands": function (column, row) {
            return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\"  data-toggle=\"modal\" data-target=\"#confirmation\"><span class=\"fa fa-pencil\"></span></button> " +
                "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" ><span class=\"fa fa-trash-o\"></span></button>";
        }
    }
}).on("loaded.rs.jquery.bootgrid", function () {
    /* Executes after data is loaded and rendered */
    $(this).find(".command-delete").click(function (e) {
        $($(this).attr("data-target")).modal("show");
    });
});

I tried the following it does display the buttons in the jquery.bootgrid but the button is not responsive. — ZaibTabs, Sep 21 '18 at 15:56

jQuery-bootgrid modal dialog

2 Answers2