Post Request

[raheelyousuf1984]

How to use POST option kindly share any sample how to post data to web api in virtual scrolling

[raheelyousuf1984]

// this.data.items.push(item); // exist in component what does it means kindly share some detail on how it is used in component.ts what is mean by item

[mazdik]

sample virtual-scroll Where did you find this.data.items.push(item)?

[raheelyousuf1984]

I fond it in demo.service kindly helps me i stuck in my project on urgent basis plzzz i want to post data to web api how can i do this plz help

[raheelyousuf1984]

demo.service.ts post(item: any): Promise { // this.data.items.push(item); // exist in component return new Promise((resolve) => { setTimeout(() => resolve(item), 250); }); }

put(item: any): Promise { // this.data.items[this.findSelectedItemIndex(item)] = item; // exist in component return new Promise((resolve) => { setTimeout(() => resolve(item), 250); }); }

delete(item: any): Promise { // this.data.items.splice(this.findSelectedItemIndex(item), 1); // exist in component return new Promise((resolve) => { setTimeout(() => resolve(item), 250); }); }

how can i use the above method with web api plz guide me

[raheelyousuf1984]

sample virtual-scroll Where did you find this.data.items.push(item)?

i want POST PUT DELETE also in it how can i do this

[mazdik]

sample services another sample

[raheelyousuf1984]

sample services Thanks for your swift response how can i use this service in virtual-scroll.ts plz guide your crud table is awesome and i m newbie if you help me so it's much useful for me how can i utilize put post delete in vistual-scroll.ts from the service sample service

[mazdik]

  const columns: Column[];
  const settings: CdtSettings = <CdtSettings>{
    virtualScroll: true,
  };
this.dataManager = new DataManager(columns, settings, yourService);

in template: <app-crud-table [dataManager]="dataManager">

[raheelyousuf1984]

How can i use my web api url i mean for eg my web api address is www.abc.com/api/ceratenewalbum so in post method where i can use it will u plz explain ,i am sorry i disturb you again and again but your crud table is awesome and easy to use so i have to utilize it ,how can my component ts file connect with service post put delete method

[mazdik]

interface DataSource {
  getItems(requestMeta: RequestMetadata): Promise<PagedResult>;
  getItem(row: any): Promise<any>;
  post(row: any): Promise<any>;
  put(row: any): Promise<any>;
  delete(row: any): Promise<any>;
  getOptions?(url: string, parentId: any): Promise<any>;
}

You need to create a class and implement interface methods

export class YourService implements DataSource {
}

[raheelyousuf1984]

export class ApiService { WEB_API_SERVICE = "http://localhost:22387/api/Yarn"; constructor(private httpClient: HttpClient) { }

readYarnColor():Observable<Yarncolor[]>{ return this.httpClient.get<Yarncolor[]>(${this.WEB_API_SERVICE}/YarnColors); } createYarn(yarncolor:Yarncolor):Observable{ return this.httpClient.post(${this.WEB_API_SERVICE}/CreateYarn, yarncolor); } updateYarn(yarncolor:Yarncolor){ return this.httpClient.put(${this.WEB_API_SERVICE}/${yarncolor.YarnColorID}, yarncolor); } deleteYarn(id:number){ return this.httpClient.delete(${this.WEB_API_SERVICE}/api/?id=${id}); } }

This is my custom service how can i use this with your grid all functionalities of crud filter and virtual scroll

[raheelyousuf1984]

help plz sir

[mazdik]

ApiService implements DataSource

readYarnColor -> getItems createYarn -> post updateYarn -> put deleteYarn -> delete

[raheelyousuf1984]

thanks for your time where i can write this in which file

[mazdik]

you must write your class and pass the object to the DataManage constructor

const apiService = new ApiService(...);
new DataManager(columns, settings, apiService);

[raheelyousuf1984]

you must write your class and pass the object to the DataManage constructor

const apiService = new ApiService(...);
new DataManager(columns, settings, apiService);

sorry to disturb u again sir but i found this issue

[mazdik]

1) this.service instead this.yarnService 2) YarncolorService must implement the DataSource interface Class Implementing Interfaces

[raheelyousuf1984]

This is my yarncolor service how can i implement Datasource interface in it i m newbie dont know programming much kindly guids me once again sorry sir to disturb u again

[raheelyousuf1984]

Sir you help me too much but kindly explain me one more thing post(row: any): Promise what is row here

[mazdik]

import {Injectable} from '@angular/core';
import {HttpClient  } from '@angular/common/http';
import {Yarncolor} from './yarncolor;'
import {RequestMetadata, DataSource, PagedResult} from '../../lib/ng-crud-table';

@Injectable({
  providedIn: 'root'
})
export class YarncolorService implements DataSource {

  WEB_API_SERVICE = 'http://localhost:22387/api/Yarn';

  constructor(private httpClient: HttpClient) {}

  getItems(requestMeta: RequestMetadata): Promise<PagedResult> {
    return this.httpClient.get<Yarncolor[]>(`${this.WEB_API_SERVICE}/YarnColors`)
      .toPromise()
      .then(this.extractData);
  }

  getItem(id: number): Promise<Yarncolor> {
    return this.httpClient.get<Yarncolor>(`${this.WEB_API_SERVICE}/api/?id=${id}`).toPromise();
  }

  post(yarncolor: Yarncolor): Promise<Yarncolor> {
    return this.httpClient.post<Yarncolor>(`${this.WEB_API_SERVICE}/CreateYarn`, yarncolor).toPromise();
  }

  put(yarncolor: Yarncolor): Promise<Yarncolor> {
    return this.httpClient.put<Yarncolor>(`${this.WEB_API_SERVICE}/${yarncolor.YarnColorID}`, yarncolor).toPromise();
  }

  delete(id: number): Promise<Yarncolor> {
    return this.httpClient.delete<Yarncolor>(`${this.WEB_API_SERVICE}/api/?id=${id}`).toPromise();
  }

  private extractData(res: any): PagedResult {
    const meta = {
      'totalCount': 10,
      'perPage': 10
    };
    const body = <PagedResult>{'items': res, '_meta': meta};
    return body;
  }

}

[mazdik]

You can also inherit an existing class.

export class NewService extends YarncolorService implements DataSource

[raheelyousuf1984]

ERROR in src/app/demo/basic-demo.component.ts(36,69): error TS2345: Argument of type 'YarncolorService' is not assignable to parameter of type 'DataSource'. Type 'YarncolorService' is missing the following properties from type 'DataSource': getItems, getItem, post, put, delete src/app/virtual/virtual.component.ts(34,79): error TS2345: Argument of type 'YarncolorService' is not assignable to parameter of type 'DataSource'.