How To Bind KendoUI Grid In Angular With .NET Core API With Multilayer Architecture And Angular Routing

import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject, of, throwError  } from 'rxjs';
import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { catchError, tap,map } from 'rxjs/operators';
import { UserModel } from '../models/app.UserModel';
import { filtermodel } from '../models/filtermodel';
import { NotificationService } from "@progress/kendo-angular-notification";
import { Component, ViewChild, TemplateRef, Input, Output, EventEmitter } from "@angular/core";

const CREATE_ACTION = 'create';
const UPDATE_ACTION = 'update';
const REMOVE_ACTION = 'destroy';

@Injectable()
export class EditService extends BehaviorSubject < any[] > {
    @ViewChild("template", {
        read: TemplateRef
    })
    public notificationTemplate: TemplateRef < any > | undefined;
    token: any;
    public apiUrl = environment.apiEndpoint + "/api/User/";
    private data: any;
    constructor(private http: HttpClient, private notificationService: NotificationService) {
        super([]);
        this.data = JSON.parse(localStorage.getItem('AdminUser') || '{}');
        this.token = this.data.token;
    }
    public read() {
        if (this.data.length) {
            return super.next(this.data);
        }
        this.GetAllUsers().pipe(tap(data => {
            this.data = data;
        })).subscribe(data => {
            super.next(data);
        });
    }
    public GetUserId(Id: any) {
        this.apiUrl = environment.apiEndpoint + "/api/User/";
        var editUrl = this.apiUrl + Id;
        let headers = new HttpHeaders({
            'Content-Type': 'application/json'
        });
        headers = headers.append('Authorization', 'Bearer ' + `${this.token}`);
        return this.http.get < UserModel > (editUrl, {
            headers: headers
        }).pipe(tap(data => data), catchError(this.handleError));
    }
    public GetUserName(UserName: any) {
        this.apiUrl = environment.apiEndpoint + "/api/User/";
        var editUrl = this.apiUrl + "GetByUserName?username=" + UserName;
        let headers = new HttpHeaders({
            'Content-Type': 'application/json'
        });
        headers = headers.append('Authorization', 'Bearer ' + `${this.token}`);
        return this.http.get < UserModel > (editUrl, {
            headers: headers
        }).pipe(tap(data => data), catchError(this.handleError));
    }
    // Save User
    public SaveUser(usermodel: UserModel) {
        let formdata = new FormData();
        const file = usermodel.file;
        formdata.append("UserName", usermodel.UserName);
        formdata.append("Contactno", usermodel.Contactno);
        formdata.append("EmailId", usermodel.EmailId);
        formdata.append("FullName", usermodel.FullName);
        formdata.append("Password", usermodel.Password);
        formdata.append("imagename", usermodel.imagename);
        formdata.append("Status", "true");
        formdata.append('file', usermodel.file);
        this.apiUrl = environment.apiEndpoint + "/api/User";
        var putUrl = this.apiUrl + "/" + usermodel.UserId;
        let headers = new HttpHeaders({
            'Authorization': 'Bearer ' + `${this.token}`
        });
        if (usermodel.UserId > 0) {
            //headers = headers.append('Authorization', 'Bearer ' + `${this.token}`);
            return this.http.put < any > (putUrl, formdata, {
                headers: headers
            }).pipe(catchError(this.handleError));
        } else {
            return this.http.post < any > (this.apiUrl, formdata, {
                headers: headers
            }).pipe(catchError(this.handleError));
        }
    }
    public save(data: any, isNew ? : boolean) {
        const action = isNew ? CREATE_ACTION : UPDATE_ACTION;
        this.reset();
        this.GetAllUsers().subscribe(() => this.read(), () => this.read());
    }
    public remove(data: any) {
        this.reset();
        var deleteUrl = this.apiUrl + data.UserId;
        let headers = new HttpHeaders({
            'Content-Type': 'application/json'
        });
        headers = headers.append('Authorization', 'Bearer ' + `${this.token}`);
        return this.http.delete < any > (deleteUrl, {
            headers: headers
        }).pipe(catchError(this.handleError));
    }
    public resetItem(dataItem: any) {
        if (!dataItem) {
            return;
        }
        // find orignal data item
        const originalDataItem = this.data.find((item: {
            ProductID: any;
        }) => item.ProductID === dataItem.ProductID);
        // revert changes
        Object.assign(originalDataItem, dataItem);
        super.next(this.data);
    }
    private reset() {
        this.data = [];
    }
    public GetAllUsers() {
        var apiUrl = environment.apiEndpoint + "/api/User/";
        let headers = new HttpHeaders({
            'Content-Type': 'application/json'
        });
        headers = headers.append('Authorization', 'Bearer ' + `${this.token}`);
        return this.http.get < UserModel[] > (this.apiUrl, {
            headers: headers
        }).pipe(tap(data => data), catchError(this.handleError));
    }
    public GetAllserverUsers(pageSize: number, skip: number, model: filtermodel) {
        let formdata = new FormData();
        formdata.append("field", "");
        formdata.append("operatortype", "");
        formdata.append("value", "");
        formdata.append("pageSize", "" + pageSize + "");
        formdata.append("skip", "" + skip + "");
        // var getUrl = this.apiUrl+"GetAllServerList?pageSize=" + pageSize+"&skip="+ skip;
        //var getUrl = this.apiUrl+"GetAllServerList?pageSize=" + pageSize+"&skip="+ skip;
        var putUrl = this.apiUrl + "GetAllServerList";
        let headers = new HttpHeaders({
            'Authorization': 'Bearer ' + `${this.token}`
        });
        //  let headers = new HttpHeaders({ 'Content-Type': 'application/json' });
        //  headers = headers.append('Authorization', 'Bearer ' + `${this.token}`);
        return this.http.post < any > (putUrl, formdata, {
                headers: headers
            })
            //  return this.http.get<UserModel[]>(getUrl, { headers: headers })
            .pipe(tap(data => data), catchError(this.handleError));
    }
    public GetFilteredUsers(pageSize: number, skip: number, model: string) {
        debugger
        let formdata = new FormData();
        formdata.append("model", model);
        // formdata.append("operatortype",model.operator);
        // formdata.append("value",model.value);
        // formdata.append("pageSize",""+pageSize +"");
        // formdata.append("skip", ""+ skip +"");
        //  var putUrl = this.apiUrl+"GetFilteredList?pageSize=" + pageSize+"&skip="+ skip;
        var putUrl = this.apiUrl + "GetFilteredList";
        //   let headers = new HttpHeaders({ 'Content-Type': 'application/json' });
        // headers = headers.append('Content-Type', 'application/x-www-form-urlencoded');
        //headers = headers.append('Content-Type', 'application/json; charset=utf-8');
        //  headers = headers.append('Authorization', 'Bearer ' + `${this.token}`);
        let headers = new HttpHeaders({
            'Authorization': 'Bearer ' + `${this.token}`
        });
        //  return this.http.put<any>(putUrl, formdata, { headers: headers })
        return this.http.post < any > (putUrl, formdata, {
            headers: headers
        }).pipe(tap(data => data), catchError(this.handleError)
            //  return this.http.get<UserModel[]>(getUrl, { headers: headers }).pipe(tap(data => data),
        );
    }
    private fetch(action: string = '', data ? : any): Observable < any[] > {
        return this.http.jsonp(`https://demos.telerik.com/kendo-ui/service/Products/${action}?${this.serializeModels(data)}`, 'callback').pipe(map(res => < any[] > res));
    }
    private serializeModels(data ? : any): string {
        return data ? `&models=${JSON.stringify([data])}` : '';
    }
    private handleError(error: HttpErrorResponse) {
        if (error.error instanceof ErrorEvent) {
            // A client-side or network error occurred. Handle it accordingly.
            console.error('An error occurred:', error.error.message);
        } else {
            // The backend returned an unsuccessful response code.
            // The response body may contain clues as to what went wrong,
            console.error(`Backend returned code ${error.status}, ` + `body was: ${error.error}`);
        }
        // return an observable with a user-facing error message
        return throwError('Something bad happened; please try again later.');
    };
    public showSuccess(): void {
        this.notificationService.show({
            content: "User saved successfully",
            hideAfter: 600,
            position: {
                horizontal: "center",
                vertical: "top"
            },
            animation: {
                type: "fade",
                duration: 400
            },
            type: {
                style: "success",
                icon: true
            },
        });
    }
    public showError(result: string): void {
        let contentmessage = "";
        contentmessage = result;
        this.notificationService.show({
            content: contentmessage,
            hideAfter: 600,
            position: {
                horizontal: "center",
                vertical: "top"
            },
            animation: {
                type: "fade",
                duration: 400
            },
            type: {
                style: "error",
                icon: true
            },
        });
    }
}

