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?

Answer 1

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 :)

Answer 2

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