Remote data binding with Data grid

[AJ]

Hi team, 

I'm trying to map some data from url api using the remote data binding from syncfusion, with following the docs and looking at prodived examples from your docs I wasnt able to map my data from the provdied api succsfully, even when I created a standalone angular app  it didnt work just by having a ejs-grid and a few lines of code in th ts file

HTML :

<ejs-grid #grid [dataSource]='data'

[pageSettings]='pageSettings'

[allowSorting]="true"

[allowGrouping]="true"

[allowSelection]="true"

[selectionSettings]="selectOptions"

[gridLines]='gridLines'

[allowTextWrap]='textWrap'

[height]= 'height'

[width]= 'width'

[toolbar]= 'toolbar'

[allowFiltering]= 'true'

[filterSettings]= 'filterOptions'

[groupSettings]= 'groupOptions'

[editSettings]= 'editSettings'

(actionBegin)= 'actionBegin($event)'

(actionComplete)='actionComplete($event)'

allowResizing='true'

allowPaging= 'true'

rowHeight='39'

height='400'>

<ejs-contextmenu id='contextmenu' target='#target' [items]='menuItems'>

<e-columns>

<e-column field='jobTypeId' headerText='Job Type' textAlign='left' width=25></e-column>

<e-column field='crewId' headerText='Crew' textAlign='left' width=15></e-column>

<e-column field='jobPriority' headerText='Job Priority' textAlign='left' width=17></e-column>

<e-column field='referenceNumber' headerText='Reference' textAlign='left' isPrimaryKey='true' width=20></e-column>

<e-column field='jobAddress' headerText='Job Address' textAlign='left' width=40></e-column>

<e-column field='jobDescription' headerText='Job Description' textAlign='left' width=40></e-column>

<e-column field='startOn' headerText='Start On' textAlign='left' width=20 editType='datepickeredit'></e-column>

<e-column field='finishBy' headerText='Finish By' textAlign='left' width=20 editType='datepickeredit'></e-column>

</e-columns>

</ejs-contextmenu>

</ejs-grid>

[AJ]

import { Component, OnInit, ViewChild } from '@angular/core';

import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

import { GridComponent } from '@syncfusion/ej2-angular-grids';

const SERVICE_URI: string = 'http://101.0.97.194:5555/****/**********';

@Component({

selector: 'control-content',

templateUrl: 'remote-data.html'

})

export class DataBindingComponent implements OnInit {

public data: DataManager;

public pageSettings: Object;

@ViewChild('grid')

public grid: GridComponent;

ngOnInit(): void {

this.data = new DataManager({ url: SERVICE_URI + '***/*****', adaptor: new WebApiAdaptor });

this.pageSettings = { pageCount: 3 };

}

}

[AJ]

As you see I trying to re- create the example just for training purpose but it's not working and according to your docs that DataManager acts as an interface between the endpoint and the grid, I hope you can help me understand this more and how to make it work. 

Cheers 

[Thavasianand Sankaranarayanan]

Hi Ali, 

We have analyzed your query. We suspect that service link you are using to bind data to Grid is not returning the response as like a “result” and “count” pair. It is a must for the service link to return the response as “result” and “count” pair to bind data in Grid. We suggest you to ensure this in your application. Please refer the online sample link below, 

Online Demo : https://ej2.syncfusion.com/angular/demos/#/fabric/grid/remote-data  

 

Please refer the following screenshot, the screenshot was taken with the online demo service link, we get the response as a result and count pair, 

 

 

Sample : https://stackblitz.com/edit/angular-gdmmju?file=remote-data.component.ts 

Documentation : https://ej2.syncfusion.com/angular/documentation/data/adaptors/?no-cache=1#webmethod-adaptor 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S.