Angular Grid - Azure Cosmos DB

Angular Grid - Consuming Data From Azure Cosmos DB

In this tutorial we will show how to create an application with Azure Cosmos DB through SQL .NET API and Azure Portal, and configure an Angular Smart Grid to display Cosmos DB data.

Create .NET Web App with Azure Cosmos DB

Follow this Develop an ASP.NET Core MVC web application with Azure Cosmos DB by using .NET SDK Tutorial.
It demonstrates how to create an Azure Cosmos DB SQL API account, add data and a collection by using the Azure Portal, and build and deploy a sample To-Do List web application.

Add Read Action for Retrieving Data to Smart Grid

After completing the tutorial, add the following action for getting the items as json inside the ItemController: 

  [ActionName("SmartRead")]
  public async Task<ActionResult> SmartRead()
  {
      var items = await _cosmosDbService.GetItemsAsync("SELECT * FROM c");

      return Json(items);
  }

Setup The Angular Application

The next step is to set the Angular application and Smart Grid to consume the added endpoint.

Follow the Getting Started guide to set up your Angular application with Smart UI.

Follow the Angular Grid guide to read more about how you can use the Angular Grid component.

After that you need to create a DataService to send a GET http request, like this: 

  import { Injectable } from '@angular/core';
  import { Observable, of } from 'rxjs';

  import { HttpClient } from "@angular/common/http";

  @Injectable({
    providedIn: 'root',
  })
  export class DataService {

    constructor(private httpClient: HttpClient) { }

    public getTodos(): Observable<any> {
      return this.httpClient
          .get("https://localhost:44314/Item/SmartRead");
    }
  }

Now you can use the service in you component.

app.component.html: 

  <smart-grid [dataSource]="data" [columns]="columns" #grid ></smart-grid>
app.component.ts: 
  import { Component, OnInit } from '@angular/core';
  import { GridColumn, Smart } from 'smart-webcomponents-angular/grid';

  import { DataService } from 'src/services/data-service';

  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html'
  })

  export class AppComponent implements OnInit {	
    data: any = [];

    constructor(private dataService: DataService) { }

    ngOnInit(): void {
      this.dataService.getTodos().subscribe(r => this.data = r );
    }

     dataSource = new Smart.DataAdapter({
          dataSource: this.data,
          dataFields: [
              'id: number',
              'name: string',
              'description: string',
              'completed: bool'
          ]
      });

      columns: GridColumn[] = [
          { label: 'Name', dataField: 'name' },
          { label: 'Description', dataField: 'description' },
          { label: 'Completed', dataField: 'completed', template: 'checkBox' }
      ];
  }

Result:
Result