Show column in edit dialog but not on grid

Question

Hi thereI have found heaps of questions about this but none of the solutions work. This code was taken from here https://ej2.syncfusion.com/javascript/documentation/grid/how-to/show-hide-columns-in-dialog-editing/ but it doesn't work. When you attempt to edit the row the CustomerID does not show.I am using the latest Syncfusion version.var grid = new ej.grids.Grid({
    dataSource: data,
    toolbar: ['Add', 'Edit', 'Delete'],
    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' },
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true },
        { field: 'CustomerID', headerText: 'Customer ID', width: 120, visible: false },
        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', width: 120, format: 'C2' },
        { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
    ],
    height: 265,
    actionBegin: function (args) {
        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
            for (var i = 0; i < this.columns.length; i++) {
                if (this.columns[i].field == "CustomerID") {
                    this.columns[i].visible = true;
                }
                else if (this.columns[i].field == "ShipCountry") {
                    this.columns[i].visible = false;
                }
            }
        }
    },
    actionComplete: function (args) {
        if (args.requestType === 'save') {
            for (var i = 0; i < this.columns.length; i++) {
                if (this.columns[i].field == "CustomerID") {
                    this.columns[i].visible = false;
                }
                else if (this.columns[i].field == "ShipCountry") {
                    this.columns[i].visible = true;
                }
            }
        }
    }
});
grid.appendTo('#Grid');

Pon Selva Jeganathan · Accepted Answer

Hi Paul,  
  
Most Welcome. 
  
Based on your sample, we suggest that you assign the visible property on grid column.  Please refer to the below code snippet, 
  
 




