Grid not loading data from the server

[Charles]

Hello,

I have tried these codes below for my grid to load data from the SQL database via web API but all attempts were futile. It over a week now l can't seem to have a way to resolve this. Do you have the code for backend {ASP.NET core) for this?

ERROR TypeError: Cannot read properties of undefined (reading 'results')

at MapSubscriber.project (emplistservice.service.ts:55:34)

at MapSubscriber._next (map.js:29:1)

at MapSubscriber.next (Subscriber.js:49:1)

at MapSubscriber._next (map.js:35:1)

at MapSubscriber.next (Subscriber.js:49:1)

at MapSubscriber._next (map.js:35:1)

at MapSubscriber.next (Subscriber.js:49:1)

at FilterSubscriber._next (filter.js:33:1)

at FilterSubscriber.next (Subscriber.js:49:1)

at MergeMapSubscriber.notifyNext (mergeMap.js:70:1)

I'm using the SQL connection for my backend. Do you have your own way of writing your code for the backend using the SQL Connection to load the grid? I have paste both my frontend and backend codes here. Kindly assist.

import { Injectable } from '@angular/core';

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

import { Observable } from 'rxjs/Observable';

import { DataResult, DataStateChangeEventArgs, Sorts} from '@syncfusion/ej2-angular-grids';

import { Subject } from 'rxjs/Subject';

import { map } from 'rxjs/operators';

@Injectable({

providedIn: 'root'

})

export class EmplistserviceService extends Subject<DataStateChangeEventArgs>{

public APIUrl= "http://localhost:5000/api/Employee";

constructor(private http: HttpClient) {

super();

}

public execute(state: any): void {

this.getDepList(state).subscribe((x) =>

super.next(x as DataStateChangeEventArgs)

);

}

protected getDepList(

state: DataStateChangeEventArgs

): Observable<DataStateChangeEventArgs> {

const pageQuery = `$skip=${state.skip}&$top=${state.take}`;

let sortQuery = '';

const d = 'd';

const results = 'results';

const count = '__count';

if ((state.sorted || []).length) {

sortQuery =

`&$orderby=` +

state.sorted

.map((obj: Sorts) => {

return obj.direction === 'descending'

? `${obj.name} desc`

: obj.name;

})

.reverse()

.join(',');

}

return this.http

.get(

`${this.APIUrl}?${pageQuery}${sortQuery}&$inlinecount=allpages&$format=json`

)

.pipe(map((response: any) => response))

.pipe(

map(

(response: any) =>

<DataResult>{

result: response[d][results],

count: parseInt(response[d]['__count'], 10),

}

)

)

.pipe((data: any) => data);

}

}

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

import { Observable } from 'rxjs';

import { EmplistserviceService } from './emplistservice.service';

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

@Component({

selector: 'app-employee-list',

templateUrl: './employee-list.component.html',

styleUrls: ['./employee-list.component.css'],

providers: [EmplistserviceService],

})

export class EmployeeListComponent implements OnInit {

public data: Observable<DataStateChangeEventArgs>;

public pageSettings: Object;

public state: DataStateChangeEventArgs;

constructor(public service:EmplistserviceService) {

this.data = service;

}

public dataStateChange(state: DataStateChangeEventArgs): void {

this.service.execute(state);

}

ngOnInit(): void {

this.pageSettings = { pageSize: 5 };

let state = { skip: 0, take: 5 };

this.service.execute(state);

}

}

<div class="control-section">

<ejs-grid [dataSource]='data | async' allowPaging= 'true' [pageSettings]='pageSettings' allowSorting= 'true' allowGrouping= 'true' (dataStateChange)= 'dataStateChange($event)' >

<e-columns>

<e-column field= "EmployeeId" headerText="Employee ID" width="130" >e-column>

<e-column field="EmployeeName" headerText="Employee Name" width="150">

e-column>

<e-column field= "Department" headerText="Department" width="200">e-column>

<e-column field= "DateOfBirth" headerText="DateOfBirth" width="150">e-column>

<e-column field= "PhotoFileName" headerText="PhotoFileName" width="150">e-column>

e-columns>

ejs-grid>

div>

My Backend

using Microsoft.AspNetCore.Builder;

