1. Home
  2. Forum
  3. React - EJ 2
  4. Error with react-router's history.push in Grid

Error with react-router's history.push in Grid

Hi Syncfusion,
I am trying to customize the functionality of the edit button in the command column of Syncfusion grid. What I want to achieve with the edit button is to redirect to another page, using the react-router's useHistory Hook.
Here's my code:
import { useHistory } from 'react-router-dom';
const commandClick = (args: CommandClickEventArgs|undefined) => {
if(args?.commandColumn?.type === "Edit") {
history.push("/main");
}
}
Error encountered:
normal-edit.js:23 Uncaught TypeError: Cannot read property 'id' of null
at InlineEdit.NormalEdit.clickHandler (normal-edit.js:23)
at Observer.notify (observer.js:99)
at GridComponent.Component.notify (component.js:249)
at GridComponent.Grid.mouseClickHandler (grid.js:3601)
Any help would be appreciated. Thank you.

11 Replies 1 reply marked as answer
MS Manivel Sellamuthu Syncfusion Team April 8, 2021 05:48 AM UTC

Hi Eddy, 

Greetings from Syncfusion support. 

We are able to identify the reported issue. From the shared code we understand that you are redirecting to another page in the Edit commandclick event of the Grid. However the editing operation of the Grid component is not stopped, so the grid scripts will continue to execute while the grid element is destroyed, due to redirecting to another page. This is the root cause of the issue. 