var myData = [ 
    { 
      CustomerID: 2, 
      child: [{ OrderID: 10, ShipCountry: "Bathurst" }], 
      OrderID: 3, 
      Freight: 21 
    } 
  ]; 
   
  var grid = new ej.treegrid.TreeGrid({ 
    dataSource: myData, 
….. 
     
    childMapping: "child", 
    columns: [ 
      …. 
      { 
        field: "CustomerID", 
        visible: false 
      }, 
……. 
    ], 
….. 
    actionBegin: function(args) { 
      if (args.requestType === "beginEdit" || args.requestType === "add") { 
        for (var i = 0; i < this.columns.length; i++) { 
          if (this.columns[i].field == "CustomerID") { 
            this.grid.columns[i].visible = true; 
          } else if (this.columns[i].field == "ShipCountry") { 
            this.grid.columns[i].visible = false; 
          } 
        } 
      } 
      if (args.requestType === "save") { 
        for (var i = 0; i < this.columns.length; i++) { 
          if (this.columns[i].field == "CustomerID") { 
            this.grid.columns[i].visible = false; 
          } else if (this.columns[i].field == "ShipCountry") { 
            this.grid.columns[i].visible = true; 
          } 
…….. 
  }); 
  
  
  
Please refer to the below sample: 
https://stackblitz.com/edit/u5vmgu-qj5jzx?file=index.js 
  
Please get back to us if you need further assistance.  
  
  
Regards,  
Pon selva.

Rajapandiyan Settu · Answer

Hi Paul, 
 
Greetings from Syncfusion support. 
 
We have validated the provided information and found that , In our documentation sample has some conflicts dynamically show the column in after save the record. So, we have logged the improvement task for this documentation issue and it will be refreshed online in any of our upcoming releases. 
 
You can dynamically show or hide the column while add/edit a Grid by using actionBegin event and it requestType.  Please find the code example for your reference. 
 





 
var grid = new ej.grids.Grid({ 
  dataSource: data, 
  toolbar: ["Add", "Edit", "Delete"], 
  editSettings: { 
    allowEditing: true, 
    allowAdding: true, 
    allowDeleting: true, 
    mode: "Dialog" 
  }, 
  columns: [ 
    { 
      field: "OrderID", 
      headerText: "Order ID", 
      textAlign: "Right", 
      width: 100, 
      isPrimaryKey: true 
    }, 
    { 
      field: "CustomerID", 
      headerText: "Customer ID", 
      width: 120, 
      visible: false 
    }, 
    { 
      field: "Freight", 
      headerText: "Freight", 
      textAlign: "Right", 
      editType: "numericedit", 
      width: 120, 
      format: "C2" 
    }, 
    { field: "ShipCountry", headerText: "Ship Country", width: 150 } 
  ], 
  height: 265, 
  actionBegin: function (args) { 
    if (args.requestType === "beginEdit" || args.requestType === "add") { 
// change the columns state 
      for (var i = 0; i < this.columns.length; i++) { 
        if (this.columns[i].field == "CustomerID") { 
          this.columns[i].visible = true; 
        } else if (this.columns[i].field == "ShipCountry") { 
          this.columns[i].visible = false; 
        } 
      } 
    } 
    if (args.requestType === "save") { 
// reset the columns state 
      for (var i = 0; i < this.columns.length; i++) { 
        if (this.columns[i].field == "CustomerID") { 
          this.columns[i].visible = false; 
        } else if (this.columns[i].field == "ShipCountry") { 
          this.columns[i].visible = true; 
        } 
      } 
    } 
  } 
}); 
grid.appendTo("#Grid"); 
 
  
 
In the above code example, we have used actionBegin event to change columns state dynamically while on editing.  
 
actionBegin: https://ej2.syncfusion.com/javascript/documentation/api/grid/#actionbegin  
 
In the actionBegin event with requestType of beginEdit and add, we change the particular column’s visibility. In the actionBegin event with requestType of save, we restore the columns state in the Grid. 
  
Find the below sample for your reference. 
 
Sample: https://stackblitz.com/edit/bd6c41-xxqxxm?file=index.js  
 
Still, if you face the same issue, please share the below details with us. 
 

Share the full Grid code you have used?
Share the package.json file.
Share the video demo and replication procedure of the reported problem.
Share the issue reproducible sample or make the issue in the give sample.
 
Regards, 
Rajapandiyan S

Paul Lovegrove · Answer

It appears it may be an issue with the TreeGRid component -

See my example - when you click on the Edit icon on the child row, it opens the dialog but Customer ID is NOT visible.

var myData = [{CustomerID: 2, child: [{OrderID:10, ShipCountry:"Bathurst"}], OrderID: 3, Freight: 21}]

var grid = new ej.treegrid.TreeGrid({
  dataSource: myData,
  allowGrouping: true,
  //toolbar: ["Add", "Edit", "Delete"],
  editSettings: {
    allowEditing: true,
    allowAdding: true,
  
    mode: "Dialog"
  },
  childMapping: 'child',
  columns: [
    {
      field: "OrderID",
      headerText: "Order ID",
      textAlign: "Right",
      width: 100
    },
    {
      field: "CustomerID",
      headerText: "Customer ID",
      width: 120,
      visible: false
    },
    {
      field: "Freight",
      headerText: "Freight",
      textAlign: "Right",
      editType: "numericedit",
      width: 120,
      format: "C2"
    },
    { field: "ShipCountry", headerText: "Ship Country", width: 150 },
     { field: 'Options', headerText: 'Options', width: '50', allowFiltering: false, commands: [{ type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } }] }

  ],
  height: 265,
  actionBegin: function(args) {
    if (args.requestType === "beginEdit" || args.requestType === "add") {
      for (var i = 0; i < this.columns.length; i++) {
        if (this.columns[i].field == "CustomerID") {
          this.columns[i].visible = true;
        } else if (this.columns[i].field == "ShipCountry") {
          this.columns[i].visible = false;
        }
      }
    }
    if (args.requestType === "save") {
      for (var i = 0; i < this.columns.length; i++) {
        if (this.columns[i].field == "CustomerID") {
          this.columns[i].visible = false;
        } else if (this.columns[i].field == "ShipCountry") {
          this.columns[i].visible = true;
        }
      }
    }
  }
});
grid.appendTo("#Grid");