Question about Grid Grouping and Live Aggregate Updates

[Ziggy]

Hi,

I am using grid grouping and aggregates. I tried to place the aggregated values in the header of the group instead of the footer but was not successful. Is there a way to do this?

Additionally, is it possible to update the aggregated values live? For example, if a user changes a value in a cell, the aggregate value is also updated live?

Thank you in advance.

Best regards, Ziggy De Caluwé

[Filip]

Hello, Ziggy,

I have prepared an example that showcases one possible approach for rendering the aggregates in the header:

• https://stackblitz.com/edit/qas8aumm-abjz1vys?file=src%2Fmain.vue

In case the issue persists can you please modify the sample so that it matches your implementation? Also, can you share more information on the scenario at hand, how would the user change the value in the cell, will it be via editing?

Regards,
Filip

[Ziggy]

Hi Filip, 

This is works perfectly and was easier then i've tried, thanks you so much. 

We work with several groups and aggregate different columns. Users can change the value of a column using a numericTextBox. It would be helpful if, when a value is changed, the aggregated value updates too. In our case, the aggregated value should always be 0.

I've noticed that the grid only updates the gridItems, but the aggregated values update only once, specifically when the grid is loaded.
Thanks in advance

Kind Regards, 
Ziggy

[Filip]

Hello, Ziggy,

Can you please provide more information on when should the value in the Grid changes? Should it be in a scenario with editing or is it something else?

Regards,
Filip

[Ziggy]

HI Filip, 

I apologize for the unclear explanation

I'll try to show you a sample of my project without giving any information because of security reasons. 

In this example, the first four values are constant, and the aggregated value is shown above. When a user changes the value in the numeric textbox, the values in the last two columns are also updated because I added the value in my code. We want to display the aggregated values for the last two columns. Currently, the aggregated values remain the same, but we want them to update simultaneously when the values in the columns change.

 

In short: When a user changes the value in the textbox, the values in the last columns should be updated. We also want the aggregated value to change simultaneously when the values in the columns are updated.

Kind Regards, 
Ziggy

 

[Filip]

Hi, Ziggy,

Thank you for the provided description.

I can suggest ensuring that the `data` of the aggregates reflects the changes. When a user updates a numeric value, you can trigger a function that updates both the row and the aggregated values. It is also possible to use computed properties or watchers to recalculate and update the aggregated values dynamically.
Please let me know in case further assistance is required.

Regards,
Filip

[Ziggy]

Hi Filip, 

I forgot to add the process method from telerik :

this.gridData = process(this.products, {
          take: this.take,
          skip: this.skip,
          group: this.group,
        });

 

The aggregated values did change, but it took some time for the grid to render again, especially when users entered new data quickly, causing the screen to freeze for a second. I then used the debounce function, and now it's manageable for the users.

Thank you for your help.

Kind regards, 
Ziggy