Posted 24 April 2023, 9:54 am EST - Updated 24 April 2023, 10:05 am EST
Hi at all,
I’m relativ new in vue.js and I’m trying to get felxgrid working in my app based on a sample I found online.
I have an asp.net mvc application, in which I wan’t to render some wijmo components.
I was able to run a basic vue sample code in my sample.vue but can’t get the grid working.
From what I see the wijmo markup doesn’t get translatet to html markup language.
The normal html dom elements like a paragraph are getting renderd, but the wijmo elements like “<wj-flex-grid” are not.
From what i found online, a vue runtimeCompiler is needed if I use custom markup elements, is this true? ( I couldn’t find anything helpful here)
How to I get the flex grid to render?
PS: I can break in the getData function, so the skript itself is runing, from what it looks like, just the correct dom doenst get created.
My package.json looks like this
{
"name": "my-webpack-project",
"version": "1.0.0",
"scripts": {
"dev": "webpack serve --mode=development --node-env=development",
"build": "webpack --mode=production --node-env=production",
"build:dev": "webpack --mode=development",
"build:prod": "webpack --mode=production --node-env=production",
"watch": "webpack --watch",
"serve": "webpack serve"
},
"dependencies": {
"bootstrap": "5.2.3",
"axios": "^1.3.4",
"core-js": "^3.8.3",
"vue": "^3.2.13",
"@grapecity/wijmo.vue2.all": "5.20231.879-rc",
"jszip": "3.1.3"
},
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/eslint-parser": "^7.12.16",
"@babel/preset-env": "^7.21.4",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/compiler-sfc": "3.2.13",
"@webpack-cli/generators": "^3.0.1",
"babel-loader": "^9.1.2",
"cross-env": "^1.0.6",
"css-loader": "^6.7.3",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"style-loader": "^3.3.2",
"webpack": "^5.78.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.13.3",
"vue-loader": "17.0.1"
},
"description": "My webpack project"
}The sample.vue:
<template>
<div>
<h3>
FlexGrid Control
</h3>
<p>
This section shows FlexGrid control with column definitions.
</p>
<div class="seperator" />
<wj-group-panel :grid="flex"
placeholder="Drag columns here to create Groups"
:max-groups="4" />
<wj-flex-grid :initialized="gridInitialized"
:items-source="itemsSource"
:selection-changed="selectionChanged">
<wj-flex-grid-filter />
<!--<wj-flex-grid-detail :isAnimated=true v-slot="ctx">
<b>Details:</b>
<ul>
<li>ID: <b>{{ctx.item.id}}</b></li>
<li>Country: <b>{{ctx.item.country}}</b></li>
<li>Downloads: <b>{{ctx.item.downloads}}</b></li>
<li>Sales: <b>{{ctx.item.sales}}</b></li>
</ul>
</wj-flex-grid-detail>-->
<wj-flex-grid-column binding="id" header="ID" />
<wj-flex-grid-column binding="country" header="Country">
<!--<wj-flex-grid-cell-template cellType="Cell" v-slot="cell">
<span :class="'flag-icon flag-icon-' + cell.item.country.toLowerCase()"></span>
{{cell.item.country}}
</wj-flex-grid-cell-template>-->
</wj-flex-grid-column>
<wj-flex-grid-column binding="downloads" header="Downloads" />
<wj-flex-grid-column binding="sales" header="Sales" />
</wj-flex-grid>
</div>
</template>
<script>
import * as wjcCore from '@grapecity/wijmo';
export default {
data: function () {
var data = this.getData();
return {
flex: null,
itemsSource: data,
selectedItem: data[0]
}
},
methods: {
gridInitialized: function (s) {
this.flex = s;
},
selectionChanged: function (s) {
this.selectedItem = s.selectedItems[0];
},
wjFormat: function (value, format) {
return wjcCore.Globalize.format(value, format);
},
getData: function () {
// create some random data
let countries = "US,Germany,UK,Japan,Italy,Greece".split(","),
data = [];
for (let i = 0; i < 200; i++) {
data.push({
id: i,
country: countries[i % countries.length],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
return new wjcCore.CollectionView(data);
}
},
};
</script>an the loading of the component:
import { createApp } from 'vue'
import App from './sample.vue'
createApp(App).mount('#test');the webpack config:
const path = require("path");
const fs = require('fs')
const appBasePath = './wwwroot/Scripts/app/'
const isProduction = process.env.NODE_ENV == "production";
const stylesHandler = "style-loader";
const resolvePath = (...args) => path.resolve(path.join(__dirname, ...args));
const { VueLoaderPlugin } = require('vue-loader')
const jsEntries = {}
// We search for index.js files inside basePath folder and make those as entries
fs.readdirSync(appBasePath).forEach(function (name) {
var indexFile = appBasePath + name + '/index.js'
if (fs.existsSync(indexFile)) {
jsEntries[name] = indexFile
}
})
const config = {
entry: jsEntries,
output: {
path: path.resolve(__dirname, './wwwroot/Scripts/bundle/'),
publicPath: 'wwwroot/Scripts/bundle/',
filename: '[name].js'
},
resolve: {
alias: {
'@': resolvePath('frontend'),
'vue$': 'vue/dist/vue.esm-bundler.js',
},
extensions: [
'.js',
'.json',
'.vue',
],
},
devServer: {
open: true,
host: "localhost",
proxy: {
'*': {
target: 'https://localhost:7211',
changeOrigin: true,
secure: false
}
}
},
plugins: [
// Add your plugins here
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
}
}
},
{
test: /\.(js|jsx)$/i,
loader: "babel-loader",
},
{
test: /\.css$/i,
use: [stylesHandler, "css-loader"],
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: "asset",
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
plugins: [
// make sure to include the plugin!
new VueLoaderPlugin()
]
};
module.exports = () => {
if (isProduction) {
config.mode = "production";
} else {
config.mode = "development";
}
return config;
};
