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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Remote data binding with Data grid

Thread ID:





141222 Nov 30,2018 03:14 AM UTC Nov 30,2018 09:59 AM UTC Angular - EJ 2 3
Tags: Grid
Asked On November 30, 2018 03:14 AM UTC

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>

Replied On 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 };

Replied On 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. 


Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon