NinjaGrid

Sample 04. Formatting cells

                        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: 150, sort: true, align: "center", format: function (vl, obj, td) { //-- define a function to format this cell based on the row's binded object
                                var year = parseInt(vl.split("-")[0]);
                                if (year < 2000 && year >= 1990)
                                    td.css("color", "green");
                                if (year < 1990 && year >= 1980)
                                    td.css("color", "orange");
                                if (year < 1980)
                                    td.css("color", "red");

                                return dateFormat(vl, { dateFormat: "d/m/Y", timeFormat: "" });
                            }
                        });
                        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
                        });