[INFO REQ] Please help with grid updates not showing...

[sipi41]

Mr Mats, sorry for the delay, it was not easy to put all things together to make the sample, it did look easy at first... Anyway, I sent you 2 messages, one contained a .zip file with the sample project, the other one contained a link from google drive in case the e-mail block the .zip file. Please let me know if you have trouble with anything, thank you so much for your kind help.

[alex.l]

I was not able to run your app, it's a complex C# application with no instructions.
But I checked the JS code and have some notes.

1. You add employee to another store, not the one that your grid uses. Records in the store's grid has no updates, that's why renderers not reflect to that changes. Every cell re-renders only if it's required - if data in the field of a record a cell displayed (tracking) was been changed. So, first step might be to catch the moment when you do updates in your separated store and call refresh.
2. Max call stack problem needs to be stepped out on your side. Looks like you call it in a loop, you need to check if you have actual changes or not. Use debugger, it's a problem in your code. Check when and why the listener you used is called and how to prevent that (with some extra condition?).

Since you do changes in another store and not in actual records and it cannot be tracked automatically, you need to manage refresh by your own. Here are methods for that:
https://bryntum.com/docs/grid/api/Grid/view/GridBase#function-refreshRows to refresh the entire grid
https://bryntum.com/docs/grid/api/Grid/column/Column#function-refreshCell to refresh a cell

[sipi41]

We are so sorry that we send you a sample you could not open or work on... I will send (soon) another e-mail to support with a fresh sample with HTML only that you can run. I will include in the e-mail instructions of what we have for you to see. Please contact me by phone at 832-292-0088 with any questions you may have or by email at guillermox.perez.reyes@intel.com I'll be handy.

Ms. Katherine found a work-around for it which is setting autocommit to false (on the employeeStore) , invoke commit after modifying the record, and then calling for grid refresh when the commit event fires on the employeeStore, and this seems to work but, why it fails in the first place?

[mats]

Just checked the support box, nothing new there - please resend?

[Animal]

What you were asking is that all other rows in the grid which have the same employeeId have their team cell refreshed.

It's simple when you put it like that.

You just have to write code to do that. Extract the grid records where the employeeId is the same: https://www.bryntum.com/docs/grid/api/Core/data/Store#function-query

Then ask for the cells to be rerendered.

The combo's onAction should be something like

                            onAction: async ({ source, value, record, records, userAction }) => {

                                if (userAction == true) {

                                   // This is the context in the Grid that is being edited. Very useful
                                    var recordBeingEdited       = source.cellInfo.record,
                                        { column : teamColumn } = source.cellInfo;

                                    if (record) {

                                        var selectedTeam = record;
                                        //NOTE: If done this way, beforeCommit event is fired, no changes are saved into the Store... why?? not sure.
                                        //var EmployeeInStore = employeeStore.getById(employeeInfo.employeeId);
                                        //NOTE: If done this way, beforeCommit is never fired but store is updated.
                                        var Employee = employeeStore.getById(recordBeingEdited.employeeId);                                        


                                        Employee.teamId = selectedTeam.id;
                                        Employee.team = selectedTeam.textValue;

                                        // Gather all records which have the same employeeId
                                        const allOtherRecordsForEmployee = grid.store.query(r => r !== recordBeingEdited && r.employeeId == recordBeingEdited.employeeId);

                                        // Refresh the cells where the same employee is used!!!!
                                        allOtherRecordsForEmployee.forEach(c => {
                                            if (c !== recordBeingEdited) {
                                                grid.rowManager.refreshCell(c, teamColumn.id);
                                            }
                                        })

                                        console.log("EmployeeInStore", Employee);

                                        //grid.refreshColumn(source.cellInfo.column); //NOT WORKING
                                        //grid.refreshRows();  //NOT WORKING
                                        //grid.renderRows();   //NOT WORKING                                      
                                        //employeeStore.getById(employeeInfo.employeeId).set(EmployeeInStore);   //NOT WORKING
                                        //employeeStore.commit(); //NOT WORKING

                                        //save the data (.Net)...
                                        //await componentObj.invokeMethodAsync("UpdateEmployeeTeam", EmployeeInStore);                                       

                                        console.log("employeeStore Data AFTER", employeeStore.data);

                                    }

                                }
                            }

The key is generating allOtherRecordsForEmployee.

But there's so much wrong here.

You shouldn't just define fields in your Store You should define your business entities as their own Model subclasses.

You need an Employee model and a Team model, and a ... whatever it is in the grid Model.

See the problem? What is it that the grid is showing? Define a class which specifies what it is so that you can talk about it in code using meaningful names

Then you can talk about them in code:

class Employee extends Model {
    fields : [
                { name: 'id', type: 'integer' },
                { name: 'wwid', type: 'integer' },
                { name: 'fullName', type: 'string' },
                { name: 'managerWwid', type: 'integer' },
                { name: 'costCenter', type: 'string' },
                { name: 'homeSite', type: 'string' },
                { name: 'employeeType', type: 'string' },
                { name: 'team', type: 'string' },
                { name: 'teamId', type: 'integer' },
    ]
});

employee = employeeStore.getById(employeeId);

Not "employeeData" but "employee". This IS an employee.

And you should not dig down and look at the data property in your records. The Model class will define setters and getters for the fields so that changing them will send a signal to the Store that data has changed and the Store will broadcast events which UIs can use.

And don't use autoHeight on the grid. You surely want the header row to stay still and the data part to scroll? Make sure the grid is sized by your CSS. You should never have to use height or width on widgets. They should always be sized by CSS

And do not embed event handlers and renderers scattered throughout the code. Hoist them to the top of your file and reference them.

Same with the column definitions. Put them into a module, and import the var.

The definition of that Grid should really be a maximum of 30 lines, and readable to have a 30,000 foot overview of what it does. Then each bit can be investigated by a maintainer.

As it is, it's a huge monolith.

And do not debug by just using console.log statements. Set breakpoints in the code and examine the state of your application:

Screenshot 2022-03-03 at 08.58.58.png (506.8 KiB) Viewed 610 times