Hi Alex,
Please below my code containing the grid setup.
(function () {
"use strict";
angular
.module("app")
.controller("PatrolsController", controller);
controller.$inject = ["$state", "routes", "createdBy"];
function controller($state, routes, createdBy) {
const vm = this;
function convertDateToUTC(filter) {
const filters = filter.filters;
for (let i = 0; i < filters.length; i++) {
const field = filters[i].field;
if (field === "started_at" || field === "completed_at") {
const date = filters[i].value;
filter.filters[i].value = new Date(date.getTime() - date.getTimezoneOffset() * 60000).toJSON();
console.log(filter.filters[i].value);
}
}
}
function onChange() {
const grid = $("#grid").data("kendoGrid");
const selectedItem = grid.dataItem(grid.select());
$state.go("app.patrol.details", {id: selectedItem.id});
}
function routeFilter(element) {
element.kendoDropDownList({
dataSource: {
data: routes
},
dataTextField: "route_name",
dataValueField: "id",
optionLabel: "--Select Route--"
});
}
function createdByFilter(element) {
element.kendoDropDownList({
dataSource: {
data: createdBy
},
dataTextField: "created_by",
dataValueField: "id",
optionLabel: "--Select Person--"
});
}
function dateFilter(element) {
element.kendoDateTimePicker({
format: "dd/MM/yy HH:mm"
});
}
function statusFilter(element) {
element.kendoDropDownList({
dataSource: {
data: [{id: "complete", name: "Complete"}, {
id: "incomplete",
name: "Incomplete"
}, {id: "in_progress", name: "In Progress"}]
},
dataTextField: "name",
dataValueField: "id",
optionLabel: "--Select Status--"
});
}
function flaggedFilter(element) {
element.kendoDropDownList({
dataSource: {
data: [{id: 1, name: "Issues"}, {id: 0, name: "No Issues"}]
},
dataTextField: "name",
dataValueField: "id",
optionLabel: "--Select Status--"
});
}
function onFilterMenuInit(e) {
if (e.field === "started_at" || e.field === "completed_at") {
const beginOperator = e.container.find("[data-role=dropdownlist]:eq(0)").data("kendoDropDownList");
beginOperator.value("gte");
beginOperator.trigger("change");
beginOperator.readonly();
const logicOperator = e.container.find("[data-role=dropdownlist]:eq(1)").data("kendoDropDownList");
logicOperator.readonly();
const endOperator = e.container.find("[data-role=dropdownlist]:eq(2)").data("kendoDropDownList");
endOperator.value("lte");
endOperator.trigger("change");
endOperator.readonly();
}
}
function onFilter(e) {
if (e.field === "started_at") {
convertDateToUTC(e.filter)
}
}
function onParse(response) {
angular.forEach(response.rows, function (row) {
row.route_id = row.route_name;
row.created_id = row.created_by;
row.started_at = new Date(row.started_at);
row.completed_at = _.isNil(row.completed_at) ? "" : new Date(row.completed_at);
row.status = row.in_progress ? "In Progress" :
row.incomplete ? "Incomplete" : "Complete";
row.status_class = row.in_progress ? "status--progress" :
row.incomplete ? "status--incomplete" : "status--complete";
row.flagged = row.flagged ? "Issue" : "";
row.flagged_class = row.flagged ? "status status--incomplete" : "";
});
return response;
}
vm.gridOptions = {
toolbar: ["excel"],
excel: {
fileName: "inspections.xlsx",
filterable: true,
allPages: true
},
dataSource: {
transport: {
read: "/api/patrols",
dataType: "json"
},
schema: {
total: "count",
data: "rows",
parse: onParse
},
serverSorting: true,
serverPaging: true,
serverFiltering: true,
pageSize: 50,
sort: {field: "started_at", dir: "desc"}
},
sortable: true,
groupable: false,
reorderable: false,
selectable: "row",
resizable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: [100, 200, 500]
},
columns: [
{
field: "route_id",
title: "Route",
filterable: {
ui: routeFilter,
extra: false
}
},
{
field: "created_id",
title: "Inspected By",
filterable: {
ui: createdByFilter,
extra: false
}
},
{
field: "started_at",
title: "Started At",
type: "date",
format: "{0: dd/MM/yy HH:mm}",
filterable: {
ui: dateFilter,
extra: true,
messages: {
info: "Patrols Started between:"
},
operators: {
date: {
gte: "Begin Date",
lte: "End Date"
}
}
}
},
{
field: "completed_at",
title: "Completed At",
type: "date",
format: "{0: dd/MM/yy HH:mm}",
filterable: {
ui: dateFilter,
extra: true,
messages: {
info: "Patrols Started between:"
},
operators: {
date: {
gte: "Begin Date",
lte: "End Date"
}
}
}
},
{
field: "status",
title: "Status",
template: "<span class='status #=status_class#'>#=status#</span>",
filterable: {
extra: false,
ui: statusFilter
}
},
{
field: "flagged",
title: "Issues",
template: "<span class='#=flagged_class#'>#=flagged#</span>",
filterable: {
extra: false,
ui: flaggedFilter
}
}
],
filterMenuInit: onFilterMenuInit,
change: onChange,
filter: onFilter
};
}
})();
Kind regards,
Ciaran