Our blazing fast Grid component built with pure JavaScript


Post by md shazeb »

As u can see in the video i am using Bryntum grid and in that grid in each cell i have created a three dot icon which is being shown on hover. As I click that icon a dropdown opens up which is an ant component which has list of actions.As i click on the edit action a modal opens up which is also and ant component . But as i open the model my data of grid gets lost even the grid is there according to the data but it is not showing the data.

I have attached the screen recording and also the code which is also in the attachment.

Please Guide me to the solution.

Attachments
bryntum_gridfeature.zip
backend and frontend code express is backend folder
(3.46 MiB) Downloaded 45 times
Screen Recording 2022-09-08 at 7.10.56 PM.mov
Screen recording of the feature
(4.92 MiB) Downloaded 49 times

Post by tasnim »

Hi,
The problem you are having is that you've set the config inside of the react component but not in useState, so What happens is that every time you make any changes to your app it re-renders and it disappears when you make a request to the server for edit. So Just put it in a useState and it works properly.

chrome_r4w5l9hWsJ.gif
chrome_r4w5l9hWsJ.gif (770.51 KiB) Viewed 543 times

Please check the modified demo below.

Attachments
bryntum_gridfeature.zip
(2.95 MiB) Downloaded 43 times

Post by sergey.maltsev »

Hi!

To be more specific when you define const config = {...} inside React component code it resolves into recreating this object each rendering cycle.
Then this new object is passed to BryntumGrid react component which determines it is new object and applies new values with empty store to Grid instance.

The correct approaches to preserve object from recreating:

  1. Define or import config outside of react compoenent
    import { gridConfig } from './GridConfig.js';
    const App = () => {
    ...
        return (
            <Fragment>
                <BryntumGrid
                    ref={grid}
                    {...gridConfig}
                />
            </Fragment>
        );
    }
  2. Use React useState
    const App = () => {
       
       const [gridConfig] = useState({...});
    ...
        return (
            <Fragment>
                <BryntumGrid
                    ref={grid}
                    {...config}
                />
            </Fragment>
        );
    }
    Please check both approaches in bundled React demos.
    https://www.bryntum.com/docs/grid/guide/Grid/download#demos
    https://www.bryntum.com/docs/grid/guide/Grid/integration/react/guide#build-and-run-local-demos

Post by md shazeb »

Thanks A lot My problem got resolved


Post by md shazeb »

just one more problem i am facing i am doing server side sorting and i have gave a url in readURL prop then on the basis what kind of sorting operation it performs it assigned a query with params being the value given in sortParamName .Now as I click the arrow its continuously making call to server its not stoping .

Can you please help me with this?


Post by alex.l »

Hi md shazeb,

How can we reproduce that? Could you please post latest version of your code?

All the best,
Alex


Post by md shazeb »

In same code it is there in. config object there is a store object and there is a readUrl which is http request .Now the moment i click the arrow it send a request with some queryParams .But it keeps on sending the request it doesnt stop.
Can you please help me with this ?\

The code is there in the zip file.


Post by tasnim »

Now as I click the arrow its continuously making call to server its not stoping

Could you please explain which arrow you are talking about ?


Post by md shazeb »

I am talking about the arrow which is at every column header and is used for sorting u can have a look at the code that its continuously making a call to server.


Post by tasnim »

Hi,
Reproduced! We'll investigate. Here is a ticket for that https://github.com/bryntum/support/issues/5214

Thanks for reporting!


Post Reply