Step 10

Add the following code in users-grid.component.css,

.k-grid-div-root{
    margin-left: 120px;
    margin-right:  120px;
    /* position: fixed;
    top: 50%;
    left: 20%; */
}
button{
    color: rgb(42, 39, 42);
    background-color: rgb(243, 183, 213);
}

Step 11

Add the following code in app-routing.module.ts,

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LayoutComponent } from './layout/layout.component';
import { LoginComponent } from './login/login.component';
// import { UserlistComponent } from './userlist/userlist.component';
import { UsersGridComponent } from './users-grid/users-grid.component';

const routes: Routes = [
  {
    path: 'Admin',
    component: LayoutComponent,
    children: [
      { path: 'Dashboard', component: DashboardComponent }

    ]
  },
  {
    path: 'Admin',
    component: LayoutComponent,
    children: [
      { path: 'UserList', component : UsersGridComponent }
    ]
  },
  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: '', component : UsersGridComponent }
    ]
  },

  // {
  //   path: '',
  //   component: LayoutComponent,
  //   children: [
  //     { path: '', component : UserlistComponent }
  //   ]
  // },
  { path: 'login', component : LoginComponent },
  { path: '**', redirectTo: "login", pathMatch: 'full' },
//  { path: '', redirectTo: "login", pathMatch: 'full' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Step 12

