Buy now!

NinjaGrid

Sample 08. Selecting multiple rows

HTML

                        

JS

                        $(document).ready(function () {
                            var columnsModel = new Array();
                            columnsModel.push({ header: "", property: "", width: 26, align: "center", isCheckbox: true, autoCheck:true, disabled: true }); //-- optional column
                            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: 300,
                                multiSelect: true
                            });
                        });

                        function showAllSelected() {
                            var list = $("#ninjaGridSample").ninjaGridGetSelectedRows();

                            var names = new Array();
                            for (let item of list) {
                                names.push(item.name);
                            }

                            ninjaModal({
                                title: "Selected records",
                                html: (list.length > 0 ? "(" + list.length + ") selected records" : "No selected records.") + "
" + names.join(", "), css:"nc-modal-small" }); }