Buy now!

NinjaGrid

Sample 01. The Basic

HTML

                    

JS

                        
                        var source = [
                            {"id":1,"name":"Jonh","email":"jonh@test.com","birthday":"1980-04-11T00:00:00Z","car":{"name":"Volkswagen","color":"Black","year":2016,"isNew":true}},
                            {"id":2,"name":"Paul","email":"paul@test.com","birthday":"1981-04-13T00:00:00Z","car":{"name":"Volkswagen","color":"Red","year":2010,"isNew":true}},
                            {"id":3,"name":"Marry","email":"marry@test.com","birthday":"1986-05-21T00:00:00Z","car":{"name":"BMW","color":"White","year":2012,"isNew":false}},
                            {"id":4,"name":"Anne","email":"anne@test.com","birthday":"1988-09-18T00:00:00Z","car":{"name":"Volkswagen","color":"Red","year":2011,"isNew":true}},
                            {"id":5,"name":"Josh","email":"josh@test.com","birthday":"1992-03-04T00:00:00Z","car":{"name":"Ferrari","color":"Black","year":2016,"isNew":false}},
                            {"id":6,"name":"Richard","email":"richard@test.com","birthday":"1977-04-01T00:00:00Z","car":{"name":"Fiat","color":"White","year":2011,"isNew":false}},
                            {"id":7,"name":"David","email":"david@test.com","birthday":"1975-04-04T00:00:00Z","car":{"name":"Mercedes","color":"Black","year":2012,"isNew":false}},
                            {"id":8,"name":"Peter","email":"peter@test.com","birthday":"1992-07-07T00:00:00Z","car":{"name":"Volvo","color":"Black","year":2012,"isNew":false}},
                            {"id":9,"name":"Martha","email":"martha@test.com","birthday":"1989-08-15T00:00:00Z","car":{"name":"Saab","color":"Black","year":2016,"isNew":false}},
                            {"id":10,"name":"Amelia","email":"amelia@test.com","birthday":"1988-09-03T00:00:00Z","car":{"name":"Saab","color":"Silver","year":2013,"isNew":false}},
                            {"id":11,"name":"Nancy","email":"nancy@test.com","birthday":"1987-09-21T00:00:00Z","car":{"name":"Volvo","color":"Silver","year":2015,"isNew":false}},
                            {"id":12,"name":"Robert","email":"robert@test.com","birthday":"1981-10-30T00:00:00Z","car":{"name":"Ford","color":"Black","year":2015,"isNew":false}},
                            {"id":13,"name":"Chris","email":"chris@test.com","birthday":"1983-11-02T00:00:00Z","car":{"name":"Ford","color":"White","year":2016,"isNew":false}},
                            {"id":14,"name":"Michael","email":"michael@test.com","birthday":"1993-08-26T00:00:00Z","car":{"name":"Ford","color":"Silver","year":2013,"isNew":false}},
                            {"id":15,"name":"Jack","email":"jack@test.com","birthday":"1992-07-14T00:00:00Z","car":{"name":"Chevrolet","color":"Black","year":2013,"isNew":false}},
                            {"id":16,"name":"Willian","email":"willian@test.com","birthday":"1987-05-04T00:00:00Z","car":{"name":"Ford","color":"Black","year":2011,"isNew":false}},
                            {"id":17,"name":"Saul","email":"saul@test.com","birthday":"1981-05-27T00:00:00Z","car":{"name":"Chevrolet","color":"Black","year":2012,"isNew":true}},
                            {"id":18,"name":"Emily","email":"emily@test.com","birthday":"1983-07-26T00:00:00Z","car":{"name":"Chevrolet","color":"Silver","year":2014,"isNew":true}},
                            {"id":19,"name":"Andrea","email":"andrea@test.com","birthday":"1989-03-22T00:00:00Z","car":{"name":"Volkswagen","color":"Black","year":2014,"isNew":false}},
                            {"id":20,"name":"Andy","email":"andy@test.com","birthday":"1988-03-07T00:00:00Z","car":{"name":"Fiat","color":"White","year":2013,"isNew":false}},
                            {"id":21,"name":"Emma","email":"emma@test.com","birthday":"1966-01-15T00:00:00Z","car":{"name":"Fiat","color":"Red","year":1985,"isNew":true}},
                            {"id":22,"name":"Isis","email":"isis@test.com","birthday":"1975-11-07T00:00:00Z","car":{"name":"Renault","color":"Black","year":2015,"isNew":false}},
                            {"id":23,"name":"Iris","email":"iris@test.com","birthday":"1992-12-03T00:00:00Z","car":{"name":"Renault","color":"Silver","year":2016,"isNew":true}}
                        ];

                        $(document).ready(function () {
                            var columnsModel = new Array();
                            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: 100, 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" });
                            $("#ninjaGridSample").ninjaGrid({
                                dataSource: source,
                                columns: columnsModel,
                                pageSize: 10,
                                sortColumn: "id",
                                sortOrder: "desc",
                                minHeight: 150,
                                maxHeight: 150,
                            });
                        });