Issues with Datamanager
8 Replies
Hi Alberto,
From the error description “TypeError: Cannot convert undefined or null to object at Function.keys ()” we suspect that the server return empty or null data after saving added record. Please check and ensure whether any empty response returned from the server. To know more above the adding operation in grid, please refer to the below procedure.
- While saving the grid sends the added record to the server as follows.
- After saving the server has to return the added data as follows.
- Now the grid will once again call the server to update the added records in the view, which should return the response as follows.
Please use the above method to troubleshoot the add operation in your application and we suggest you to look into the response from the server after saving record and get back to us if you still faced the issue.
Regards,
Rahul Narayanasamy.
Hello Rahul,
I get a 201
and it seems the data is returned well.
However it crashes before the grid can call the server to refresh the data.
Here is my component if it helps. A lot of the events are trapped just to pinpoint where the error occurs...
import { uuid } from 'uuid/v4';
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { GridComponent, PageSettingsModel, EditSettingsModel, ToolbarItems, EJ2Intance } from '@syncfusion/ej2-ng-grids';
import { Column } from '@syncfusion/ej2-ng-grids';
import { Dialog } from '@syncfusion/ej2-popups';
import { FileInfo, Uploader } from '@syncfusion/ej2-ng-inputs';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { ConfigService} from '../../../../services';
import { ProductCard } from '../../../../models/product';
@Component({
selector: 'app-product-manager',
templateUrl: './product-manager.component.html',
styleUrls: ['./product-manager.component.scss']
})
export class ProductManagerComponent implements OnInit, OnDestroy {
private _url;
public data: DataManager;
public pageSettings: PageSettingsModel;
public toolbar: ToolbarItems[];
public editSettings: EditSettingsModel;
public dpParams;
public dpParams1;
public dppParams;
public uploadObj: Uploader;
public elem;
@ViewChild('grid')
public gridObj: GridComponent;
/*
public imageArray = (field: string, data: Object, column: Object) => {
return data[field].map((s: { picture: string}) => { return s.picture ; }).join(' ');
}
*/
constructor(private configService: ConfigService) {
this._url = this.configService.getConfig().webApiEndpointUrl + 'Products';
}
ngOnInit(): void {
this.data = new DataManager({
url: this._url,
adaptor: new ODataV4Adaptor
});
this.pageSettings = { pageSize: 10 };
this.editSettings = { showDeleteConfirmDialog: true, allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
}
public actionBegin(args): void {
console.log(`actionbegin ---> ${args.requestType}`);
if (args.requestType === 'beginEdit') {
console.log(`actionbegin ---> ${args.requestType} start`);
// console.log(args.rowData);
console.log(`actionbegin ---> ${args.requestType} end`);
}
if (args.requestType === 'save') {
console.log(`actionbegin ---> ${args.requestType} start`);
args.data.id = null;
args.data.tenantId = null;
args.data.type = 'product';
args.data.active = true;
args.data.name = 'Shoes';
args.data.description = 'Big ones';
args.data.price = 0.00;
args.data.picture = '';
args.data.featured = false;
args.data.categories = [];
args.data.collections = [];
args.data.material = 'Cuoio in acciaio inossidabile';
args.data.availability = 'After months';
args.data.additionalPictures = [];
console.log(`actionbegin ---> ${args.requestType} complete!`);
}
}
public actionComplete(args): void {
console.log('actionComplete!', args);
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
const dialog: Element = this.gridObj.element.querySelector('#' + this.gridObj.element.id + '_dialogEdit_wrapper');
const dialogInst: Dialog = (<EJ2Intance>dialog).ej2_instances[0];
dialogInst.header = 'Product Editor';
dialogInst.allowDragging = true;
dialogInst.showCloseIcon = true;
}
}
public dataSourceChanged(args): void {
console.log('dataSourceChanged!', args);
}
public dataBound(args): void {
console.log('dataBound!', args);
}
public rowDataBound(args): void {
console.log('rowDataBound!', args);
}
public dsEvent(args): void {
console.log('dsEvent!', args);
}
public dataStateChange(args): void {
console.log('dataStateChange!', args);
}
public actionFailure(args: any): void {
console.log('actionFailure!', args);
}
ngOnDestroy() {
}
}
<div class="product-manager container">
<h3>Product Managerh3>
<ejs-grid #grid [dataSource]="data" [allowSelection]="true" [allowSorting]='true'
[allowFiltering]='true' [allowPaging]="true" [pageSettings]="pageSettings" [toolbar]="toolbar"
[editSettings]="editSettings"
(actionBegin)='actionBegin($event)' (actionFailure)='actionFailure($event)' (actionComplete)="actionComplete($event)"
(dataSourceChange)='dataSourceChanged($event)' (dataBound)='dataBound($event)'
(rowDataBound)='rowDataBound($event)' (dataSource)="dsEvent($event)" (dataStateChange)='dataStateChange($event)'
>
<e-columns>
<e-column field= "id" headerText="Product ID" width="130" isPrimaryKey='true' >e-column>
<e-column field= "name" headerText="Product Name" width="150">e-column>
<e-column field= "description" headerText="Description" width="150">e-column>
<e-column field= "material" headerText="Material" width="150">e-column>
<e-column field= "availability" headerText="Availability" width="150">e-column>
<e-column field= "price" headerText="Price" editType= 'numericedit' width="100">e-column>
<e-column field= "featured" headerText="Featured" editType= 'booleanedit' width="100">e-column>
<e-column field= "picture" headerText="1" width="150">e-column>
<e-column field= "additionalPictures" headerText="2" width="150">e-column>
<e-column field= "categories" headerText="3" width="100">e-column>
<e-column field= "collections" headerText="4" width="100">e-column>
<e-column field= "tenantId" [edit]='dpParams1' headerText="5" width="100">e-column>
<e-column field= "active" headerText="Active" editType= 'booleanedit' width="100">e-column>
e-columns>
ejs-grid>
div>
Here is the console output 
SIGN IN To post a reply.
