1. Feedback
  2. Vue
  3. 19810

Welcome to the Vue feedback portal. We’re happy you’re here! If you have feedback on how to improve the Vue, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Custom command column doesn't work with foreign column data loaded asynchronously

After loading foreign column data asynchronously and clicking the edit command on any row, the commandColumn argument in comandClick event is undefined. It's impossible to distinguish which command was clicked.

The following code reproduces the issue.




<template>
  <ejs-grid
    :dataSource="gridData"
    :commandClick="commandClick">
    <e-columns>
      <e-column field='Name' headerText='Name' width="120"></e-column>
      <e-column field='Surname' headerText='Surname' width="120"></e-column>
      <e-column field='RoleId' headerText='Role' width="120" 
        foreignKeyField="Id"
        foreignKeyValue="Name"
        :dataSource="rolesData"></e-column>
      <e-column width="120" :commands="commands"></e-column>
    </e-columns>
  </ejs-grid>
</template>

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/fabric.css';  
  @import '../node_modules/@syncfusion/ej2-buttons/styles/fabric.css';  
  @import '../node_modules/@syncfusion/ej2-calendars/styles/fabric.css';  
  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/fabric.css';  
  @import '../node_modules/@syncfusion/ej2-inputs/styles/fabric.css';  
  @import '../node_modules/@syncfusion/ej2-navigations/styles/fabric.css';
  @import '../node_modules/@syncfusion/ej2-popups/styles/fabric.css';
  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fabric.css';
  @import "../node_modules/@syncfusion/ej2-vue-grids/styles/fabric.css";
</style>

<script>
import Vue from "vue";
import { GridPlugin, CommandColumn, ForeignKey} from '@syncfusion/ej2-vue-grids';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      gridData: [
        { Name: "Mario", Surname: "Rossi", RoleId: 1},
        { Name: "Stefano", Surname: "Bianchi", RoleId: 2 }
      ],
      rolesData: [],
      commands: [
        {
          type: "Custom_Edit",
          title: "Edit",
          buttonOption: { cssClass: "e-flat", iconCss: "e-edit e-icons" }
        }
      ]
    }
  },
  methods: {
    commandClick(args) {
      console.log("Command column:");
      console.log(args.commandColumn); // args.commandColumn is undefined
    }
  },
  provide: {
    grid: [CommandColumn, ForeignKey]
  },
  created() {
    var that = this;
    // Async API call
    setTimeout(function() {
      that.rolesData = [
        { Id: 1, Name: "CEO" },
        { Id: 2, Name: "Developer"}
      ]
    }, 500);
  }
}
</script>