NinjaGrid

Sample 03. Custom buttons

                        var columnsModel = new Array();
                        columnsModel.push({ header: "", width: 100, buttons: ["edit", "delete", "menu"] }); //-- setting a column to hold the buttons

                        columnsModel.push({ header: "ID", property: "id", width: 60, sort: true });
                        columnsModel.push({ header: "Name", property: "name", width: 200, sort: true });
                        columnsModel.push({ header: "Birthday", property: "birthday", width: 150, sort: true, align: "center", format: "date" });
                        columnsModel.push({ header: "E-mail", property: "email", width: 250, sort: true });
                        columnsModel.push({ header: "Car Name", property: "car.name", width: 100, sort: true, align: "left" });
                        columnsModel.push({ header: "Car Year", property: "car.year", width: 100, sort: true, align: "right" });

                        //-- call ninjaGrid
                        $("#ninjaGridSample").ninjaGrid({
                            url: "/NinjaGrid/getCustomers",
                            type: "GET",
                            keyColumn: "id",
                            columns: columnsModel,
                            pageSize: 10,
                            sortColumn: "id",
                            sortOrder: "desc",
                            minHeight: 150,
                            maxHeight: 150,
                            onRowDoubleClick: function (tr, obj) {                  //-- defining an event for row's double click
                                alert("Editing: " + obj.id + "-" + obj.name);
                            },
                            buttons: {                                              //-- defining the css for each button
                                "edit": { css: "nc-btn fa fa-edit" }, 
                                "delete": { css: "nc-btn fa fa-trash" },
                                "menu": { css: "nc-btn fa fa-bars" }
                            },

                            events: {                                               //-- setting the click event for each button
                                "edit": function(obj, e){
                                    alert("Editing: " + obj.id + "-" + obj.name);
                                },
                                "delete": function (obj, e) {
                                    alert("Deleting: " + obj.id + "-" + obj.name);
                                },
                                "menu": function (obj, e) {
                                    alert("Showing: " + obj.id + "-" + obj.name);
                                }
                            }
                        });