Posted 7 November 2018, 7:14 pm EST - Updated 3 October 2022, 8:18 pm EST
Working with Flexgrid as Vue.JS Component
Hi,
I am evaluating Flexgrid (grid.5.20182.524) for my employer for inclusion in a new product.
I am attempting to set up flexgrid as a Vue2 (vue.2.5.17) component and I need to configure this grid dynamically as both row and column setup will change based on user actions.
Here is my code:
Vue.component("worklist-grid-panel",
{
data() {
return {
worklistRows: [
{
"entryId": "VSW-12a3e4-4220-23 00", "entryType": "Receipt",
"entryDate": "10/11/12", "entryStatus": "Received in", "entrySubclass" : "1906 Blazer", "entryStyle" : "Alpha"
}
],
columns: [],
}
},
created() {
this.columns.push({ binding: 'entryId', header: 'Worklist ID', type: 'String' });
this.columns.push({ header: ' ', type: 'String' });
this.columns.push({ binding: 'entryType', header: 'Type', type: 'String' });
this.columns.push({ binding: 'entryDate', header: 'Date', type: 'Date' });
this.columns.push({ binding: 'entryStatus', header: 'Status', type: 'String' });
this.columns.push({ binding: 'entrySubclass', header: 'Subclass', type: 'String' });
this.columns.push({ binding: 'entryStyle', header: 'Style', type: 'String' });
console.log("grid is created");
},
mounted() {
console.log("grid is mounted");
console.log(this.$el);
},
template:
`<wj-flex-grid auto-size-mode="Both"
:items-source="worklistRows" :auto-generate-columns="false" ref="myWL">
<wj-flex-grid-cell-template cell-type="TopLeft">X</wj-flex-grid-cell-template>
<wj-flex-grid-column :col="col" v-for="col in columns" width="*" :allow-sorting="true"
:binding="col.binding" :header="col.header" :type="col.type">
</wj-flex-grid-column>
</wj-flex-grid>`
});
The render of this grid is in the attached image.
First, is this a valid way to instantiate the grid?
Second,
The tasks I am attempting accomplish are:
- Change the row header cells to render checkboxes to select rows
- Change the topleft cell to be a checkbox to select ALL rows.
- Add a row to the left of the row header (or alternately, hide the default header row and make my own row header)
I want to do these things in a function in the Vue component. This component will be reused by other teams.
The problems I am having:
- I have not been able to modify the row header (the screenshot shows how wj-flex-grid-cell-template renders outside the grid).
- While I found a way to access the grid control using the vue ref attribute (this.$refs.myWL in the code above), I do not see a way to modify the header markup to use checkboxes.
While I found some jsfiddles that had wijmo, they were not up-to-date with wijmo’s latest vue library.
Can anyone help with this?