using Microsoft.AspNetCore.Hosting;

using Microsoft.AspNetCore.Mvc;

using Microsoft.Extensions.Configuration;

using Microsoft.Extensions.DependencyInjection;

using Microsoft.Extensions.Hosting;

using Microsoft.Extensions.Logging;

using Microsoft.OpenApi.Models;

using Newtonsoft.Json.Serialization;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.Extensions.FileProviders;

using System.IO;

namespace WebApplication1

{

public class Startup

{

public Startup(IConfiguration configuration)

{

Configuration = configuration;

}

public IConfiguration Configuration { get; }

// This method gets called by the runtime. Use this method to add services to the container.

public void ConfigureServices(IServiceCollection services)

{

//Enable cors

services.AddCors(c =>

{

c.AddPolicy("AllowOrigin", Options => Options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

});

//JSON Serialiser

services.AddControllersWithViews()

.AddNewtonsoftJson(options =>

options.SerializerSettings.ReferenceLoopHandling = Newtonsoft

.Json.ReferenceLoopHandling.Ignore)

.AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());

services.AddControllers();

services.AddSwaggerGen(c =>

{

c.SwaggerDoc("v1", new OpenApiInfo { Title = "WebApplication1", Version = "v1" });

});

}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

{

app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

if (env.IsDevelopment())

{

app.UseDeveloperExceptionPage();

app.UseSwagger();

app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "WebApplication1 v1"));

}

app.UseRouting();

app.UseAuthorization();

app.UseEndpoints(endpoints =>

{

endpoints.MapControllers();

});

app.UseStaticFiles(new StaticFileOptions

{

FileProvider = new PhysicalFileProvider(

Path.Combine(Directory.GetCurrentDirectory(), "Photos")),

});

}

}

}

using Microsoft.AspNetCore.Http;

using Microsoft.AspNetCore.Mvc;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using System.Data.SqlClient;

using System.Data;

using WebApplication1.Models;

using Microsoft.Extensions.Configuration;

using System.Net.Http;

using System.IO;

using Microsoft.Extensions.FileProviders;

using Microsoft.AspNetCore.Hosting;

using Microsoft.AspNetCore.Cors;

namespace WebApplication1.Controllers

