Page 1 of 1

AjaxStore with custom id field

Posted: Tue Sep 13, 2022 4:13 pm
by marko.timonen

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)

Re: AjaxStore with custom id field

Posted: Thu Sep 15, 2022 12:45 pm
by alex.l

I've updated our PHP example with your code. Could you please try to reproduce the problem described in there? Because I see no errors.


Re: AjaxStore with custom id field

Posted: Fri Sep 16, 2022 8:15 am
by marko.timonen

What is the url of the php example?


Re: AjaxStore with custom id field

Posted: Fri Sep 16, 2022 8:22 am
by alex.l

You need to check /examples/php folder in the sources you downloaded.

Online example is here: https://bryntum.com/examples/grid/php/


Re: AjaxStore with custom id field

Posted: Fri Sep 16, 2022 8:44 am
by marko.timonen

This example uses 'id' field not custom id like 'Participate_id'

For example create.php returns id

{"success":true,"data":[{"id":7,"brand":"Testing","model":"Testing2","dt":"2022-09-16 08:31:34"}]}

I think in this case it would be something like

{"success":true,"data":[{"Participate_id":7,"brand":"Testing","model":"Testing2","dt":"2022-09-16 08:31:34"}]}

Re: AjaxStore with custom id field

Posted: Fri Sep 16, 2022 9:31 am
by alex.l

Are you talking about the app I've attached or about our original example?
I've applied required changes to the app in php.zip .


Re: AjaxStore with custom id field

Posted: Tue Sep 20, 2022 7:31 am
by marko.timonen

I tested using attached php source with javascript code from php example.
I just add ExtendedModel to example (\examples\php\app.module.js)

class ExtendedModel extends Model {
    static get fields() {
        return [
            { name: 'Participate_id', type: 'number', alwaysWrite: true },
            { name: 'brand', type: 'string', alwaysWrite: true },
            { name: 'model', type: 'string', alwaysWrite: true },
            { name: 'dt', type: 'string', alwaysWrite: true },
        ];
    }
}

ExtendedModel.idField = 'Participate_id';

Change id -field and add modelClass to store.

    columns : [
        {
            text   : 'Participate_id',
            field  : 'Participate_id',
    store : {
        modelClass     : ExtendedModel,
       

Open /examples/php in a browser.

Click ‘Add row’ and ‘Save’.
Clicking ‘Brand’ for sortin field lead to error.

grid.module.js?461863:43 Uncaught TypeError: Cannot set property record of #<Location> which has only a getter
at Row.renderCell (grid.module.js?461863:43:178801)
at Row.render (grid.module.js?461863:43:177596)


Re: AjaxStore with custom id field

Posted: Tue Sep 20, 2022 3:15 pm
by alex.l

Hi marko.timonen,

It works good on my end. I used code from your .docx file for frontend with php backend I attached in php.zip (I changed our example to have correct id field returned by backend). I see no errors.
It would be good if you attach full application as I did, zip a folder with frontend and backend so I will be able to run it and test.
As I understood, you see this problem in our php example too, right?


Re: AjaxStore with custom id field

Posted: Wed Sep 21, 2022 8:21 am
by marko.timonen

Hi,

Full example attached.

Open Chrome and example.
Open developer tools ( F12).
Press '+ ADD ROW' button
Press 'SAVE'
Sort by 'BRAND'
Error shows in console.

Press '+ ADD ROW' button
Press 'SAVE'
Another error shows in console.


Re: AjaxStore with custom id field

Posted: Wed Sep 21, 2022 10:05 am
by alex.l

Thanks for example. I've reproduced the problem, that's a bug that we will investigate and fix.
Here is a link to track the status https://github.com/bryntum/support/issues/5285