Issue to load grid as a tabbed view about aurelia-slickgrid HOT 12 CLOSED

and I've already answered the first time here, SlickGrid needs a visible container for it to work, this is a problem when using Tabs

from aurelia-slickgrid.

{
"name": "test1",
"description": "An Aurelia client application.",
"version": "0.1.0",
"repository": {
"type": "???",
"url": "???"
},
"license": "MIT",
"dependencies": {
"@types/jquery": "^3.3.29",
"aurelia-animator-css": "^1.0.4",
"aurelia-bootstrapper": "^2.2.0",
"aurelia-fetch-client": "^1.8.2",
"aurelia-http-client": "^1.3.1",
"aurelia-polyfills": "^1.3.0",
"aurelia-slickgrid": "^2.9.2",
"bluebird": "^3.5.1",
"bootstrap": "^3.4.1",
"bootstrap-sass": "^3.4.1",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"jquery-ui-bundle": "^1.12.1-migrate",
"jquery-ui-dist": "^1.12.1",
"moment": "^2.24.0",
"moment-mini": "^2.22.1",
"popper": "^1.0.1",
"slickgrid": "^2.4.5",
"text-encoding-utf-8": "^1.0.2"
},
"peerDependencies": {},
"devDependencies": {
"clean-webpack-plugin": "^0.1.19",
"aurelia-cli": "^0.34.0",
"aurelia-testing": "^1.0.0-beta.4.0.0",
"aurelia-tools": "^2.0.0",
"gulp": "^4.0.0",
"minimatch": "^3.0.4",
"through2": "^2.0.3",
"vinyl-fs": "^3.0.2",
"aspnet-webpack": "^2.0.3",
"webpack-hot-middleware": "^2.21.2",
"ts-loader": "^4.0.1",
"ts-node": "^7.0.0",
"@types/node": "^9.4.7",
"@types/lodash": "^4.14.105",
"@types/webpack": "^4.1.1",
"typescript": "^2.7.2",
"jasmine-core": "^3.1.0",
"karma": "^2.0.0",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "latest",
"karma-jasmine": "^1.1.1",
"karma-mocha-reporter": "latest",
"karma-webpack": "^v4.0.0-beta.0",
"karma-coverage-istanbul-reporter": "^1.4.2",
"jest-jasmine2": "^23.0.0-alpha.0",
"jest-matchers": "^20.0.3",
"karma-typescript-preprocessor": "^0.3.1",
"@types/jasmine": "^2.8.6",
"aurelia-protractor-plugin": "^1.0.6",
"protractor": "^5.3.0",
"gulp-protractor": "^4.1.0",
"wait-on": "^2.1.0",
"sass-loader": "^6.0.7",
"node-sass": "^4.7.2",
"gulp-rename": "^1.2.2",
"html-webpack-plugin": "^3.0.6",
"copy-webpack-plugin": "^4.5.1",
"mini-css-extract-plugin": "^0.4.1",
"aurelia-webpack-plugin": "^3.0.0-rc.1",
"duplicate-package-checker-webpack-plugin": "^3.0.0",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.1.1",
"expose-loader": "^0.7.5",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"del": "^3.0.0",
"css-loader": "^0.28.11",
"nps": "^5.8.2",
"nps-utils": "^1.5.0",
"file-loader": "^1.1.11",
"json-loader": "^0.5.7",
"html-loader": "^0.5.5",
"istanbul-instrumenter-loader": "^3.0.0",
"opn": "^5.3.0",
"webpack-bundle-analyzer": "latest"
},
"engines": {
"node": ">= 6.0.0"
},
"scripts": {
"start": "nps",
"test": "nps test"
},
"main": "dist/app.bundle.js"
}

from aurelia-slickgrid.

That is my package.json file .

from aurelia-slickgrid.

Here I attached the entire test code. Please refer to it, Also, please restore all the dependencies from node. I'm using aurelia CLI and webpack as my default bundler. And VS code as my editor/IDE

from aurelia-slickgrid.

Probably caused by the fact that SlickGrid doesn't render correctly when it's container (<div>) is hidden. Basically the grid needs to have the container displayed (not hidden) in order to do it's multiple size calculations. You can see this issue in this SO

Usually when I deal with Tabs, there's 2 approach we can use

1. use a route per tab, which basically means use a component (ViewModel) per tab.
2. use an if.bind to only load and create the grid when the Tab becomes visible
   • you don't have to destroy the grid after changing tab, but on the first time the container really needs to be visible.

By the way, I created a new Repo to include all demos (WebPack Bootstrap 3 & 4, CLI RequireJS). You seem to be using Bootstrap 4 with Bootstrap 3 code in your example.

from aurelia-slickgrid.

I fixed this issue with help of some custom written CSS.
But I couldn't make out clear from your explanation of a probably reason. If you look at my screen recording gif I shared, you can see initially headers went inside of the div. but once I resize the window and maximize it again the UX has exact behavior we are expecting to see. I think there might be some issue/ bug in the framework itself, if fixed can address this issue.

from aurelia-slickgrid.

Yes, I initally downloaded your bootstrap 3 repo but when I tried to restore the node modules, I couldn't restore it. It was failing. So I created a new project and set up with all the dependecnies needed and made changes in the main.ts and added reqiured imports and then copied src folder to my project then it started to work.

this is what I see in terminal if I tried to restore npm dependencies

PS C:\Users\ayelishetti\Downloads\aurelia-slickgrid-demos-master\aurelia-slickgrid-demos-master\webpack-bs4-demo> npm install
npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: This version is no longer maintained. Please upgrade to the latest version.
npm ERR! code 1
npm ERR! Command failed: git checkout 4.0
npm ERR! error: pathspec '4.0' did not match any file(s) known to git.
npm ERR!

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ayelishetti\AppData\Roaming\npm-cache_logs\2019-04-05T00_04_01_213Z-debug.log

from aurelia-slickgrid.

Also, I needed to create a configure Jquery as shown below code in webpack.config.js file. Else we see Jquery not found issue in the browser console logs

new ProvidePlugin({
'Promise': 'bluebird',
'jQuery': 'jquery',
'$': 'jquery'
}),

from aurelia-slickgrid.

Is there anything new in the new Repo you created ? or just migrated the code to new various setups?

from aurelia-slickgrid.

There's nothing in my repos, I'm just cleaning up the main lib folder to keep only necessary.
jQuery always had to be configured in the webpack.config.js, that's why the demos exist, I'm not sure why you didn't have it since you seem to have copied the code from the demo. As for the zip, I'm sorry but I won't open it, that is not the way to pass data or video. If you want to show something, just do an animated gif. I don't have time to help you troubleshoot your code installation, again that is why all the demos exist and help you start a project.

from aurelia-slickgrid.

I already setup the project and I don't need help in setting up the project. I'm just mentioning the issues I faced when I downloaded your repo. That's not why I opened this issue. The issue I mentioned in the animated gif, I solved it, but would like to understand from your side why it is an issue when initially rendered as a tabbed view but when window is resized it renders everything correctly. Apologize for going out of the topic here.

from aurelia-slickgrid.

Thank you

from aurelia-slickgrid.