Home

Welcome to the vGrid wiki!

####Demo

---

How to use: (no plugin yet):

1: Copy the files under vgrid folder to you src folder, and move font to styles folder

2: Add this to main.js

.plugin("vGrid/plugin");

3: Add to the page.html page:

<v-grid
   style="position:relative;width:500px;height:500px"
   v-row-height="40"
   v-header-height="50"
   v-current-entity.bind=myCurrentEntity
   v-collection.bind=myCollection
   v-grid-context.bind=myGrid>
   <v-grid-col v-col-width="100" v-col-attribute="name" v-col-header="Name"></v-grid-col>
   <v-grid-col v-col-width="100" v-col-attribute="age" v-col-header="Age"></v-grid-col>
</v-grid>
      
<input disabled.bind="!myCurrentEntity.__vGridKey" value.bind="myCurrentEntity.name">
<input disabled.bind="!myCurrentEntity.__vGridKey" value.bind="myCurrentEntity.age">

3: Add to the page.js:

myCollection = [{name:person1, age:20},{name:person4, age:19},{name:person3, age:25}];
myCurrentEntity = {};   //current entity you link to inputs etc 
myGrid = {};            //this is where you access inner functions etc/or set param's by code

---

More information

• <v-grid>
• <v-grid-col>
• Dummydata for testing
• using with webpack

---

Icons used

Using som icons/classes from bootstrap:

Included used classes/icons, no need to install bootstrap for it to work, huge thanks to http://glyphicons.com/ for giving bootstrap those amazing icons