Our state of the art Gantt chart


[ANGULAR] Reacting on indirect changes in cell data

Post Reply

Post by arpit »

Hi team,

  • 1

i need to add some style when a user changes data in a cell and also to those cells in which data change happens due to change in some other cell, i am able to change style for the cells which user is changing directly, using renderer and beforeCellEditFinish event, but event handler is not being called for indirect cells

  • 2

another doubt is that on updating a cell data, beforeUpdate event on task store is being called for all rows even for such row which are not dependent on the row changed?
Thanks.

Post by alex.l »

Hi arpit,

Yes, beforeCellEditFinish will be fired only for the cell where editing has been finished.
If you want to highlight cells, the only way is to implement this by yourself. I could recommend you to check changes property fo the store you changed (ex. gantt.eventStore.changes.modified) or the project itself (gantt.project.changes.tasks), and use the next API.

https://bryntum.com/docs/gantt/#Core/data/mixin/StoreCRUD#property-changes
https://bryntum.com/docs/grid/#Grid/row/RowManager#function-getRowFor
https://bryntum.com/docs/grid/#Grid/row/Row#function-getCell
https://bryntum.com/docs/gantt/#Core/helper/DomHelper#function-highlight-static

About #2 please provide a test case / steps to reproduce, we will check it.

All the best,
Alex

Post by arpit »

Hi Alex, thanks for reply, now I am able to detect all changes direct and indirect using dataReady event, consider that user changes enddate of tasks now render gets called and after that event handler for dataready event executes now i am doing some change in properties like name of records inside this event handler but after this change no render cycle is being executed and this change is commited on the view only in the next render cycle not instantly, so is there some way that after making changes in data in dataReady event handler i can trigger a render cycle to commit these changes.
Thanks

Post by mats »

Please share your code

Post by arpit »

Hi,
below is my dataReady event handler

 this.gantt.project.on('dataReady',async  ({ records }) => {
      const checkedEditedFields = ['duration', 'startDate', 'endDate']
      records.forEach(currRecord => {
        if(currRecord.modifications){
          Object.keys(currRecord.modifications).forEach(currField => {
            if(checkedEditedFields.includes(currField)){
              currRecord.isEdited[currField] = true;
            }
          })
        }
      });
    });

and below is my renderer for one of the columns

renderer({ cellElement, row, record, value }) {
            if (record.isEdited['endDate'] === true) {
              cellElement.classList.add('green');
            }
            return moment(value).format('DD/MM/YYYY');
          }

Post by saki »

Have you extended the default Model to have isEdited field? Without that you just set a property on the record which is not know to gantt so it is ignored.

To learn how to extend a model, see please our advanced Gantt demo, examples/advanced/lib/Task.js file and the rest of the sources to see how to use it.

Post Reply