1. Home
  2. Forum
  3. Vue
  4. Create columns GRID dynamic before load data Displayfields in API FETCH

Create columns GRID dynamic before load data Displayfields in API FETCH

I have a problem with create grid and columns dynamically before load data Displayfields in fetch API:

My code above: 



<template>
<div class="app-container">
<div id="Grid">
</div>
</div>
</template>

<script>
import { fetchListAPI,deletePackageAPI,fetchPropertiesAPI } from '@/api/core/package'
import Vue from "vue";
import { GridPlugin,Grid,Page,Sort,Filter,Group,Toolbar,Search,PdfExport,ExcelExport,CommandColumn } from "@syncfusion/ej2-vue-grids";


Vue.use(GridPlugin);


export default {
name: 'PackageList',
components: {
},
data() {
},
data: function() {
return {
selectedRow: 0,
list: "",
displayFields: "",
grid: ""

}
},
provide: {
grid: [Page,Sort,Filter,Group,Toolbar,Search,PdfExport,ExcelExport,CommandColumn]
},
created() {
this.getProperties()
this.getList()
},
mounted() {
this.createDataGrid()
},
methods: {
//dataBound: function() {
// this.$refs.grid.ej2Instances.columns[0].isPrimaryKey = true;
//},
select: function(rec) {
this.selectedRow = rec[this.pkey];
this.$emit("select", rec);
},
// Function Create and Populate Grid Dynamically
createDataGrid: function() {
Grid.Inject(Page,Sort,Filter,Group,Toolbar,Search,PdfExport,ExcelExport,CommandColumn);
this.grid = new Grid({
pageSettings: { pageSize: 50 },
allowEditing: true,
allowAdding: true,
allowDeleting: true,
toolbar: ["Add", "Edit", "Delete", "Search","PdfExport","ExcelExport","Print"],
selectionSettings: { persistSelection: true },
filterOptions: { type: 'Menu', type: 'CheckBox' },
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' } }]
});
this.grid.appendTo("#Grid");
this.grid.dataSource = this.list
//console.log(this.grid.dataSource)
this.grid.columns = this.displayFields;
//console.log(this.grid.columns)
this.grid.refreshColumns();
},
// Function Toolbar events Button
toolbarClick(args) {
if (args.item.id === 'Grid_pdfexport') { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
this.$refs.grid.pdfExport();
}
else if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
this.$refs.grid.excelExport();
}
else if (args.item.id === 'Grid_add') { // 'Grid_add' -> Grid component id + _ + toolbar item name
alert("Clicou botão ADD...");
}
else if (args.item.id === 'Grid_delete' ) { // 'Grid_delete' -> Grid component id + _ + toolbar item name
console.log(args.form.querySelector("uuid").value);
//handleDelete(args.form.querySelector("#Freight"))
}
else if (args.item.id === 'Grid_edit') { // 'Grid_edit' -> Grid component id + _ + toolbar item name
alert("Clicou botão EDIT...");
}
},
commandClick: function(args) {
console.log(args.id)
alert(JSON.stringify(args.rowData));
},
getList: function() {
fetchListAPI(this.listQuery).then(response => {
this.list = response.data.items
})
},
getProperties: function() {
fetchPropertiesAPI(this.listQuery).then(response => {
this.displayFields = response.data.listviews[0].columns
})
},
handleDelete(uuid) {
deleteTier(uuid).then(response => {
this.$notify({
title: 'Mensagem',
message: 'Registro deletado com sucesso',
type: 'success',
duration: 2000
})
this.getList()

}).catch(err => {
console.log(err)
})
}
}
}
</script>

<style scoped>
.edit-input {
padding-right: 100px;
}

.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}

</style>



1 Reply 1 reply marked as answer
BS Balaji Sekar Syncfusion Team April 5, 2021 09:31 AM UTC

Hi André, 
 
Greetings from the Syncfusion support. 
 
We checked your query with provided the information and you have bind the Grid’s dataSource and columns dynamically using created event but you do not declare that event in the Grid component. We have created a sample with your requirement as given below. 
 
[App.Vue] 
  created: function () { 
          this.grid.showSpinner(); 
          this.getList(); 
        }.bind(this), 
        toolbar: [ 
          "Add", 
          "Edit", 
          "Delete", 
          "Search", 
          "PdfExport", 
          "ExcelExport", 
          "Print", 
        ], 
        selectionSettings: { persistSelection: true }, 
        filterOptions: { type: "Menu", type: "CheckBox" }, 
        commands: [ 
          .     .     .     .  
          }, 
          { 
            type: "Cancel", 
            buttonOption: { 
              cssClass: "e-flat", 
              iconCss: "e-cancel-icon e-icons", 
            }, 
          }, 
        ], 
      }); 
      this.grid.appendTo("#Grid"); 
getList: function () { 
      var ajax = new Ajax({ 
        type: "GET", 
        mode: true, 
        onFailure: (e) => { 
          return false; 
        }, 
      }); 
      var BASE_URL =        "https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders"; 
      ajax.url = `${BASE_URL}?&$inlinecount=allpages&$format=json`; 
      ajax.send().then((response) => { 
        var data = JSON.parse(response); 
        this.list = data["d"]["results"]; 
        this.grid.dataSource = this.list; 
        var columns = [ 
          { field: "OrderID" }, 
          { field: "EmployeeID" }, 
          { field: "CustomerID" }, 
          { field: "Freight" }, 
          { field: "ShipAddress" }, 
          { field: "ShipCity" }, 
          { field: "ShipName" }, 
          { field: "ShipPostalCode" }, 
        ]; 
        this.grid.columns = columns; 
      }); 
    }, 
 
 
If still facing same problem, please share the below details to us that will help to validate further. 
  1. Replicate in above sample.
  2. Share video demonstration of the mentioned problem.
  3. Ensure Syncfusion package version.
 
Regards, 
Balaji Sekar 


Marked as answer
Loader.
Up arrow icon