Add the following code in app.component.html,

<router-outlet></router-outlet>

Step 13

Add the following code in app.module.ts,

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import 'hammerjs';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LayoutComponent } from './layout/layout.component';
import { UsersGridComponent } from './users-grid/users-grid.component';
import { UsersGridEditComponent } from './users-grid-edit/users-grid-edit.component';
import { EditService } from './users-grid/services/edit.service';

// kendo_ libraries
import { InputsModule } from '@progress/kendo-angular-inputs';
import { LabelModule } from '@progress/kendo-angular-label';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DialogModule } from '@progress/kendo-angular-dialog';
import { UploadModule } from '@progress/kendo-angular-upload';
import { FileSelectModule } from '@progress/kendo-angular-upload';
import { PDFExportModule } from '@progress/kendo-angular-pdf-export';
import { NotificationModule } from '@progress/kendo-angular-notification';
import { NavigationModule } from '@progress/kendo-angular-navigation';
import { IconsModule } from '@progress/kendo-angular-icons';
import { IndicatorsModule } from '@progress/kendo-angular-indicators';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { SharedModule } from '@progress/kendo-angular-grid';
import { GridModule } from '@progress/kendo-angular-grid';

@NgModule({
  declarations: [
    AppComponent,
    LayoutComponent,
    DashboardComponent,
    LoginComponent,
    UsersGridComponent,
    UsersGridEditComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    BrowserAnimationsModule,
    CommonModule,
    HttpClientJsonpModule,
    HttpClientModule,
    GridModule,
    InputsModule,
    LabelModule,
    ChartsModule,
    ButtonsModule,
    DialogModule,
    UploadModule,
    FileSelectModule,
    PDFExportModule,
    NotificationModule,
    NavigationModule,
    IconsModule,
    IndicatorsModule,
    LayoutModule,
    GridModule,
    SharedModule
  ],
  providers: [
    {
        deps: [HttpClient],
        provide: EditService
    }
      ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 14

Add the following code in index.html,

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Project1</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />
  </head>
<body>
  <app-root></app-root>
</body>
</html>

Step 15

Add the following code in styles.css,

/* You can add global styles to this file, and also import other style files */
body { font-family: "RobotoRegular",Helvetica,Arial,sans-serif; font-size: 14px; margin: 0; }
      my-app { display: block; box-sizing: border-box; padding: 30px; }
      my-app > .k-icon.k-i-loading { font-size: 64px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
      .example-wrapper { min-height: 280px; align-content: flex-start; }
      .example-wrapper p, .example-col p { margin: 0 0 10px; }
      .example-wrapper p:first-child, .example-col p:first-child { margin-top: 0; }
      .example-col { display: inline-block; vertical-align: top; padding-right: 20px; padding-bottom: 20px; }
      .example-config { margin: 0 0 20px; padding: 20px; background-color: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.08); }
      .event-log { margin: 0; padding: 0; max-height: 100px; overflow-y: auto; list-style-type: none; border: 1px solid rgba(0,0,0,.08); background-color: #fff; }
      .event-log li {margin: 0; padding: .3em; line-height: 1.2em; border-bottom: 1px solid rgba(0,0,0,.08); }
      .event-log li:last-child { margin-bottom: -1px;}

      .k-grid .k-grid-header, .k-grid .k-grid-content {
        background: #fff;
        color: rgb(65, 48, 13);
      }
      .k-grid-div-root[_ngcontent-apc-c709] {
        position: inherit !important;
      }
      .k-appbar-light{
        background-color: #d6f0e8;
      }
      .k-grid-header .k-filterable{
          width: 155px !important;
      }
      .k-touch-action-auto{
        width: 155px !important;
      }
      .navbar {
    background-color:  #549ae5 !important;
}

Step 16

Add the following code in layout.component.css,

:host {
    padding: 0;
}
kendo-appbar .title {
    font-size: 18px;
    margin: 10px;
}
kendo-badge-container {
    margin-right: 8px;
}
kendo-appbar ul {
    font-size: 14px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
}
kendo-appbar li {
    margin: 0 9px;
}
kendo-appbar li:hover {
    cursor: pointer;
    color: #d6002f;
}
kendo-appbar .actions .k-button {
    padding: 0;
}
kendo-breadcrumb {
    margin-left: 30px;
}

.DashFont{
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Step 17

Add the following code in users-grid.component.html,

<div class="k-grid-div-root">
  <kendo-grid [kendoGridBinding]="gridData" [pageSize]="10" [pageable]="true" [height]="510"
    (dataStateChange)="onStateChange($event)" (edit)="editHandler($event)" (remove)="removeHandler($event)"
    (add)="addHandler()" [columnMenu]="true" [filterable]="true" [sortable]="true">
    >
    <ng-template kendoGridToolbarTemplate>
      <button kendoGridAddCommand>Add new</button>
    </ng-template>
    <kendo-grid-column field="FullName" [width]="140"></kendo-grid-column>
    <kendo-grid-column field="UserName" [width]="120"></kendo-grid-column>
    <kendo-grid-column field="EmailId" [width]="100"></kendo-grid-column>
    <kendo-grid-column field="Contactno" [width]="130"></kendo-grid-column>
    <kendo-grid-column title="command">
      <ng-template kendoGridCellTemplate>
        <button kendoGridEditCommand [primary]="true">Edit</button>
        <button kendoGridRemoveCommand>Delete</button>
      </ng-template>
    </kendo-grid-column>
  </kendo-grid>
</div>

<app-users-grid-edit [model]="editDataItem" [isNew]="isNew" (save)="saveHandler($event)" (cancel)="cancelHandler()">
</app-users-grid-edit>

Now run the following command

ng serve open

Summary

In this article, we learn how to create angular project, set routing, and bind kendoUI grid with API.