{

[Route("api/[controller]")]

[ApiController]

public class EmployeeController : ControllerBase

{

private readonly IConfiguration _configuration;

private readonly IWebHostEnvironment _env;

public EmployeeController(IConfiguration configuration, IWebHostEnvironment env)

{

_configuration = configuration;

_env = env;

}

[HttpGet]

public JsonResult Get()

{

string query = @"select EmployeeId, EmployeeName, Department,

Convert(varchar(10),DateOfBirth,120) as DateOfBirth,

PhotoFileName from dbo.Emp";

DataTable dt = new DataTable();

string sqlDataSource = _configuration.GetConnectionString("EmployeeAppCon");

SqlDataReader dr;

using (SqlConnection con = new SqlConnection(sqlDataSource))

{

con.Open();

using (SqlCommand cmd = new SqlCommand(query, con))

{

dr = cmd.ExecuteReader();

dt.Load(dr);

dr.Close();

con.Close();

}

}

return new JsonResult(dt);

}

[HttpPost]

public JsonResult Post(Employee emp)

{

string query = @"insert into dbo.Employee(EmployeeId, EmployeeName, Department, DateOfBirth, PhotoFileName) values

('" + emp.EmployeeId + @"','" + emp.EmployeeName + @"','" + emp.Department + @"','" + emp.DateOfBirth + @"','" + emp.PhotoFileName + @"')";

DataTable dt = new DataTable();

string sqlDataSource = _configuration.GetConnectionString("EmployeeAppCon");

SqlDataReader dr;

using (SqlConnection con = new SqlConnection(sqlDataSource))

{

con.Open();

using (SqlCommand cmd = new SqlCommand(query, con))

{

dr = cmd.ExecuteReader();

dt.Load(dr);

dr.Close();

con.Close();

}

}

return new JsonResult("Added Successfully");

}

[HttpPut]

public JsonResult Put(Employee emp)

{

string query = @"

update dbo.Employee set EmployeeName = '" + emp.EmployeeName + @"', Department = '" + emp.Department + @"',

DateOfBirth = '" + emp.DateOfBirth + @"', PhotoFileName = '" + emp.PhotoFileName + @"'

where EmployeeId = " + emp.EmployeeId + @"

";

DataTable dt = new DataTable();

string sqlDataSource = _configuration.GetConnectionString("EmployeeAppCon");

SqlDataReader dr;

using (SqlConnection con = new SqlConnection(sqlDataSource))

{

con.Open();

using (SqlCommand cmd = new SqlCommand(query, con))

{

dr = cmd.ExecuteReader();

dt.Load(dr);

dr.Close();

con.Close();

}

}

return new JsonResult("Updated Successfully");

}

[HttpDelete("{id}")]

public JsonResult Delete(int id)

{

string query = @"

delete from dbo.Employee

where EmployeeId = " + id + @"

";

DataTable dt = new DataTable();

string sqlDataSource = _configuration.GetConnectionString("EmployeeAppCon");

SqlDataReader dr;

using (SqlConnection con = new SqlConnection(sqlDataSource))

{

con.Open();

using (SqlCommand cmd = new SqlCommand(query, con))

{

dr = cmd.ExecuteReader();

dt.Load(dr);

dr.Close();

con.Close();

}

}

return new JsonResult("Deleted Successfully");

}

[Route("SaveFile")]

[HttpPost]

public JsonResult SaveFile()

{

try

{

var httpRequest = Request.Form;

var postedFile = httpRequest.Files[0];

string filename = postedFile.FileName;

var physicalPath = _env.ContentRootPath + "/Photos/" + filename;

using(var stream = new FileStream(physicalPath, FileMode.Create))

{

postedFile.CopyTo(stream);

}

return new JsonResult(filename);

}

catch (Exception)

{

return new JsonResult("anonymous.png");

}

}

[Route("GetAllDepartmentNames")]

[HttpGet]

public JsonResult GetAllDepartmentNames()

{

string query = @"select DepartmentName from dbo.Department";

DataTable dt = new DataTable();

string sqlDataSource = _configuration.GetConnectionString("EmployeeAppCon");

SqlDataReader dr;

using (SqlConnection con = new SqlConnection(sqlDataSource))

{

con.Open();

using (SqlCommand cmd = new SqlCommand(query, con))

{

dr = cmd.ExecuteReader();

dt.Load(dr);

dr.Close();

con.Close();

}

}

return new JsonResult(dt);

}

}

}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

namespace WebApplication1.Models

{

public class Employee

{

public string EmployeeId { get; set; }

public string EmployeeName { get; set; }

public string Department { get; set; }

public string DateOfBirth { get; set; }

public string PhotoFileName { get; set; }

}

}

[Joseph Christ Nithin Issack]

Hi Charles,

  Greetings from Syncfusion support.

  Based on your query, you want to bind the SQL Data to the grid. You can achieve your requirement using URL Adaptor feature.

We have already discussed this in our Knowledge Base. Please refer to the below KB link for more information. 

KB: https://www.syncfusion.com/kb/11453/how-to-bind-sql-server-data-in-angular-datagrid-using-sqlclient-data-provider

The URL Adaptor is used to perform On-Demand actions in the EJ2 Grid. This is explained detailly in the below documentation. 

  

URLAdaptor: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/remote-data#handling-on-demand-grid-actions

  

When we perform any Grid actions like Searching, Paging, Sorting, Filtering, Exporting, Searching, etc., we send correspond actions details to the server. You can get these by using DataManagerRequest class in your server method. 

Here, you can perform the data actions in your SQL Data and return the correspond data in object format with result and count value to the Grid. 

Paging: https://ej2.syncfusion.com/aspnetcore/documentation/grid/paging/

Filtering: https://ej2.syncfusion.com/aspnetcore/documentation/grid/filtering/

Sorting: https://ej2.syncfusion.com/aspnetcore/documentation/grid/sorting

Find the below code example for your reference.

 

[HomeController.cs]

 

