Data Grid Data Source not binding to URL adaptor

[Ameet]

Here is my HTML -

 

   

   

    

 

My ej2Grid.component.ts is as follows -

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

import {

  Router,

  Event,

  NavigationStart, RoutesRecognized, RouteConfigLoadStart,

  RouteConfigLoadEnd, NavigationEnd, NavigationCancel, NavigationError

} from '@angular/router'

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

import { GridComponent, EditService, ToolbarService, PageService, ColumnChooserService } from '@syncfusion/ej2-ng-grids';

//const SERVICE_URI: string = 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Products';

const SERVICE_URI: string = 'https://mysamay.azurewebsites.net/api/GetClientPaymentInfo?code=FHOKcZO3f/ZNjbxuBIhlyrNv68ur5lw9t4vDrtytuMNnLZA//muHpw==';

@Component({

  selector: 'ej2-grid',

  templateUrl: './ej2Grid.component.html',

  providers: [ToolbarService, EditService, PageService, ColumnChooserService]

})

export class ej2GridComponent implements OnInit {

  public title: string = 'Manage Client Payment Options';

  public dataManager: DataManager = new DataManager({

    url: SERVICE_URI,

    adaptor: new UrlAdaptor, 

    crossDomain: true,

  });

  @ViewChild('grid')

  public grid: GridComponent;

  public editSettings: Object;

  public toolbar: string[];

  public pageSettings: Object;

  

  //public data: Object[];

  ngOnInit(): void {

    //this.dataManager = new DataManager({

    //  url: '/api/SampleData/WeatherForecasts',

    //  adaptor: new WebApiAdaptor

    //});

    //this.dataManager = new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor });

    //this.dataManager = new DataManager({

    //  url: SERVICE_URI,

    //  adaptor: new UrlAdaptor

    //});

    

    //this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };

    //this.toolbar = ['Edit', 'Update', 'Cancel', 'ColumnChooser'];

    this.pageSettings = { pageCount: 5 };

  }

}

My app.module.ts is as follows -

import { BrowserModule } from '@angular/platform-browser';

import { NgModule, Type, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { CommonModule } from '@angular/common';

import { HttpClientModule } from '@angular/common/http';

import { HttpModule, JsonpModule } from '@angular/http';

import 'rxjs/add/operator/map';

import { RouterModule } from '@angular/router';

import { GridAllModule } from '@syncfusion/ej2-ng-grids';

import { AppComponent } from './app.component';

import { NavMenuComponent } from './nav-menu/nav-menu.component';

import { HomeComponent } from './home/home.component';

import { CounterComponent } from './counter/counter.component';

import { FetchDataComponent } from './fetch-data/fetch-data.component';

import { ej2GridComponent } from './ej2Grid/ej2Grid.component';

import { SidebarModule, ToolbarModule } from '@syncfusion/ej2-ng-navigations';

import { ListViewModule } from '@syncfusion/ej2-ng-lists';

@NgModule({

  declarations: [

    AppComponent,

    NavMenuComponent,

    HomeComponent,

    CounterComponent,

    FetchDataComponent,

    ej2GridComponent

  ],

  imports: [

    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),

    CommonModule,

    HttpModule,

    JsonpModule,

    HttpClientModule,

    FormsModule,

    SidebarModule,

    ToolbarModule,

    ListViewModule,

    GridAllModule,

    RouterModule.forRoot([

      { path: '', component: HomeComponent, pathMatch: 'full' },

      { path: 'ej2Grid', component: ej2GridComponent}

    ])

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

No matter what I do I get the following -

The expected behavior is -

Please note it does work for the ODataAdaptor but not for the URL adapter. Try the default Angular project with Visual studio and the sample data API provided.

Thanks,

Ameet

[Ameet]

I played more with this and even tried the ASP.NET core control and it only works with your webservice. 

<div class="control-wrapper">

    <ejs-grid id="Grid" allowPaging="true">

        <e-grid-pageSettings pageCount="5"></e-grid-pageSettings>

        <e-data-manager url='https://mysamay.azurewebsites.net/api/GetClientPaymentInfo' adaptor="UrlAdaptor" crossdomain="false"></e-data-manager>

        <e-grid-columns>

            <e-grid-column field="ClientNumber" headerText="ClientNumber" textAlign="Right" width="160"></e-grid-column>

            <e-grid-column field="ClientName" headerText="Name" width="170"></e-grid-column>

            

        </e-grid-columns>

    </ejs-grid>

</div>

The difference I noticed is that your WebService returns back xml while mine returns back JSON. If I look at the Network tab on chrome it seems the data is being returned back -

[Hariharan J V]

Hi Ameet, 

 

Thanks for contacting Syncfusion support. 

 

We have checked the given code snippets and screenshot, we suspect that you are not returned result and count as object from the server. Please refer the below code snippets and documentation link for URL adaptor. 

 

 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit.html?lang=typescript#url-adaptor  

 

Regards, 

Hariharan 

[Ameet]

Thanks for your help.

This worked perfectly.

Regards,

Ameet

[Hariharan J V]

Hi Ameet, 

Thanks for your update. We are happy to hear that your problem has been resolved. 

 

Regards,  

Hariharan