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. Image for the cookie policy date

Remote data binding with Data grid

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


<ejs-grid #grid [dataSource]='data'
[height]= 'height'
[width]= 'width'
[toolbar]= 'toolbar'
[allowFiltering]= 'true'
[filterSettings]= 'filterOptions'
[groupSettings]= 'groupOptions'
[editSettings]= 'editSettings'
(actionBegin)= 'actionBegin($event)'
allowPaging= 'true'
<ejs-contextmenu id='contextmenu' target='#target' [items]='menuItems'>
<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>

3 Replies

AJ AJ November 30, 2018 03:25 AM UTC

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 = '****/**********';

selector: 'control-content',
templateUrl: 'remote-data.html'
export class DataBindingComponent implements OnInit {
public data: DataManager;
public pageSettings: Object;

public grid: GridComponent;

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

AJ AJ November 30, 2018 03:28 AM UTC

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. 


TS Thavasianand Sankaranarayanan Syncfusion Team November 30, 2018 09:59 AM UTC

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


Please get back to us if you need further assistance. 

Thavasianand S. 

Live Chat Icon For mobile
Up arrow icon