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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

150120 Dec 21,2019 04:48 AM UTC Dec 24,2019 12:24 PM UTC Angular - EJ 2 3
loading
Tags: Grid
Sathyanarayanan Srinivasan
Asked On December 21, 2019 04:48 AM UTC

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 [Syncfusion]
Replied On December 23, 2019 12:19 PM UTC

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
Replied On December 24, 2019 01:30 AM UTC

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 [Syncfusion]
Replied On December 24, 2019 12:24 PM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon