[REACT] Implementing features without using readUrl

[md shazeb]

Hello Team Bryntum,
I am currently using Bryntum Grid. In the grid, the config object has a store and the store consists of readUrl property which expects a url. This readUrl is responsible for fetching the records initially and also fetch the updated records whenever we perform an action in grid such loading children records in a Tree grid.
I want to use the same features without using readUrl. So for operations such as Server Side Sorting, Resizing, Tree Load on Demand I would like to send the payload to the server using my own function. This function will internally be using an async request library such as Axios. The response from this async request will be used to update a state which contains the records in my functional component.
For eg: In the case of server-side sorting when we click the sort indicator on Grid I want an event to get fired on that event I will make a call to the server and will update records. Similarly In case of tree load on demand I want that event gets fired on node expand and on that event I will make a call to server and update the grid.

So how can we acheive this ?

[alex.l]

Hi md shazeb,

Try to use local Store (not AjaxStore) and listen to its events and run your logic https://bryntum.com/docs/grid/api/Core/data/Store#events

[md shazeb]

I am using local store now . So i was looking whether multisorting works or not but it is not working.

const config = {
    //contextMenuTriggerEvent: 'click',

// autoHeight: true,
multiSort: true,
treeFeature: true,
   

store: {
  sorters: sort,
  tree: true,
  //sortParamName: "sort",

  listeners: {
    sort: (value) => {
      console.log(value);
      setSort(value.sorters);
    },
  },
},

features: {
  // enable CellTooltip and configure a default renderer
  // cellTooltip: {
  // tooltipRenderer: ({ record, column }) => record[column.field],
  // },
  // group: "budget",
  cellMenu: false,
},

// appendTo:

columns: {
  data: [...columnData],
  listeners: {
    change(value) {
      console.log(value);
      // clearTimeout(id);
      // id = setTimeout(
      //   function () {
      //     postData(value);
      //   },
      //   // () => postData(value),
      //   1000
      // );

      //// console.log(value);
    },
  },
},

listeners: {
  beforeCellEditStart: cellPrivilegeCheck,
  expandNode: (value) => {
    console.log("expanded");
    console.log(value);
  },
},
  };

I am passing this config object in Bryntum grid component.As u can see i have given multiSort as true but it is not working
and also i am listening to the sort event of store but there in the console also i can see only one element in the sorter array.

Can u please guide me ?

[alex.l]

The code snippet is not really informative, I don't see what is setSort and value.sorters.
Please check this example, it does what you need using local store and it works https://bryntum.com/examples/grid/sorting/
Source code is available is sources you downloaded, check examples/sorting/ folder.