Group aggregate not getting refreshed

[pratik.shahParticipant]

Hi thanks for great library. I am updating cell values of jqxgrid table in realtime. And aggregate are getting refreshed simultaneously. But group aggregates are not getting updated. I created an example using codesandox(https://codesandbox.io/s/jqxgrid-group-aggregate-zph3d)

[HristoParticipant]

Hello pratik.shah,

Thank you for the provided example but it seems it throws an error and cannot be started.
Meanwhile, I would like to suggest you try to use the render method.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[pratik.shahParticipant]

Hi Hristo Hristov,

Verified, link is working. It takes around 7-8 seconds to show table. I am using functional component and that is why can’t use render method

[HristoParticipant]

Hello pratik.shah,

I would like to suggest you try to use another approach for your logic with which you could know when exactly to update the jqxGrid.
From the provided example I assume that you want to make permanent refresh to update your jqxGrid with the newer data.
Try to use some callback or event that guarantees there is new data.
In your changeQuantity function I try that approach and it seems the aggregates in the groups are updated:

import React, { useRef, useEffect } from "react";
import JqxGrid, { jqx } from "jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid";

import { columns } from "./Columns";
import "./styles.css";

// const localdata = generatedata(5, false);
const localdata = [
  {
    firstname: "Antoni",
    lastname: "Vileid",
    productname: "Caramel Latte",
    date: "Sat Feb 15 2020 00:00:00 GMT+0200 (Eastern European Standard Time)",
    quantity: 10,
    price: 1.5
  },
  {
    firstname: "Elio",
    lastname: "Nodier",
    productname: "Green Tea",
    date: "Sat Jan 11 2020 00:00:00 GMT+0200 (Eastern European Standard Time)",
    quantity: 5,
    price: 2.5
  },
  {
    firstname: "Shelley",
    lastname: "Fuller",
    productname: "Caffe Latte",
    date: "Tue Jun 30 2020 00:00:00 GMT+0300 (Eastern European Summer Time)",
    quantity: 8,
    price: 1.75
  },
  {
    firstname: "Sven",
    lastname: "Vileid",
    productname: "Caffe Latte",
    date: "Tue Oct 13 2020 00:00:00 GMT+0300 (Eastern European Summer Time)",
    quantity: 5,
    price: 2.5
  },
  {
    firstname: "Antoni",
    lastname: "Burke",
    productname: "Cappuccino",
    date: "Mon Feb 10 2020 00:00:00 GMT+0200 (Eastern European Standard Time)",
    quantity: 2,
    price: 4.5
  }
];

export default function App() {
  const gridRef = useRef();
  let source = {
    datafields: [
      { name: "firstname", type: "string" },
      { name: "lastname", type: "string" },
      { name: "productname", type: "string" },
      { name: "date", type: "date" },
      { name: "quantity", type: "number" },
      { name: "price", type: "number" },
      { name: "total", type: "number" }
    ],
    datatype: "array",
    localdata: localdata
  };

  let dataAdapter = new jqx.dataAdapter(source);

  function changeQuantity() {
    if (gridRef.current) {
      if (gridRef.current.getcelltextbyid(1, "quantity") === 200) {
        localdata[1].quantity = 10;
        // gridRef.current.setcellvaluebyid(1, "quantity", 10);
      } else {
        localdata[1].quantity = 200;
        // gridRef.current.setcellvaluebyid(1, "quantity", 200);
      }

      source.localdata = localdata;

      gridRef.current.updatebounddata("data");
    }

    setTimeout(function() {
      changeQuantity();
    }, 1000);
  }

  useEffect(() => {
    setTimeout(function() {
      changeQuantity();
    }, 2000);
  });

  return (
    <div className="App">
      <JqxGrid
        ref={gridRef}
        source={dataAdapter}
        columns={columns}
        groupable={true}
        groups={["price"]}
        width={800}
        showgroupaggregates={true}
        showstatusbar={true}
        showaggregates={true}
        statusbarheight={25}
        selectionmode={"singlecell"}
        groupsexpandedbydefault={true}
      />
    </div>
  );
}

I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[pratik.shahParticipant]

Hello Hristo Hristov,
Thanks for the replying. I tried your solution. It is re-rendering the table everytime we get new update. And yes grouped aggregate is getting updated. But all the expanded rows gets collapsed.

[HristoParticipant]

Hello pratik.shah,

I tested this example and it seems to work fine:
https://codesandbox.io/s/jqxgrid-group-aggregate-fq32w?fontsize=14&hidenavigation=1&theme=dark
I only add the mentioned changes to your example.
Could you clarify it?
I suppose that your groups should be always expanded and that is in the example.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts