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

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

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

3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 23, 2019 04:19 AM

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 



SS Sathyanarayanan Srinivasan replied to Seeni Sakthi Kumar Seeni Raj December 23, 2019 05:30 PM

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




TS Thavasianand Sankaranarayanan Syncfusion Team December 24, 2019 04:24 AM

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. 


Help documentation. 


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. 


Loader.
Live Chat Icon For mobile
Up arrow icon