Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Eric Rupp
815
Where do we make the call to our Restful Put/Post API Endpoints
posted

Hello,

Here is the TypeScript for my Hierarchical Grid. Where can I hook into the updates done by the user to the grid to make the call to my Web API Put/Post methods?

import { AfterViewInit, Component, ViewChild } from "@angular/core";
import { generateRandomInteger} from "../../utils";
import {
    IGridCreatedEventArgs,
    IgxHierarchicalGridComponent,
    IgxRowIslandComponent,
    IgxGridTransaction,
    IgxHierarchicalTransactionService,
    IgxStringFilteringOperand
} from "igniteui-angular";
import { IDataState, RemoteLoDService } from "../services/remote-lod.service";

@Component({
    providers: [RemoteLoDService],
    selector: "app-hierarchical-grid-lod",
    styleUrls: ["./hierarchical-grid-lod.component.scss"],
    templateUrl: "./hierarchical-grid-lod.component.html"
})
export class HierarchicalGridLoDSampleComponent implements AfterViewInit {
  @ViewChild("hGrid", { static: true })

public hGrid: IgxHierarchicalGridComponent;

public shoreTypes = [
    { type: "#1 Post Shore" , value: "#1 Post Shore"},
    { type: "#2 Post Shore" , value: "#2 Post Shore"},
    // tslint:disable-next-line:object-literal-sort-keys
    { type: "#3 Post Shore" , value: "#3 Post Shore"},
    { type: "#4 Post Shore" , value: "#4 Post Shore"},
    { type: "#5 Post Shore" , value: "#5 Post Shore"},
    { type: "XL- 350cm" , value: "XL- 350cm"},
    { type: "XL- 480cm" , value: "XL- 480cm"},
    { type: "XL- 625cm" , value: "XL- 625cm"},
    { type: "6 feet Modular Alumn Shore" , value:  "6 feet Modular Alumn Shore"},
    { type: "Stub Shore" , value:  "Stub Shore"},
    { type: "Customer Owned Shore" , value: "Customer Owned Shore"}];

constructor(private remoteService: RemoteLoDService) { }



public ngAfterViewInit() {

const dataState: IDataState = {

key: "JobInfoID",

parentID: "",

parentKey: "",

rootLevel: true

};

this.hGrid.isLoading = true;

this.remoteService.getData(dataState).subscribe(

(data) => {

this.hGrid.isLoading = false;

this.hGrid.data = data;

this.hGrid.cdr.detectChanges();

},

(error) => {

this.hGrid.emptyGridMessage = error.message;

this.hGrid.isLoading = false;

this.hGrid.cdr.detectChanges();

});
}


public filter(term) {
    this.hGrid.filter("PrimarySalesman", term, IgxStringFilteringOperand.instance().condition("contains"));
    this.hGrid.markForCheck();
}

public undo() {
    this.hGrid.transactions.undo();
}

public redo() {
    this.hGrid.transactions.redo();
}

public deleteRow(id) {
    this.hGrid.deleteRow(id);
}

public commit() {
    this.hGrid.transactions.commit(this.hGrid.data);
    //this.dialog.close();
}


public discard() {
    this.hGrid.transactions.clear();
}

public addRow() {
    this.hGrid.addRow({
        JobInfoID: generateRandomInteger(1, 10),
        JobNumber: "7777777777",
        JobName: (generateRandomInteger(1, 10) * 10).toString() + " Job Name.",
        ClientName: (generateRandomInteger(1, 10) * 10).toString() + " Client Name.",
        StartDate: new Date(generateRandomInteger(2019, 2050),
        generateRandomInteger(0, 11), generateRandomInteger(1, 25))
        .toISOString().slice(0, 10),
    });
}
public addChildRow() {
   
}

public get undoEnabled(): boolean {
    return this.hGrid.transactions.canUndo;
}

public get redoEnabled(): boolean {
    return this.hGrid.transactions.canRedo;
}


public dateFormatter(val: string) {

return new Intl.DateTimeFormat("en-US").format(new Date(val));

}



public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) {}
}
  • 29417
    Offline posted

    Hello Eric, 

    Thank you for posting in our forum. 

    You can refer to the following topic sample which uses the Transaction Service to accumulate and commit transactions in your grid:

    https://stackblitz.com/angular/mklyrjkxmba

    Note that all transactions can be aggregated and retrieved via the transaction service’s getAggregatedChanges method.

    The service also has a onStateUpdate event, which you can subscribe to when a change occurs so that you can invoke your API calls to apply the new changes to your backend. 

    Let me know if you have any additional questions or concerns. 

    Best Regards,

    Maya Kirova