public IActionResult UrlDatasource([FromBody] DataManagerRequest dm)

        {

            IEnumerable DataSource = OrdersDetails.GetAllRecords(); // you can get the data from the SQL Database here

            DataOperations operation = new DataOperations();

            if (dm.Search != null && dm.Search.Count > 0)

            {

                DataSource = operation.PerformSearching(DataSource, dm.Search);  //Search

            }

            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting

            {

                DataSource = operation.PerformSorting(DataSource, dm.Sorted);

            }

            if (dm.Where != null && dm.Where.Count > 0) //Filtering

            {

                DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);

            }

            int count = DataSource.Cast<OrdersDetails>().Count();

            if (dm.Skip != 0)

            {

                DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging

            }

            if (dm.Take != 0)

            {

                DataSource = operation.PerformTake(DataSource, dm.Take);

            }

            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);

        }

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/url-angular-core902715074

Please get back to us for further details.

Regards,

Joseph I.

[Charles]

Hi Joseph,

I'm not using ASP.NET Core or  ASP.NET Core Angular Project. I created my backend in ASP.NET Core wep API to interact with an Angular project that l have created in VS Code. So l need the ASP.NET Core web API core codes that l can connect my angular app (created in VS Code) to enable me carry out paging.

[Vinitha Balasubramanian]

Hi Charles ,

Thanks for your update.

Currently we are working on your query and we will update further details on May 18,2022.

until then we appreciate your patience

Regards,

Vinitha Balasubramanian

[Charles]

Hi  Vinitha,

I have solved the problem where l found an explaining from  Pavithra in one of your documentations.

Thank You

[Vinitha Balasubramanian]

Hi Charles ,

Thanks for your update.

We are happy to hear that issue has been resolved.

Please get back to us, if you need further assistance.

Regards,

Vinitha Balasubramanian

[Charles]

Hi Vinitha,

I am using the Hierarchy grid to load data from the server. The parent grid is loading but the child grid is not populating data from the server. It childGrid only shows the grid header text. I have tried the examples found on yours documentations but none was successful. Kindly assisit

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

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

import { DataStateChangeEventArgs, DetailRowService } from '@syncfusion/ej2-angular-grids';

import { Observable } from 'rxjs/Observable';

import { SharedServiceService } from './shared-service.service';

import { NokserviceService } from './nokservice.service';

@Component({

selector: 'app-root',

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

styleUrls: ['./app.component.css'],

providers: [DetailRowService]

})

export class AppComponent implements OnInit {

public data: Observable<DataStateChangeEventArgs>;

public childGrid:any;

public data1: Observable<DataStateChangeEventArgs>;

public state: DataStateChangeEventArgs;

constructor(public service:SharedServiceService, public service1:NokserviceService){

this.data = service;

this.data1 = service1;

}

public dataStateChange(state: DataStateChangeEventArgs): void {

this.service.execute(state);

}

ngOnInit(): void {

const state: any = { skip: 0, take: 12 };

this.service.execute(state);

this.childGrid = {

dataSource: this.data1 ,

queryString: 'EmployeeId',

columns: [

{ field: 'EmployeeId', headerText: 'ID', width: 50 },

{ field: 'Prefix', headerText: 'Prefix', width: 70 },

{ field: 'FirstName', headerText: 'FirstName', width: 80 },

{ field: 'OtherName', headerText: 'OtherName', width: 80 },

{ field: 'Relationship', headerText: 'Relationship', width: 80 },

{ field: 'Occupation', headerText: 'Occupation', width: 80 },

{ field: 'Address', headerText: 'Address', width: 100 },

{ field: 'Phone', headerText: 'Phone', width: 70 },

{ field: 'Email', headerText: 'Email', width: 80 }

]

};

}

}

<div class="control-section">

<ejs-grid #Grid id='Grid' [dataSource]='data | async' [childGrid]='childGrid'>

<e-columns>

<e-column field='EmployeeId' headerText='Employee ID' width='120' textAlign='Right'>e-column>

<e-column field='EmployeetName' headerText='Name' width='140'>e-column>

<e-column field='Department' headerText='Department' width='170'>e-column>

<e-column field='DateOfBirth' headerText='Date' width='120' format='yMd' textAlign='Right'>e-column>

<e-column field='PhotoFileName' headerText='Photo' width='120' textAlign='Right'>e-column>