So we suggest you to cancel the Default Grid edit action in the actionBegin event of the Grid to resolve the issue. This is demonstrated in the below code example. 

 
    commandClick (args) { 
if(args?.commandColumn?.type === "Edit") { 
// history.push("/main"); 
} 
    } 
 
    actionBegin (args) { 
if (args.requestType == "beginEdit") { 
// here we are cancelling the default grid action 
  args.cancel = true 
} 
    } 
 
    render() { 
        return (<div className='control-pane'> 
        <div className='control-section'> 
          <GridComponent id='gridcomp' dataSource={data} allowPaging={true} pageSettings={{ pageCount: 5 }} editSettings={this.editSettings} 
          commandClick={this.commandClick.bind(this)} actionBegin={this.actionBegin.bind(this)} 
          > 
            <ColumnsDirective> 
              <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey={true} validationRules 


Please let us know if you need further assistance. 

Regards, 
Manivel 


Marked as answer
EM Eddy Mackonade April 9, 2021 02:24 PM UTC

Hi Manivel,

I have tried your solution, the problem still persist. Please advise. Thank you.

MS Manivel Sellamuthu Syncfusion Team April 12, 2021 06:49 AM UTC

Hi Eddy, 

Thanks for your update. 

From your update we are unable to get the exact issue that you are facing. 
Could you please share the below details, which will be helpful for us to validate further about issue. 

  1. Share the complete Grid code
  2. Share the Syncfusion packages version
  3. Share the screenshot or video demo of the issue
  4. Share the issue reproducible sample or reproduce the issue in the given sample, if possible.

Regards, 
Manivel 


EM Eddy Mackonade April 20, 2021 08:33 AM UTC

Hi Manivel Sellamuthu,

Here's my code as per requested, I can only extract my code partially:

import {
    Grid as GridSF,
    GridComponent,
    Column,
    ColumnsDirective,
    ColumnDirective,
    CommandColumn,
    CommandModel,
    CommandClickEventArgs,
    Page,
    PageSettingsModel,
    Edit,
    EditSettingsModel,
    Inject,
} from '@syncfusion/ej2-react-grids';

const editSettings: EditSettingsModel = { allowDeleting: true, mode: 'Normal' };

const commands: CommandModel[] = [
    { type: 'Edit', buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' } },
    { type: 'Delete', buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons' } },
];

const actionBegin = (args: any) => {
        if (args.requestType == 'beginEdit') {
            args.cancel = true;
        }
};

const commandClick = (args: CommandClickEventArgs|undefined) => {
    if (grid) {
        if(args?.commandColumn?.type === "Edit") {
            history.push({
                pathname: '/edit',
                state: {data: data}
            });
        }
    }
};

    dataSource={data}
    allowPaging={true}
    pageSettings={pageSettings}
    editSettings={editSettings}
    commandClick={commandClick}
    actionBegin={actionBegin}
    ref={(g) => (grid = g)}
>
   
       
            field="id"
            headerText="Source Id"
            width="110"
            visible={false}
            isPrimaryKey={true}
        />
       
   
   
       
   
   



Looking forward to your reply. Thank you.


EM Eddy Mackonade April 21, 2021 02:40 AM UTC

Hi Manivel Sellamuthu,

The version of the packages are listed below:
  •      "@syncfusion/ej2-base": "^18.4.44",
  •     "@syncfusion/ej2-react-buttons": "^18.4.46",
  •     "@syncfusion/ej2-react-dropdowns": "^18.4.48",
  •     "@syncfusion/ej2-react-grids": "^18.4.47",
  •     "@syncfusion/ej2-react-inputs": "^18.4.47",
  •     "@syncfusion/ej2-react-lists": "^18.4.39",
  •     "@syncfusion/ej2-react-popups": "^18.4.44",
  •     "@syncfusion/ej2-react-progressbar": "^18.4.39",
  •     "@syncfusion/ej2-react-splitbuttons": "^18.4.41",

I have made a new discovery, allowEditing was missing in the editSettings which is why beginEdit wasnt emitting:

const editSettings: EditSettingsModel = { allowDeleting: true, allowEditing: true, mode: 'Normal' };


Now i get a different error:
grid.js:1621 Uncaught TypeError: Cannot read property 'getPanel' of null
    at GridComponent.Grid.getContent (grid.js:1621)
    at Edit.startEdit (edit.js:116)
    at Observer. (command-column.js:63)
    at Observer.notify (observer.js:102)
    at GridComponent.ComponentBase.trigger (component-base.js:209)
    at CommandColumn.commandClickHandler (command-column.js:56)
    at Observer.notify (observer.js:99)
    at GridComponent.Component.notify (component.js:249)
    at GridComponent.Grid.mouseClickHandler (grid.js:3601)


MS Manivel Sellamuthu Syncfusion Team April 21, 2021 10:57 AM UTC

Hi Eddy, 

Thanks for your update. 

From the share stack trace in the last update we could see that the edit operation is not getting stopped. So we suggest you  
to set the args.cancel as true in the commandClick event of the edit icon is clicked. Please refer the below code example for more information. 

 
commandClick (args) { 
if (args.commandColumn.type === 'Edit') { 
//set the args.cancel as true if edit icon is clicked 
       args.cancel = true; 
     } 
   } 
    render() { 
        return (<div className='control-pane'> 
        <div className='control-section'> 
          <GridComponent id='gridcomp' dataSource={data} ref={grid=>this.gridInstance=grid} commandClick={this.commandClick.bind(this)} 
 allowPaging={true} pageSettings={{ pageCount: 5 }} editSettings={this.editSettings}> 
            <ColumnsDirective> 

Please let us know if you need further assistance. 

Regards, 
Manivel 


EM Eddy Mackonade April 22, 2021 02:23 AM UTC

Hi Manivel,

Thank you for your swift response. After trying out your solution, now I get the error below:

normal-edit.js:23 Uncaught TypeError: Cannot read property 'id' of null
    at InlineEdit.NormalEdit.clickHandler (normal-edit.js:23)
    at Observer.notify (observer.js:99)
    at GridComponent.Component.notify (component.js:249)
    at GridComponent.Grid.mouseClickHandler (grid.js:3601)


Your help would be appreciated. Thank you.

EM Eddy Mackonade April 22, 2021 02:40 AM UTC

Hi Manivel,

I managed to solve the issue by removing the two solutions that you have provided:

actionBegin (args) { 
if (args.requestType == "beginEdit") { 
// here we are cancelling the default grid action 
  args.cancel = true 
}

commandClick (args) { 
if (args.commandColumn.type === 'Edit') { 
//set the args.cancel as true if edit icon is clicked 
       args.cancel = true; 
     } 
} 

And simply change the mode to Batch:

const editSettings: EditSettingsModel = { allowDeleting: true, mode: 'Batch' };


May you explain to me on why this resolve the issue? Thank you.




MS Manivel Sellamuthu Syncfusion Team April 22, 2021 12:13 PM UTC

Hi Eddy, 

Thanks for your update. 

We are happy that you have resolved the issue on your own by setting the edit mode as Batch. 

The reported script error in previous updates occurs when you move to the next while the Grid editing script is in execution. 

But while setting the edit mode as Batch the actionBegin event will not be triggered. Since batch editing allows us to edit one cell at a time , command columns are not fully compatible with the batch editing. 
So if you click the edit button in Batch mode the cell will be moved to edit state. 

If you are using the history.push inside the commandClick event the grid cell will not be in edited state, so there is no further script execution. So the issue is not occurred with the Batch edit mode. 

Please let us know if you need further assistance. 

Regards, 
Manivel 


PL Praveen Lobo January 3, 2025 03:52 AM UTC

Hi Team,


I have the same situation and I am getting the same error. I tried both the solutions but still get the same error.

Has there been any update for this issue?


Thanks


JC Joseph Christ Nithin Issack Syncfusion Team January 9, 2025 06:53 AM UTC

Hi Praveen,


Greetings from Syncfusion Support!


We understand that you are experiencing an issue when using the history.push method of React Router with the EJ2 Grid component.


To better understand the problem and provide you with a precise and effective solution, we kindly request you to share additional details regarding the issue. Specifically, the following information would greatly assist us in thoroughly analyzing and addressing your concern:


  1. Context of the Issue: Are you facing this issue while performing editing operations using the command button? If so, could you clarify whether your objective is to cancel editing and call the history.push method instead?
  2. Complete Grid Configuration: Please share the complete code snippet of the EJ2 Grid setup where this issue is observed. This will help us understand your implementation better.
  3. Syncfusion Package Version: Kindly specify the version of the Syncfusion packages you are currently using in your project.
  4. Issue Demonstration: If possible, please provide a screenshot, video, or any visual representation of the issue. This would help us grasp the problem more effectively.
  5. Sample for Reproduction: If feasible, we request you to share a sample project where the issue can be reproduced. Alternatively, you can try replicating the problem in a sample project provided by us.


The above details will enable us to better understand the context of the issue and offer a prompt and precise solution.

Regards,

Joseph I.


Loader.
Up arrow icon