chore: update versions & add data types

package.json

@@ -18,27 +18,27 @@
     "@angular/platform-browser": "~13.2.0",
     "@angular/platform-browser-dynamic": "~13.2.0",
     "@angular/router": "~13.2.0",
-    "@progress/kendo-angular-grid": "^6.1.0",
+    "@progress/kendo-angular-grid": "^14.0.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4",
-    "@progress/kendo-angular-buttons": "^7.0.3",
-    "@progress/kendo-angular-common": "^2.0.2",
-    "@progress/kendo-angular-dateinputs": "^6.0.1",
-    "@progress/kendo-angular-dropdowns": "^6.0.1",
-    "@progress/kendo-angular-excel-export": "^4.0.3",
-    "@progress/kendo-angular-inputs": "^8.0.6",
-    "@progress/kendo-angular-intl": "^3.1.2",
-    "@progress/kendo-angular-l10n": "^3.0.3",
-    "@progress/kendo-angular-label": "^3.1.2",
-    "@progress/kendo-angular-pdf-export": "^3.0.3",
-    "@progress/kendo-angular-popup": "^4.0.4",
-    "@progress/kendo-data-query": "^1.5.5",
-    "@progress/kendo-drawing": "^1.16.2",
-    "@progress/kendo-licensing": "^1.2.2",
-    "@progress/kendo-angular-treeview": "^6.0.1",
+    "@progress/kendo-angular-buttons": "^14.0.1",
+    "@progress/kendo-angular-common": "^14.0.1",
+    "@progress/kendo-angular-dateinputs": "^14.0.1",
+    "@progress/kendo-angular-dropdowns": "^14.0.1",
+    "@progress/kendo-angular-excel-export": "^14.0.1",
+    "@progress/kendo-angular-inputs": "^14.0.1",
+    "@progress/kendo-angular-intl": "^14.0.1",
+    "@progress/kendo-angular-l10n": "^14.0.1",
+    "@progress/kendo-angular-label": "^14.0.1",
+    "@progress/kendo-angular-pdf-export": "^14.0.1",
+    "@progress/kendo-angular-popup": "^14.0.1",
+    "@progress/kendo-data-query": "^1.7.0",
+    "@progress/kendo-drawing": "^1.18.0",
+    "@progress/kendo-licensing": "^1.3.3",
+    "@progress/kendo-angular-treeview": "^14.0.1",
     "@angular/localize": "~13.2.0",
-    "@progress/kendo-theme-default": "^5.2.0"
+    "@progress/kendo-theme-default": "^7.0.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~13.2.4",

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { categories } from './data.categories';
+import { Category, categories } from './data.categories';
 import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid';
 import { SortDescriptor } from '@progress/kendo-data-query';
 // import { FilterDescriptor } from "@progress/kendo-data-query";
@@ -14,11 +14,11 @@ import { Observable } from 'rxjs';
 })
 export class AppComponent {
     // used for the DropDownList
-    public dropDownItems = categories;
-    public defaultItem = { text: 'Filter by Category', value: null };
+    public dropDownItems: Category[] = categories;
+    public defaultItem: Category = { text: 'Filter by Category', value: null };
 
     // used for the Grid
-    public gridItems!: Observable<GridDataResult>;
+    public gridItems: Observable<GridDataResult> | undefined;
     public pageSize: number = 10;
     public skip: number = 0;
     public sortDescriptor: SortDescriptor[] = [];
@@ -43,7 +43,7 @@ export class AppComponent {
         this.loadGridItems();
     }
 
-    public handleFilterChange(item: { text: string; value: number | null }): void {
+    public handleFilterChange(item: Category): void {
         this.filterTerm = item.value;
         this.skip = 0;
         this.loadGridItems();

src/app/data.categories.ts

@@ -1,4 +1,9 @@
-export const categories: Array<{ text: string; value: number }> = [
+export class Category {
+    public text: string = '';
+    public value: number | null = 0;
+}
+
+export const categories: Category[] = [
     { text: 'Beverages', value: 1 },
     { text: 'Condiments', value: 2 },
     { text: 'Confections', value: 3 },