0

I want to use events to handle this task. I tried the method explained in this thread but it did not work. I have the following code:

childComponent.ts:

//Getting parent method (Equipments)
@Output() addCompleted = new EventEmitter<string>();
processComplete() {
      this.addCompleted.emit('complete');
}

parentComponent.ts:

onUpdateGrid(e: any){
    alert("Works!")
  }

parentComponent.html:

<ejs-grid #Grid class="data-grid" (addCompleted)="onUpdateGrid($event)" . . .>
    . . . .
</ejs-grid>

The only thing I could not follow from that thread is directives: [ ChildComponent ] in @Component because it is deprecated.

When I run the code, the parent method does not run.

Update: Child component decorator:

@Component({
  selector: 'app-add-equipment',
  templateUrl: './add-equipment.component.html',
  styleUrls: ['./add-equipment.component.scss']
})
Alex Wright
  • 421
  • 1
  • 11
  • How/when is `processComplete` called? – eol Sep 13 '22 at 08:25
  • @eol When is button is pressed. – Alex Wright Sep 13 '22 at 08:27
  • Did you import it like this: `import { Output, EventEmitter } from '@angular/core';` – Eli Porush Sep 13 '22 at 08:37
  • @EliPorush Yes, There are no errors in the code. – Alex Wright Sep 13 '22 at 08:39
  • Did you check that this function `processComplete` is called when you click the button? – Eli Porush Sep 13 '22 at 08:57
  • @AlexWright is `` your child component selector? – akotech Sep 13 '22 at 08:58
  • @akotech yes, it is a Syncfusion component – Alex Wright Sep 13 '22 at 09:03
  • @akotech the button has a submit type and is in the child component and by pressing it, some data are stored in the database. I want to refresh the parent component after submitting it. For this, I need to call a function in the parent component. – Alex Wright Sep 13 '22 at 09:10
  • Can you provide a reproducible example e.g. on codepen? – eol Sep 13 '22 at 09:14
  • @AlexWright could you pls edit the question and add the full child Component class code? – akotech Sep 13 '22 at 09:17
  • @akotech I updated. – Alex Wright Sep 13 '22 at 09:21
  • @AlexWright Sorry I should've been more specific. What I really wanted to see was the `@Component` decorator to see the selector. – akotech Sep 13 '22 at 09:23
  • 1
    I think you need to rephrase the question... You asked a very confusing question. While the ejs-grid is rendered by your "parent component", it is a third party component that you have no control of, so you don't need to add a new @Output to deal with inter-component communication. You need to [read the docs](https://ej2.syncfusion.com/angular/documentation/api/grid/#events) for the ejs-grid and find something that you can use to react to whatever is happening in that component. What are you trying to achieve exactly? Refresh the grid after you added a new equipment? – Octavian Mărculescu Sep 13 '22 at 09:24
  • @OctavianMărculescu yes, I want to refresh the grid and view the newly added record. – Alex Wright Sep 13 '22 at 09:27
  • OK, then you need to clear the following: Which component is rendering the ejs-grid? Is the `app-add-equipment` component rendering it, or yet another component? Add the template code with regards to ejs-grid (without omitting anything), in order for people to see what you pass in as dataSource and which events you handle. In short, after you add the new item, you need to insert it in your datasource somehow. Either by "surgically inserting it in there" or less elaborate and efficient, call your backend to get the updated list. – Octavian Mărculescu Sep 13 '22 at 09:31
  • 1
    @AlexWright thanx for the edit. If your child component selector is `app-add-equipment` you can only listen to the `addCompleted` event on its tag, like ``. – akotech Sep 13 '22 at 09:32

1 Answers1

0

I don't know if this matches your use case, but maybe you could use the actionBegin event of ejs-grid.

Here is a quick example:

html:

<ejs-grid ...
(actionBegin)="actionBegin($event)">
...
</ejs-grid>

ts:

actionBegin(args: any) :void {
    let gridInstance: any = (<any>document.getElementById('Normalgrid')).ej2_instances[0];
    console.log(args); // this is just to show the result in the console
    if (args.requestType === 'save') {
        if (gridInstance.pageSettings.currentPage !== 1 && gridInstance.editSettings.newRowPosition === 'Top') {
            args.index = (gridInstance.pageSettings.currentPage * gridInstance.pageSettings.pageSize) - gridInstance.pageSettings.pageSize;
        } else if (gridInstance.editSettings.newRowPosition === 'Bottom') {
            args.index = (gridInstance.pageSettings.currentPage * gridInstance.pageSettings.pageSize) - 1;
        }
    }
}

Sample of console output:

Sample of console output

You can find a full example here: https://stackblitz.com/run?file=app.component.ts,app.component.html (official example) API documentation: https://ej2.syncfusion.com/angular/documentation/grid/editing/in-line-editing/

johey
  • 1,139
  • 1
  • 9
  • 25
  • I have used `actionBegin` for server-side pagination. Can I use another one? – Alex Wright Sep 13 '22 at 09:54
  • No, but you can add other code in the handler. However, according to the documentation, paging is done via the load event; cf. https://ej2.syncfusion.com/angular/documentation/grid/paging/ – johey Sep 13 '22 at 10:09
  • 1
    Mmm, the documentation seems not clear how to implement server paging. Maybe the load event isn't helpful for that case. I've found this example instead: https://stackblitz.com/edit/angular-ntgj93-raw8be?file=async-pipe.component.ts There they use the dataStateChange event. – johey Sep 13 '22 at 10:19