How to hide some column while adding a record in React Grid

Question

Hi,I want to hide and later re-enable specific columns, when I'm adding a new record. However, after having saved the new record, re-visualizing the columns crashes the layout of the grid.BEFORE:AFTER HAVING ADDED A NEW "TEST" RECORD:I've attached a little demo. Just add a new record and afterwards the layout of the grid is not anymore as before...Attachment: index2_e2a18489.zip

Balaji Sekar · Accepted Answer

Hi Laurin, 
 
Thanks for the contacting syncfusion support. 
We checked your code example and found that you are showing the hided column in the actionComplete event of Grid which is the cause of the issue. To overcome the reported issue we suggest you to show the hided columns in the actionBegin event of Grid demonstrated in the below code snippet,  
 
 




 
actionBegin(args) { 
    
 
    if (args.requestType === "add") { 
      const cols = this.gridInstance.columns; 
      for (const col of cols) { 
        if (col.field === "CustomerName") { 
          col.visible = false; 
        } 
      } 
    } 
    if (args.requestType === "save") { 
      const cols = this.gridInstance.columns; 
      for (const col of cols) { 
        if (col.field === "CustomerName") { 
          col.visible = true; 
        } 
      } 
    } 
  } 
 
 
We have prepared a sample based on this for your reference. You can find it below, 
Sample : https://stackblitz.com/edit/react-upoczb-geizzv?file=index.js 
We have created an improvement task for the documentation and it will be refreshed in online ASAP. 
Please get back to us if you need further assistance with this. 
 
Regards, 
Balaji S.