Our blazing fast Grid component built with pure JavaScript


Post by guillermoxintel »

Hello dear friends, sorry to bother you, I'm having a hard time trying to implement something that in my point of view, should be very simple and easy... anyway here I go.

What I'm trying to do:

I have a field in my store called teamSizePercent that I would like to change or be editable ONLY if other field called isTemplate is not true. In other words, I have a list of records, some of them are Templates, other are not, I want to be able to change the value of the Size Percent, only if the record is not a Template, please check the following screenshot to have an idea...
Image

Now, my approach was to use the editor and then assign a NumberField Widget, then use the event beforeShow to determine if continue or not, in other words, return false and abort as follow:

{
                    type: 'number',
                    field: 'teamSizePercent',

                text: '<div style="text-align:center!important;">Template<br>Pct (%)</div>',
                htmlEncodeHeaderText: false,
                cls: 'text-center',
                align: 'right',
                editor: {
                    type: 'number',
                    min: 10,
                    field: 'teamSizePercent',                        
                    listeners: {
                        beforeShow: function (event) {
                            console.log(event); //NEVER EXECUTES
                        },
                    },
                },
                renderer: (renderData) => {
                    if (renderData.record.isTemplate == false) {
                        return `${renderData.record.teamSizePercent}%`;
                    }
                    return '';
                }
            },

The problem is... the event beforeShow never executes even if this is clearly specified in the docs... so I created another approach that works but I don't think we are doing it right, something is simply not correct here for such simple thing.

In the following example, I'm using the action event to check if record is a Template, otherwise we disable the NumberField widget. After this, we use the change event to add some more business logic (as you can see) to modify another field of the record called "allowedPositionsCount", in other words, if the teamSizePercent changes, we make some calculations to modify also the allowedPositionsCount which is just another field in the record.

{
                    type: 'number',
                    field: 'teamSizePercent',

                text: '<div style="text-align:center!important;">Template<br>Pct (%)</div>',
                htmlEncodeHeaderText: false,
                cls: 'text-center',
                align: 'right',
                editor: {
                    type: 'number',
                    min: 10,
                    field: 'teamSizePercent',                        
                    listeners: {
                        beforeShow: function (event) {
                            console.log(event); //NEVER EXECUTES
                        },
                        action: function (event) {     
                            var selectedRecord = grid.selectedRecord;
                            if (selectedRecord.isTemplate) event.source.disable();
                        },
                        change: function (event) {

                            if (event.userAction) {

                                var selectedRecord = grid.selectedRecord;
                                var template = modelStore.getById(selectedRecord.templateSourceId);

                                if (template) {

                                    var HowMany = (template.populatedRowsCount / 100) * event.value;
                                    if (HowMany < 1) HowMany = 1;
                                    HowMany = Math.ceil(HowMany);

                                    selectedRecord.allowedPositionsCount = HowMany;

                                }

                            }
                            
                        }

                    },
                },
                renderer: (renderData) => {
                    if (renderData.record.isTemplate == false) {
                        return `${renderData.record.teamSizePercent}%`;
                    }
                    return '';
                }
            },

Questions:

  • What's the right way of saying, I want to edit this field only if X condition exist?

  • Why the event "beforeShow" is not firing?

  • I'm modifying in first place the field teamSizePercent but as soon as I get a new value, I'm using this new field's value to make a calculation and modify another field on the fly called allowedPositionsCount... now I noticed it fires 2 changes to the server, almost at the same time... is there a way to obtain only 1 change?

Thank you for all the help you may bring.


Post by mats »

What's the right way of saying, I want to edit this field only if X condition exist?

This is the event you should use, and return false to prevent editing: https://bryntum.com/docs/grid/api/Grid/feature/CellEdit#event-beforeCellEditStart

Why the event "beforeShow" is not firing?

We will look into it shortly.

I'm modifying in first place the field teamSizePercent but as soon as I get a new value, I'm using this new field's value to make a calculation and modify another field on the fly called allowedPositionsCount... now I noticed it fires 2 changes to the server, almost at the same time... is there a way to obtain only 1 change?

Please open a new thread for this and we will try to help.


Post Reply