1. Home
  2. Forum
  3. Vue
  4. Programmatically create grid from array or json data

Programmatically create grid from array or json data

I currently have an app where the end user select an Excel file and the code reads it using SheetJS and creates the headers and the data.  Is there and sample code available that can create a grid on the fly from an array?  The Excel sheet can be totally different each time so it is impossible to hard code the structure. 

Thanks 

9 Replies 1 reply marked as answer
RR Rajapandi Ravi Syncfusion Team August 25, 2020 01:53 PM UTC

Hi William, 

Greetings from syncfusion support 

Before we start providing solution on your query we need more information for our clarification, Please share the below details that will be helpful for us to provide better solution. 

1)   Please share the format of how you create the header and the data. 

2)   Share the example code array format of your data. 

Regards,
Rajapandi R 


WM William Morgenweck August 27, 2020 01:14 AM UTC

After a bit of thinking if I first convert the Excel into JSON that might be a bit easier to understand.  I've uploaded 2 different JSON files and I would like to see how I can create a grid that will display the data no matter which one is uploaded.  All data type can be converted to standard text and I'm not concerned with dates or integers.  It does not matter if the file is opened directly or from the server the data and structure will be the same.  My major concern is that I want to render the data in a grid but the structure will have to be centered by looping the data.

Thank you for your help 

Attachment: experience_351bfa6e.zip

RR Rajapandi Ravi Syncfusion Team August 27, 2020 01:37 PM UTC

Hi William, 

Thanks for the update 

We have analyzed your attached file data and we suspect you like to bind that data to the Grid. You can bind the data by using datasource property of Grid. For your reference we have prepared a sample and bind the Grid datasource by using the button click. Please refer the below code example and sample for more information. 


<template> 
  <div id="app"> 
    <Button type="button" @click="selectCell">BindData</Button> 
    <ejs-grid id="Grid" ref="grid" :dataSource="data" :allowPaging="true" :toolbar="toolbar"> 
      <e-columns> 
        <e-column field="degreeEntry" headerText="degreeEntry" width="90" isPrimaryKey="true"></e-column> 
        <e-column field="txtCity" headerText="txtCity" width="120"></e-column> 
        <e-column field="txtState" headerText="txtState" width="120"></e-column> 
      </e-columns> 
    </ejs-grid> 
 </div> 
</template> 

<script> 
import Vue from "vue"; 
import { GridPlugin, Edit, Page, Toolbar } from "@syncfusion/ej2-vue-grids"; 

Vue.use(GridPlugin); 

export default { 
  data() { 
    return { 
      data: [{ }], 
      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"] 
    }; 
  }, 
  methods: { 
    selectCell() {  //button click event 
      this.$refs.grid.dataSource = [{ "degreeEntry": "degree", "txtCity": "Berkeley", 
    "txtState": "CA" }, { "degreeEntry": "training", "txtCity": "Berkeley", 
    "txtState": "CA" }]; 
    } 
  }, 
  provide: { 
    grid: [Page, Edit, Toolbar] 
  } 
}; 
</script> 

<style> 
</style> 



If we misunderstood your query then please share a pictorial or video demonstration to understand your requirement better. 

Regards,
Rajapandi R 


WM William Morgenweck August 27, 2020 01:45 PM UTC

Thank you for your response and I do appreciate but my problem is where you put 

  <e-column field="degreeEntry" headerText="degreeEntry" width="90" isPrimaryKey="true"></e-column> 
        <e-column field="txtCity" headerText="txtCity" width="120"></e-column> 
        <e-column field="txtState" headerText="txtState" width="120"></e-column> 
      </e-columns> 

I have no idea what it's going to be until it is uploaded to the server.  It can be 100 or more different structured  JSON files.  Do i need to identify the columns?

RR Rajapandi Ravi Syncfusion Team August 28, 2020 11:37 AM UTC

Hi William, 

Thanks for the update 

Query#: Do i need to identify the columns? 

No you don’t need to define the columns, you can directly set your JSON data to the datasource property of the Grid. The columns are automatically generated when columns declaration is empty or undefined while initializing the grid. All the columns in the dataSource are bound as grid columns. Please refer the below code example, sample and documentation for more information. 

 
<template> 
  <div id="app"> 
    <Button type="button" @click="selectCell">BindData</Button> 
    <ejs-grid id="Grid" ref="grid" :dataSource="data" :allowPaging="true" :toolbar="toolbar"> 
    </ejs-grid> 
  </div> 
</template> 
 
<script> 
import Vue from "vue"; 
import { GridPlugin, Edit, Page, Toolbar } from "@syncfusion/ej2-vue-grids"; 
 
Vue.use(GridPlugin); 
 
export default { 
  data() { 
    return { 
      data: [{ }], 
      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"] 
    }; 
  }, 
  methods: { 
    selectCell() { //button click event 
      this.$refs.grid.dataSource = [ 
  { 
    "experienceFrom": "1995", 
    "experienceOrganization": "American+Psychological+Association", 
    "PositionTitle": "Member+", 
    "add-experience-modal-recid": "241" 
  }, 
  { 
    "experienceFrom": "Memberships", 
    "experienceOrganization": "Executive+Committee%2C+American+Society+of+Preventive+Oncology%3B+NCI+Cancer+Prevention+Scientific+Education+Committee%3B+Screening+%26+Prevention+Editorial+Board%2C+NCI+Physicians+Data+Query%3B+Executive+Board%2C+South+Carolina+Tobacco+Collaborative%3B+South+Carolina+Cancer+Control+Advisory+Committee%3B+South+Carolina+Cancer+Alliance+Coordinating+Council%3B+Institute+of+Medicine+Committee+on+the+Health+Implications+of+Raising+the+Minimum+Age+for+Purchasing+Tobacco+Products", 
    "PositionTitle": "", 
    "add-experience-modal-recid": "350" 
  }, 
  { 
    "experienceFrom": "2008", 
    "experienceOrganization": "American+Geriatrics+Society", 
    "PositionTitle": "Member", 
    "add-experience-modal-recid": "237" 
  } 
]; 
    } 
  }, 
  provide: { 
    grid: [Page, Edit, Toolbar] 
  } 
}; 
</script> 
 
<style> 
</style> 
 




Regards, 
Rajapandi R 


Marked as answer
FJ Florene J Anderson replied to Rajapandi Ravi June 29, 2021 07:58 PM UTC

Thank you so much! You helped me a lot too.


RR Rajapandi Ravi Syncfusion Team June 30, 2021 05:26 AM UTC

Hi Florene, 

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, 
Rajapandi R 


WM William Morgenweck November 23, 2022 12:52 AM UTC

Hi-- Is there a way to set the minimum column width from the automatically generated columns ? It seems that it is forced into the area that was originally created. It would be great if they were larger and had an automatic horizonal scroll. Is that possible?


Update:-- Got it working Added resize 


https://ej2.syncfusion.com/vue/documentation/grid/columns/auto-fit-columns/




RR Rajapandi Ravi Syncfusion Team November 29, 2022 01:32 PM UTC

Willaim,


If you are using auto generated columns, you can set column options such as format, width to the auto generated columns by using dataBound event of the grid. After setting the width in the columns you have call refreshColumn() method for UI changes. Please refer the below documentation for more information.


Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/auto-generated-columns/#set-column-options-to-auto-generated-columns


Loader.
Up arrow icon