jQuery UI Widgets Forums React Group aggregate not getting refreshed

This topic contains 5 replies, has 2 voices, and was last updated by  Hristo 7 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Group aggregate not getting refreshed #108053

    pratik.shah
    Participant

    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)

    Group aggregate not getting refreshed #108069

    Hristo
    Participant

    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

    Group aggregate not getting refreshed #108077

    pratik.shah
    Participant

    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

    Group aggregate not getting refreshed #108101

    Hristo
    Participant

    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

    Group aggregate not getting refreshed #108220

    pratik.shah
    Participant

    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.

    Group aggregate not getting refreshed #108228

    Hristo
    Participant

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.