e-columns>

ejs-grid>

div>

[Vinitha Balasubramanian]

Hi Charles ,

Greetings from Syncfusion support.

Query 1 : Child Grid is not populating while custom binding.

Based on your query , your child Grid is not render while using custom binding. We suspect that you are not binding the dataStateChange to the child Grid so that the child Gird not populated on the Grid . In custom binding , dataStateChange event triggers for every Grid action(Filtering , Searching , Sorting ,Paging). But it is not trigger on initial Grid rendering , so we need to trigger the dataStateChange event manually.

Kindly refer the below link for your reference .

Link : https://ej2.syncfusion.com/angular/demos/#/material/grid/async-pipe

Note:  The ‘dataStateChange’ event will not be triggered on Grid initial render. So for this case you need to return the data on Grid’s initialization

Query 2 : I intend to add more child Grid such as Academic, Work experience, Next-of-kin etc. It is possible using the hierarchy grid?

Yes, it is possible to create several child Grids.

We must manually render the dataStateChange event for child Grid.

Kindly refer the below documentation for your references

Documentation link : https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/hierarchy

Please get back to us if you require any further assistance.

Regards,

Vinitha Balasubramanian

[Charles]

Hi Vinitha,

Thank you for your response. [dataSource]='data|async' [childGrid]='chidGrid' from this line of code l don't how to apply this 'async' to my childGrid datasource.

I have tried using Datamanager but the childGrid is still not showing data from the server. See codes that I've tried below. Kindly assist

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

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

import { DetailRowService, EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-angular-grids';

import { DataManager, Query, ReturnOption, UrlAdaptor } from '@syncfusion/ej2-data';

const SERVICE_URI = 'http://localhost:5000/api/Emp';

@Component({

selector: 'app-root',

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

styleUrls: ['./app.component.css'],

providers: [DetailRowService]

})

export class AppComponent implements OnInit {

public gridData;

public dataManager;

public childGrid: any;

public data: object[] = [];

constructor(){

}

ngOnInit(): void {

new DataManager({ url: SERVICE_URI }).executeQuery(new Query().take(6)).then((e: ReturnOption) => {

this.data = e.result as object[];

}).catch((e) => true);

this.childGrid = {

dataSource: new DataManager({

url: "http://localhost:5000/api/nok",

adaptor: new UrlAdaptor()

}),

queryString: "EmployeeId",

actionBegin : function (args) {

},

columns: [

{ field: 'EmployeeId', headerText: 'ID', width: 50 },

{ field: 'Prefix', headerText: 'Prefix', width: 70 },

{ field: 'FirstName', headerText: 'FirstName', width: 80 },

{ field: 'OtherName', headerText: 'OtherName', width: 80 },

{ field: 'Relationship', headerText: 'Relationship', width: 80 },

{ field: 'Occupation', headerText: 'Occupation', width: 80 },

{ field: 'Address', headerText: 'Address', width: 100 },

{ field: 'Phone', headerText: 'Phone', width: 70 },

{ field: 'Email', headerText: 'Email', width: 80 },

]

}

}

}

[Vinitha Balasubramanian]

Hi Charles,

Thanks for your update .

Currently we are working your query and we will update further details on May 31, 2022.

until then we appreciate your patience.

Regards,

Vinitha Balasubramanian

[Charles]

Hi Vinitha, 

The link below is what l have tried to use the hierarch grid but the child is not loading. Please help check it out what could be wrong with my codes

https://stackblitz.com/edit/angular-kqu7vy-rwnq62?file=app.component.ts,app.component.html

[Vinitha Balasubramanian]

Hi Charles ,

Thanks for your patience .

We have analyzed your query , we suspect that you are using custom binding in previous update , but in last update you are rendering data using URL adaptor . Please ensure us the exact data binding for the child Grid and kindly share the below details with us

• Please share the return data formatting if you use custom binding.
• If you use URL adaptor , then the back end requires API which returns data format, so we need return format of the data . Please share the return format of the network tab .
• Please share the video demonstration of your issue so we can verify it on our end.
• Kindly share the issue replicated sample with us so that we may verify it further.

Regards

Vinitha Balasubramanian