[INFO REQ] Group with complex field name

[henrique]

The version I'm using is 5.2.0.

I try to run the sample, but I don't know where come from the "t.iit" class. But removing it give the error:

TypeError: Cannot set property grid of #<Window> which has only a getter

[alex.l]

t.iit is came from Siesta test framework. https://www.bryntum.com/products/siesta/
Animal just demonstrated to you some scenario he used to test functionality.
Please post your full code, not clear what may be wrong with that and what exactly you tried.

[henrique]

        class FoodItem extends Model {
            static fields = [{
                name : 'foodType'
            }]
        }
        class Diner extends Model {
            static fields = [{
                name       : 'foodItem',
                type       : 'model',
                convert    : function(data) {
                    return new FoodItem(data);
                }
            }]
        }

grid = new Grid({
    appendTo : document.body,

    features : {
        group : 'foodItem.foodType'
    },

    columns : [
        {
            text   : 'Name',
            field  : 'name',
            flex   : 2,
            editor : {
                type     : 'textfield',
                required : true
            }
        }, {
            text  : 'Age',
            field : 'age',
            width : 100,
            type  : 'number'
        }, {
            text  : 'City',
            field : 'city',
            flex  : 1
        }, {
            text  : 'Food',
            field : 'food',
            flex  : 1,
        }, {
            text     : 'Color (not sortable)',
            field    : 'color',
            flex     : 1,
            sortable : false,
            renderer({ cellElement, value }) {
                // renderer that sets text color = text
                cellElement.style.color = value;
                return value;
            }
        }
    ],
    store : {
        modelClass : Diner,
        data       : [{
            name     : 'Anim',
            age      : 20,
            city     : 'SF',
            color    : 'red',
            food     : 'Burger',
            foodItem : { 
                foodType : 'Junk Food'
            }
        }, {
            name     : 'Siam',
            age      : 21,
            city     : 'LA',
            color    : 'blue',
            food     : 'Apple',
            foodItem : { 
                foodType : 'Healthy Food'
            }
        }]
    }
});

[alex.l]

So I guess you tried it in our demo page environment.
Then fix will be to add const before grid variable declaration.

const grid = new Grid({

[henrique]

In the Animal sample, the Store is loaded with raw data, and in my sample, the Store is loaded with a class model, because of this, my sample doesn't work.

If change the sample for model, the Animal sample doesn't work too!

import { Model, Grid, Store, DataGenerator } from '../../build/grid.module.js?462681';
import shared from '../_shared/shared.module.js?462681';

    class FoodItem extends Model {
        static fields = [{
            name : 'foodType'
        }]
    }
    class Diner extends Model {
        static fields = [{
            name       : 'foodItem',
            type       : 'model'
        }]
    }

let diner1 = new Diner ({
            name     : 'Anim',
            age      : 20,
            city     : 'SF',
            color    : 'red',
            food     : 'Burger',
            foodItem : { 
                foodType : 'Junk Food'
            }});
let diner2 = new Diner ({
            name     : 'Siam',
            age      : 21,
            city     : 'LA',
            color    : 'blue',
            food     : 'Apple',
            foodItem : { 
                foodType : 'Healthy Food'
            }});

let grid = new Grid({
    appendTo : 'container',

features : {
    group : 'foodItem.foodType'
},

columns : [
    {
        text   : 'Name',
        field  : 'name',
        flex   : 2,
        editor : {
            type     : 'textfield',
            required : true
        }
    }, {
        text  : 'Age',
        field : 'age',
        width : 100,
        type  : 'number'
    }, {
        text  : 'City',
        field : 'city',
        flex  : 1
    }, {
        text  : 'Food',
        field : 'food',
        flex  : 1,
    }, {
        text     : 'Color (not sortable)',
        field    : 'color',
        flex     : 1,
        sortable : false,
        renderer({ cellElement, value }) {
            // renderer that sets text color = text
            cellElement.style.color = value;
            return value;
        }
    }
],
store : {
    modelClass : Diner,
 
data: [diner1, diner2]    

}
});

[henrique]

So, any news about it?

[alex.l]

You need to add convert, as it done in Animal's example

class FoodItem extends Model {
            static fields = [{
                name : 'foodType'
            }]
        }
        class Diner extends Model {
            static fields = [{
                name       : 'foodItem',
                type       : 'model',
                convert    : function(data) {
                    return new FoodItem(data);
                }
            }]
        }

[henrique]

Even with the convert, still not working for me:

Image.png (35.83 KiB) Viewed 440 times

import { Model, Grid, Store, DataGenerator } from '../../build/grid.module.js?462681';
import shared from '../_shared/shared.module.js?462681';

class FoodItem extends Model {
    static fields = [{
        name : 'foodType'
    }]
}
class Diner extends Model {
    static fields = [{
        name   : 'foodItem',
        type   : 'model',
        convert: function(data) {
                return new FoodItem(data);
            }

    }]
}

let diner1 = new Diner ({
            name     : 'Anim',
            age      : 20,
            city     : 'SF',
            color    : 'red',
            food     : 'Burger',
            foodItem : { 
                foodType : 'Junk Food'
            }});
let diner2 = new Diner ({
            name     : 'Siam',
            age      : 21,
            city     : 'LA',
            color    : 'blue',
            food     : 'Apple',
            foodItem : { 
                foodType : 'Healthy Food'
            }});

let grid = new Grid({
    appendTo : 'container',

features : {
    group : 'foodItem.foodType'
},

columns : [
    {
        text   : 'Name',
        field  : 'name',
        flex   : 2,
        editor : {
            type     : 'textfield',
            required : true
        }
    }, {
        text  : 'Age',
        field : 'age',
        width : 100,
        type  : 'number'
    }, {
        text  : 'City',
        field : 'city',
        flex  : 1
    }, {
        text  : 'Food',
        field : 'food',
        flex  : 1,
    }, {
        text     : 'Color (not sortable)',
        field    : 'color',
        flex     : 1,
        sortable : false,
        renderer({ cellElement, value }) {
            // renderer that sets text color = text
            cellElement.style.color = value;
            return value;
        }
    }
],
store : {
    modelClass : Diner,
 
data: [diner1, diner2]    

}
});

[henrique]

Still not working with the "convert" function!

[alex.l]

Hi, I was able to reproduce this, the ticket is here https://github.com/bryntum/support/issues/5493