Use Map <k, v> or any data in grid

[Sathyanarayanan Srinivasan]

Hi,

I have a screen that matches exactly whats presented in the sample (using normal editing): https://ej2.syncfusion.com/angular/demos/#/material/grid/normal-edit. The onlycomplexity is that  the datasource is a semantic map (json object of type {[k: string]: string}). The Grid is not displaying the data and I do not know how to define couns for this object type.

 Can you please help pointing me in the right direction.

Thanks and best regards,

Sathya

[Seeni Sakthi Kumar Seeni Raj]

Hi Sathyanarayanan, 

Greetings from Syncfusion forum. 

We have validated your "Use Map < k, v > or any grid data" requirement and at our end we can not understand your exact query. Before assisting with this issue, we need information below. 

1. Share your requirement briefly.
2. Share your complete grid rendering code.
3. Are you facing any script error ?
4. Share your dataSource binding structure.
5. Share pictorial representation of your requirement.

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

Regards,  

Seeni Sakthi Kumar S 

[Sathyanarayanan Srinivasan]

Hi Sathyanarayanan, 

Greetings from Syncfusion forum. 

We have validated your "Use Map < k, v > or any grid data" requirement and at our end we can not understand your exact query. Before assisting with this issue, we need information below. 

1. Share your requirement briefly.
2. Share your complete grid rendering code.
3. Are you facing any script error ?
4. Share your dataSource binding structure.
5. Share pictorial representation of your requirement.

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

Regards,  

Seeni Sakthi Kumar S 

hi Seeni,

1. Share your requirement briefly.

The requirements are quite simple. I am making an API call to backend that returns hashmap like data. Simply means, there can be no predictions on the keys (field names). I want to present them as key-value pairs in the grid. 

2. Share your complete grid rendering code.

// component.html

<ejs-grid #mlNames id="metas" [dataSource]="metaData" [allowPaging]="false"

[editSettings]="mdEditSettings" [toolbar]="mdToolbarSettings"

(dataBound)="mdDataBound($event)" (actionFailure)="mdViewFailed($event)"

(dataStateChange)='mdRefreshView($event)'

(dataSourceChanged)='mdCRUDEvent($event)'>

</ejs-grid>

// component.ts

// model

metaData: Observable<DataStateChangeEventArgs>;

// view

mdToolbarOptions: ToolbarItems[];

mdEditSettings: EditSettingsModel;

state: DataStateChangeEventArgs = { skip: 0, take: 0 };

constructor(

private mdService: MetaDataService

) {}

ngOnInit() {

this.mdToolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];

this.mdEditSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };

this.metaData = this.mdServie;

this.mdService.execute(this.state);

}

mdViewFailed(event: any) {

console.log('Check whats happening... ' + JSON.stringify(event));

}

mdRefreshView(newState: DataStateChangeEventArgs) {

console.log('UI DataState has changed...');

console.log('UIEvent args:: action: ' + newState.action.requestType +

', group: ' + newState.group +

', sorted: ' + JSON.stringify(newState.sorted) +

', skip: ' + newState.skip +

', take: ' + newState.take

);

if (((newState as any).action).requestType === 'filterchoicerequest' ||

((newState as any).action).requestType === 'filtersearchbegin') {

console.log('Forced attach dataSource...');

this.mdService.fetch(newState).subscribe((x) => newState.dataSource(x));

} else {

console.log('Default grid event for new data..');

this.mdService.execute(newState);

}

}

mdCRUDEvent(crudEvent: DataSourceChangedEventArgs) {

console.log('UI Data has changed...');

console.log('crudEvent:: action: ' + crudEvent.action +

', changes: ' + JSON.stringify(crudEvent.changes) +

', data: ' + JSON.stringify(crudEvent.data) +

', primaryKeys: ' + JSON.stringify(crudEvent.primaryKeyValues) +

', requestType: ' + crudEvent.requestType);

if (crudEvent.action === 'add' || crudEvent.action === 'edit') {

this.saveData(crudEvent);

} else if (crudEvent.requestType === 'delete') {

this.deleteData(crudEvent);

}

}

]

