1. Home
  2. Forum
  3. React - EJ 2
  4. Grid refreshs on each external button click when using "column object" instances

Grid refreshs on each external button click when using "column object" instances

Hi,

I'm using the GridComponent and wrote my own sub-classes for the "Column"-class, where I define certain attributes by default. Example:

class PrimaryKeyColumn extends Column { 
  constructor() {
    super({
      field: 'Id',
      isPrimaryKey: true,
      visible: false,
      showInColumnChooser: false,
      allowEditing: false
    });
  }
}


Now when I use a grid, I define most of the columns using my predefined subclasses by applying instances of these classes. Example:

 <GridComponent
          columns={[
            new PrimaryKeyColumn(),
            new DateColumn({field: "createdOn"})
          ]}


However, I have noticed when using class instances when defining the "columns", the grid updates much more frequently.

Example (also see attached code):

When I click an external button and the columns of the grid are defined with "Column" instances (or their subclasses) (as shown above), the grid updates with every button click. If, on the other hand, the columns are only defined by anonymous objects (example:

columns={[ { field: 'OrderId', isPrimaryKey: true, visible: false } ]}

), this is not the case.

How can I solve this, or in other words, 

(In any case, I would like to continue using my "specialisations" of the "Column" class, as I have set my default values there once for many column types (Date, DateTime, Foreignkey, Number, Boolean, ...).

I've attached a demo code that tries to explain the problem...

Thanks.


Attachment: reacteuzcy3_bc0769aa.zip

6 Replies
RS Rajapandiyan Settu Syncfusion Team July 8, 2022 03:12 PM UTC

Hi Laurin,


Thanks for contacting Syncfusion support.


Currently, we are validating the reported query with the provided code at our end. We will provide further details on or before July 13th, 2022.


We appreciate your patience until then.


Regards,

Rajapandiyan S


RS Rajapandiyan Settu Syncfusion Team July 13, 2022 11:58 AM UTC

Hi Laurin,


Thanks for your patience.


When you create the columns by new Column(), It will create the Object with a new reference. So, the Grid will be refreshed each time when the Column Object reference changes. If you give the columns in a static way, the object reference will not be changed. So, the Grid is not refreshed.


You are not supposed to change the Column Object reference. We suggest you to bind the columns in a static way (without using new Column()) to avoid the reported behavior,


 

[index.js]

 

const SyncGrid = () => {

  const [show, setShow] = React.useState(false);

  const gridColumns = [

    { field: 'OrderId', isPrimaryKey: true, visible: false },

    { field: 'CustomerName', headerText: 'Customer Name' },

  ];

  function dataBound(args) {

    console.log('databound event triggered');

  }

  return (

      <div className="control-section">

        <GridComponent

          dataBound={dataBound.bind(this)}

          dataSource={data}

          allowPaging={true}

          columns={gridColumns}

        >

          <Inject services={[Page, Toolbar, Edit]} />

        </GridComponent>

      </div>

  );

};

 


Sample: https://stackblitz.com/edit/react-xa25ij-1ks2qm?file=component%2Fapp.jsx


Please get back to us if you need further assistance with this.


Regards,

Rajapandiyan S


LS Laurin S July 18, 2022 12:37 PM UTC

Ok, so far so good, but now using remote data as shown in your demos (https://ej2.syncfusion.com/react/demos/#/bootstrap5/grid/remote-data), the same problem of having a grid refresh at each button click occurs.

See your "modified" demo code with remote data. Clicking on the external button, the grid refresh's each time...


Attachment: reactxa25ij4wybx3_b66a88fa.zip

LS Laurin S July 18, 2022 01:16 PM UTC

... and the same problem occurs when having a foreign key column...

I've attached another demo, using local data, but a foreign key column!


Attachment: reactxa25ijwt6n4k_2ac4d79b.zip

RS Rajapandiyan Settu Syncfusion Team July 19, 2022 08:53 AM UTC

Hi Laurin,


Thanks for your update.


Currently, we are validating the reported query with the provided samples at our end. We will provide further details on or before July 22nd, 2022.


We appreciate your patience until then.


Regards,

Rajapandiyan S


RS Rajapandiyan Settu Syncfusion Team July 22, 2022 05:42 PM UTC

Hi Laurin,


Thanks for your patience.


By default, React will re-render all the components whenever the state value changes. This is the behavior of React component.


If you want to prevent re-render on child components when the state value changes, you can use React.memo. Kindly refer to the below StackOverflow link and sample for more information.


https://stackoverflow.com/questions/61079288/how-do-i-properly-prevent-child-rerender-on-change-value


Sample: https://stackblitz.com/edit/react-xa25ij-rdvnza?file=component%2Fapp.jsx


 

const CustomGrid = React.memo(function MyComponent1(props) {

  console.log('custom Grid rendered');

  return (

    <GridComponent

      dataBound={dataBound.bind(this)}

      dataSource={remoteData}

      allowPaging={true}

      columns={gridColumns}

    >

      <Inject services={[Page, Toolbar, ForeignKey, Edit]} />

    </GridComponent>

  );

});

 


Please let us know if you have any concerns.


Regards,

Rajapandiyan S


Loader.
Up arrow icon