Premium support for our pure JavaScript UI components


Post 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)

Post 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.

Attachments
php.zip
(2.37 KiB) Downloaded 30 times

All the best,
Alex


Post by marko.timonen »

What is the url of the php example?


Post 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/

All the best,
Alex


Post 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"}]}

Post 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 .

All the best,
Alex


Post 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)

Attachments
customized_id.docx
(129.1 KiB) Downloaded 28 times

Post 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?

All the best,
Alex


Post 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.

Attachments
php-customid.zip
(86.47 KiB) Downloaded 28 times

Post 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

All the best,
Alex


Post Reply