Trigger API Methods in component

[Alex]

Hi,

I want to trigger the addRecord() from the component.

If I create a variable called "grid" in the component:

grid:ej.Grid;

and i trigger the method calling:

this.grid.addRecord();

angular gives me an error because obviously the object it's not binded to the "component" in the view.

But I even tryed this:

grid:ej.Grid=$("#Grid").data("ejGrid");

but it doesn't works.

Thanks,

Alex

[Madhu Sudhanan P]

Hi Alex, 

Thanks for using Syncfusion products. 

Please follow the steps to access and use EJ component instance inside Angular 2 component. 

1. Refer the following typescript declaration files in the component file. 

 

The above declaration files will contain the interfaces for accessing EJ component. You can find the above files in the below location. 

Location: [Installation Directory]\Syncfusion\Essential Studio\XX.X.X.XX\JavaScript\assets\typescript 

Where XX.X.X.XX defines the Essential studio version. 

2. Define the component template and provide the template variable for Grid component as follows. 

 

3. Include the ViewChild decorator and EJComponents in the component file as below.  

 

4. Specify a property to access the grid directive instance as follows. 

 

Now the ViewChild decorator will set the directive with name “grid” (template variable used in html) to the property grid. Use the property type as EJComponents<ej.Grid, any>. 

The template variable will be evaluated into the property grid after the view get rendered. Hence make sure to use the property after the ngAfterViewInit callback. 

https://angular.io/docs/js/latest/api/core/index/ViewChild-var.html 

5. Now we can access the grid instance as follows. 

 

Please let us know if you have any queries. 

Regards, 

Madhu Sudhanan P. 

[Alex]

Thanks Madhu,

I've set the grid in batch edit mode but I cannot get the deleteRecord method working.

When I call it the grid removes the record but the deleted array in getBatchChanges it's always empty.

Regards,

Alex

[Venkatesh Ayothi Raman]

Hi Alex, 

Thanks for the update. 

We were unable to reproduce the reported issue at our end. Could you please share the following details? 

1)      Provide Grid code example. 

2)      Any script error thrown while delete the record? If so, provide the screenshot. 

3)      Issue replication procedure. 

4)      Share the video of the issue  

5)      Provide the sample if possible. 

Regards, 

Venkatesh Ayothiraman. 

[Alex]

Hi Venkatesh,

this is the grid in my view:

<ej-grid #grid [allowPaging]="true" [allowSorting]="true" allowSelection="true" selectionType="multiple" [dataSource]="payments">

                <e-columns>

                    <e-column field="Id" [isPrimaryKey]="true" width="0" [visible]="false"></e-column>

                    <e-column field="Field1" headerText="Code" width="75"></e-column>

                    <e-column field="Field2" headerText="Description" width="100"></e-column>

                </e-columns>

            </ej-grid>

this is the code of the component, the delData and the saveData are called by two buttons using (click):

ngAfterViewInit(){

        this.grid.widget.model.editSettings = { allowAdding:true,allowEditing:true,allowDeleting:true,editMode:'batch' };

    }

delData()

    {

        var data:any = this.grid.widget.getSelectedRecords();

        for(let row of data)

        {

           this.grid.widget.deleteRecord("Id",row);

        }

    }

    saveData()

    {

        var data = this.grid.widget.getBatchChanges();

        var added:Payment[],changed:Payment[],deleted:Payment[];

        added = data.added;

        changed = data.changed;

        deleted = data.deleted;

        if(added.length>0)

        {

            for(var add of added)

            {

            }

        }

        if(changed.length>0)

        {

            for(let change of changed)

            {

            }

        }

        if(deleted.length>0)

        {

            for(let del of deleted)

            {

                //call to service

            }

        }

        this.grid.widget.batchSave();

    }

the delData removes the selected rows from the grid, but when I call the saveData the array deleted of the variable of data is always empty and in the console I don't have any error.

I've already tried putting the code of ngAfterViewInit in the view but this doesn't solve the problem.

Regards,

Alex

[Venkatesh Ayothi Raman]

Hi Alex, 

Thanks for the update. 

We went through your code example that you have shared for us as well as we have created a sample like your code example. Still we were unable to reproduce the reported issue. Please find the below screenshot, 

 

And also found that you are using selection type as multiple then we have pass the list of deleted records in server side.  We have already discussed this, please find the Knowledge base documentation, 

KB: https://www.syncfusion.com/kb/3382 

If you still face the same issue then, could you please provide your sample for us? It would be helpful for us to find the problem and provide the solution as earliest? 

Regards, 

Venkatesh Ayothiraman. 

[Alex]

Hi Venkatesh,

thanks for you answer. If I log the in the console the variable data after this instruction: 

var data = this.grid.widget.getBatchChanges();

the deleted array inside data is always empty, but for added and changed works.

For writing the data to the server I call my nodejs backend with a call inside this:

for(let del of deleted)

{

   //call to service

}

in this case the deleted variable is empty so ther's no way to delete data.

But I don't understand if the rows are removed from the grid, why the getBatchChanges deleted array is empty.

Regards,

Alex

[Alex]

Hi Venkatesh,

I've also find this in the ej.web.all.js (line 102065 in chrome debugger, line 102015 using notepad):

if (this.model.editSettings.editMode == 'batch') {

    this.batchSave();

    this._confirmedValue=true;

}

So every time i call the deleteRecord method, the grid tries to update the backend automatically. And now I think that the deleted array of the getSelectedRecords method is always empty using the batch editing mode only.

There a way to prevent this(without removing the line) or another method to call?

Regards,

Alex

[Venkatesh Ayothi Raman]

Hi Alex, 

Thanks for the update. 

We were able to reproduce the reported query and this is default behavior of the Grid. We have call the batchSave method while we delete the records through deleteRecord method. We can prevent this automatic call from backend using actionBegin event in Grid. This event triggers every Grid action before its starts. Please refer to the code example and Help document, 

Code example: 

//Template 

<ej-grid . . . (actionBegin)="onActionBegin($event)">  

        <e-columns>  

            <e-column field="OrderID" headerText="Order ID" width="75"textalign="right"></e-column>  

. .   

        </e-columns>  

</ej-grid>  

Component  

export class DefaultComponent {  

    . . . .  

    onActionBegin(e: any){  

             if (e.requestType == "batchsave") { 

                e.cancel = true; //Prevent the default save action 

                //do something 

            }    }  

}  

 

Help document: https://help.syncfusion.com/api/js/ejgrid#events:actionbegin 

Regards, 

Venkatesh Ayothiraman.