// MetaDataService.ts

@Injectable({ providedIn: 'root' })

export class ConfigService extends Subject<DataStateChangeEventArgs> {

     

     public execute(state: DataStateChangeEventArgs): void {

     this.fetch(state).subscribe(x => super.next(x as DataStateChangeEventArgs));

     }

     public fetchConfig(state: DataStateChangeEventArgs): Observable<DataStateChangeEventArgs> {

      const mdEndpoint = environment.urls.api.getMetaData;

     let totalCount = 0;

      return this.client.put(mdEndpoint, null)

.pipe(map((data: any) => {

if (data === null) {

this.toaster.error('Operation failed.', 'Oops!!');

console.error('Operation failed.', 'Oops!!');

return [];

}

console.log('Response Payload: ' + JSON.stringify(data));

// process paging...

totalCount = data.length;

let sliced = [];

if (data.length > state.skip + state.take) {

sliced = data.slice(state.skip, state.skip + state.take);

} else {

sliced = data.slice(state.skip, data.length);

}

console.log('After Paging:: start: ' + state.skip + ', end: ' + state.take +

', pageSize: ' + sliced.length + ', totalCount: ' + totalCount);

// process grouping...

let finalResult: any;

console.log('Check stateData:: grouping: ' + JSON.stringify(state.group)

+ ', dataSource: ' + state.dataSource + ', action: ' + !isNullOrUndefined(state.action));

if (isNullOrUndefined(state.dataSource)) {

if (!isNullOrUndefined(state.group) &&

(isNullOrUndefined(state.action) || !isNullOrUndefined(state.action[ConfigService.ROWS]))) {

let groupedResults = sliced;

state.group.forEach(grouping => { groupedResults = DataUtil.group(groupedResults, grouping); });

console.log('Returning filtered config (dS:undef, group:y, action:undef) : ' + JSON.stringify(groupedResults));

finalResult = { result: groupedResults, count: totalCount } as DataResult;

} else {

console.log('Returning filtered config (dS:undef, group:undef, action:na) : ' + JSON.stringify(sliced));

finalResult = { result: sliced, count: totalCount } as DataResult;

}

} else {

console.log('Returning filtered config (dS:y, group:na, action:na) : ' + JSON.stringify(sliced));

finalResult = sliced;

}

console.log('cfg dataSource notified: ' + JSON.stringify(finalResult));

return finalResult;

}))

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

     }

}

Since I do not know the field names (also that would make the table transposed with unconrolled number of coumnns), I could not define the e-columns/e-column structure in my ejs-grid. 

3.Are you facing any script error ?

No. there are no errors on JS console. The grid just doesnt display anything. I even get the databound console log printed.

4. Share your dataSource binding structure.

Typical data for dataSource will look like below...

{

"title" : "Listing",

"category": "P2P",

"locationCity": "Glen Eira",

"locationCountry": "AU",

"e164": "60",

"i639": "en",

"i4217": "AUD",

"i3166": "AU"

}

Thanks and best regards,

Sathya

[Thavasianand Sankaranarayanan]

Hi Sathyanarayanan, 

Thanks for your update. 

We have validated your reported blocks of code and at our end prepared a sample according to your requirement.  

We assume that your prepared code block is being correct, so we suggest you to ensure that beforedataBound, dataBound events are returning the correct data or not. If not, actionFailure event will be triggered and it will return the issue. So, please ensure on this. 

Please refer to the sample and documentation link below. 

Sample link: https://stackblitz.com/edit/angular-umeuhb-t6dsjz?file=normal-edit.html 

Help documentation. 

Link 1:  https://ej2.syncfusion.com/angular/documentation/grid/observables/?no-cache=1#observable-binding-using-async-pipe 

If you still facing the issue please get back to us with the following details 

1. Share the screenshot of the issue.
2. If possible share the sample with the reported issue.

 

Regards, 

Thavasianand S.