How to programmatically add a command column to data grid

Question

Question is all in the title

Shalini Maragathavel · Accepted Answer

Hi Justin,

Greetings from Syncfusion support.

Based on your query we suspect that you want to dynamically add the command column in the Grid . To achieve your requirement of add/remove the columns dynamically we suggest you to use the Grid’s inbuilt methods and call the refreshColumns() method for UI changes. Please refer the below code example for more information.

App.vue

<button v-on:click="AddColumn($event)">AddCommandColumn</button>

<button v-on:click="RemoveColumn($event)">RemoveCommandColumn</button>

</div>

<ejs-grid

ref="grid"

:dataSource="data"

:editSettings="editSettings"

height="310px"

>

<e-columns>

...

></e-column>

</e-columns>

</ejs-grid>

</div>

</template>

export default {

data() {

return {

data: data,

commands: [

{

type: "Edit",

buttonOption: { cssClass: "e-flat", iconCss: "e-edit e-icons" },

},

{

type: "Delete",

buttonOption: { cssClass: "e-flat", iconCss: "e-delete e-icons" },

},

{

type: "Save",

buttonOption: { cssClass: "e-flat", iconCss: "e-update e-icons" },

},

{

type: "Cancel",

buttonOption: {

cssClass: "e-flat",

iconCss: "e-cancel-icon e-icons",

},

methods: {

AddColumn: function (e) {

grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];

var obj = { headerText: "Commands", width: 120, commands: this.commands };

grid.columns.push(obj);

grid.refreshColumns();

},

RemoveColumn: function (e) {

grid.columns.pop();

grid.refreshColumns();

},

};

</script>

In the above code example we add/remove the command column using external button click.

Please refer the below sample for more information,

Sample: https://codesandbox.io/s/vue-template-forked-wkct1

Please refer the below documentation for more information,

Documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/#refreshcolumns

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

Regards,

Shalini M.

Justin Wells · Answer

Hey thanks for the response I've tried the provided code and it does add the column. Though it makes so I no longer get any data in my table. I did move it from a button to a databound function which may changes things.

here is how I currently have it

dataBoundSettings: function() {
  if (!this.gridBindingsSet) {
    this.gridBindingsSet = true;
    for (let colIndex = 0; colIndex < this.$refs.grid.ej2Instances.columns.length; colIndex++) {
      let orderField = this.getOrderFieldByName(this.$refs.grid.ej2Instances.columns[colIndex].field);
      if (orderField != null) {
        if (String(orderField.Name) === "Commands") {
          // let rawHtml = this.$refs.grid.ej2Instances.columns[colIndex].html();
          // manually inject :commands="'"commands"
          // this.$refs.grid.ej2Instances.columns[colIndex].setHTMLAttribute(":commands", "commands");
          // this.$refs.grid.ej2Instances.columns[colIndex].commands = template;
        }
        this.$refs.grid.ej2Instances.columns[colIndex].headerText = orderField.DisplayName;
        this.$refs.grid.ej2Instances.columns[colIndex].visible = orderField.Show;
        this.$refs.grid.ej2Instances.columns[colIndex].showInColumnChooser = true;
        switch (String(orderField.DataType).toLowerCase()) {
          case "date":
          case "datetime":
            this.$refs.grid.ej2Instances.columns[colIndex].format = { type: "dateTime", format: "MM/dd/yyyy hh:mm:ss a" };
            this.$refs.grid.ej2Instances.columns[colIndex].textAlign = "Right";
            break;
          case "decimal":
          case "numeric":
          case "currency":
            this.$refs.grid.ej2Instances.columns[colIndex].format = { type: "number", format: "C2" };
            this.$refs.grid.ej2Instances.columns[colIndex].textAlign = "Right";
            break;
          case "short":
          case "int":
          case "long":
            this.$refs.grid.ej2Instances.columns[colIndex].format = { type: "number" };
            this.$refs.grid.ej2Instances.columns[colIndex].textAlign = "Right";
            break;
          case "bool":
          case "boolean":
            this.$refs.grid.ej2Instances.columns[colIndex].format = { type: "boolean" };
            this.$refs.grid.ej2Instances.columns[colIndex].textAlign = "Right";
            this.$refs.grid.ej2Instances.columns[colIndex].displayAsCheckBox = "true";
            break;
          default:
            this.$refs.grid.ej2Instances.columns[colIndex].format = { type: "string" };
            this.$refs.grid.ej2Instances.columns[colIndex].textAlign = "Left";
            break;
        }
      }
    }

    let  grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];

    let obj = { headerText: "Commands", width: 120, commands: this.commands };

    grid.columns.push(obj);

    this.$refs.grid.ej2Instances.refreshColumns();
  }

Rajapandiyan Settu · Answer

Hi Justin, 
 
Thanks for your update. 
 
Query: Hey thanks for the response I've tried the provided code and it does add the column. Though it makes so I no longer get any data in my table. I did move it from a button to a databound function which may changes things. 
 
We can reproduce the reported behavior at our end and you can resolve this by using the following code example in the dataBound event. 
 




 
dataBound(args) { 
      grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
      if (isinitialLoad) { 
// assign the grid column settings in a variable 
        var columns = Object.assign([], grid.columns); 
// do your changes in that variable 
        for (let i = 0; i < columns.length; i++) { 
          if ( 
            columns[i]["field"] === "ShipRegion" || 
            columns[i]["field"] === "ShipAddress" || 
            columns[i]["field"] === "ShipName" 
          ) { 
            columns[i]["visible"] = false; 
          } else { 
            if ( 
              columns[i]["field"] === "OrderDate" || 
              columns[i]["field"] === "ShippedDate" 
            ) { 
              columns[i]["format"] = "yMd"; 
            } 
            if (columns[i]["field"] === "Freight") { 
              columns[i]["format"] = "C2"; 
            } 
            if (columns[i]["type"] === "number") { 
              columns[i]["textAlign"] = "Right"; 
            } 
          } 
        } 
        isinitialLoad = false; 
        var obj = { 
          headerText: "Commands", 
          width: 120, 
          commands: this.commands, 
        }; 
        columns.push(obj); 
 
// finally, bind the new column settings to the Grid’s columns instead of directly pushing in it 
        grid.columns = columns; 
      } 
    }, 
 
 
In the above code example, we assigned the column settings in a new variable and made the changes in that variable. Finally, we bind the changed settings directly to the Grid columns. 
 
Find the below sample for your reference. 
 
Sample: https://codesandbox.io/s/vue-template-forked-9zr2u?file=/src/App.vue  
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S

Justin Wells · Answer

That got it all working thanks!

Shalini Maragathavel · Answer

Hi Justin, 
Thanks for the update. 
We are happy to hear that your issue has been resolved. 
Please get back to us if you need further assistance. 
Regards, 
Shalini M.