We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Trigger API Methods in component

Thread ID:

Created:

Updated:

Platform:

Replies:

127111 Oct 26,2016 11:26 AM Nov 4,2016 09:03 AM Angular 8
loading
Tags: ejGrid
Alex
Asked On October 26, 2016 11:26 AM

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 [Syncfusion]
Replied On October 27, 2016 02:03 AM

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. 


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

 

Please let us know if you have any queries. 

Regards, 
Madhu Sudhanan P. 


Alex
Replied On October 31, 2016 11:04 AM

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 [Syncfusion]
Replied On November 1, 2016 02:27 PM

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
Replied On November 2, 2016 03:22 AM

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 [Syncfusion]
Replied On November 3, 2016 09:31 AM

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, 

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
Replied On November 3, 2016 10:08 AM

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
Replied On November 3, 2016 10:56 AM

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 [Syncfusion]
Replied On November 4, 2016 09:03 AM

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 
            }    }  
}  
 



Regards, 
Venkatesh Ayothiraman. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;