Hi,
How to use AjaxStore and Grid with custom id field?
It seems like 'Id' is not correctly synced back to AjaxStore after commit.
ExtendedModel extends Model and uses idField property to set custom ‘id’ field.
After AjaxStore commit method grid is not workin correctly. Editing is not working and also sorting is not working.
model:
class ExtendedModel extends Model {
static get fields() {
return [
{ name: 'Participate_id', type: 'number', alwaysWrite: true },
{ name: 'Name', type: 'string', alwaysWrite: true },
];
}
}
ExtendedModel.idField = 'Participate_id';
code
private grid: Grid;
private store: AjaxStore;
public ngOnInit(): void {
this.init();
}
public init(): void {
this.util.getAuthTokensForHttpHeaders().subscribe(headers => {
this.store = new AjaxStore({
modelClass: ExtendedModel,
createUrl: this.customerService.createUrl(),
headers: headers,
});
this.grid = new Grid({
adopt: this.elementRef.nativeElement,
store: this.store,
columns: [
{
field: 'Name',
text: 'Name',
},
],
});
let model: ExtendedModel = new ExtendedModel({
Participate_id: null,
Name: 'Test Name',
});
let record = this.store.add(model)[0];
this.store
.commit()
.then(value => {
console.log('response', value.response);
const idOfCreated = this.store.allRecords[0].getData('Participate_id');
console.log('idOfCreated', idOfCreated);
console.log('idRegister', (<any>this.store).idRegister);
console.log('getById', this.store.getById(idOfCreated));
})
.catch(reason => {})
.finally(() => {});
console.log output
response Response {parsedJson: {…}, type: 'basic', url: 'xxxx', redirected: false, status: 200, …}
idOfCreated 1001
idRegister {_generatedExtendedModel36: ExtendedModel}
arg1: {_generatedExtendedModel36: ExtendedModel}
_generatedExtendedModel36: {"Participate_id":1001,"Name":"Test Name"}
[[Prototype]]: Object
getById undefined
Commit request
{"data":[{"Participate_id":"_generatedExtendedModel36","Name":"Test Name"}]}
Commit response
{"success":true,"data":[{"Participate_id":1001,"Name":"Test Name"}]}
After commit grid is not workin correctly. Editing is not working and also sorting (error below) is not working.
ERROR TypeError: Cannot set property record of [object Object] which has only a getter
at Row.renderCell (grid.module.js:113798:16)
at Row.render (grid.module.js:113702:17)
at RowManager.renderFromRow (grid.module.js:115183:11)
at RowManager.reinitialize (grid.module.js:114382:8)
at Grid.renderRows (grid.module.js:124206:19)
at functionChainRunner (grid.module.js:17577:23)
at plugInto.<computed> [as renderRows] (grid.module.js:17550:43)
at Grid.onStoreDataChange (grid.module.js:122983:10)
at AjaxStore.trigger (grid.module.js:6305:25)
at AjaxStore.afterPerformSort (grid.module.js:30944:12)
at AjaxStore.performSort (grid.module.js:30927:8)
at AjaxStore.performSort (grid.module.js:36062:13)
at AjaxStore.sort (grid.module.js:30728:15)
at Sort.onElementClick (grid.module.js:107012:17)
at functionChainRunner (grid.module.js:17577:23)
at plugInto.<computed> [as onElementClick] (grid.module.js:17550:43)
at Grid.onHandleElementClick (grid.module.js:116444:12)
at Grid.handleEvent (grid.module.js:116263:7)
at HTMLDivElement.handler (grid.module.js:13458:72)
at HTMLDivElement.sentryWrapped (helpers.js:85:17)
at _ZoneDelegate.invokeTask (zone.js:406:31)
at Object.onInvokeTask (core.mjs:26278:33)
at _ZoneDelegate.invokeTask (zone.js:405:60)
at Zone.runTask (zone.js:178:47)
at ZoneTask.invokeTask [as invoke] (zone.js:487:34)
at invokeTask (zone.js:1661:18)
at globalCallback (zone.js:1704:33)
at HTMLDivElement.globalZoneAwareCallback (zone.js:1725:16)