jQWidgets Forums
Forum Replies Created
-
Author
-
January 9, 2020 at 6:19 am in reply to: UI rendering issue with ng production build UI rendering issue with ng production build #107791
Hristo Hristov,
There was a typo in REPLY #107720:
Please read “2. When compileroptions target is es15 in tsconfig.json”
as
“2. When compileroptions target is es5 in tsconfig.json”
Sorry for the inconvenience caused.
Regards,
BlackThunderJanuary 1, 2020 at 5:09 am in reply to: UI rendering issue with ng production build UI rendering issue with ng production build #107720Hristo Hristov,
Thank you for the reply. Wish you and your team happy new year 2020.
Please find my observations. For practical purpose setting jqxmenu height to 100% is not suitable as in the fluid size example, i have removed it in the sample project.
1. When compileroptions target is es2015 in tsconfig.json
– Issue is not reproducing in Google Chrome latest version
– Issue is reproducing in Firefox latest version2. When compileroptions target is es15 in tsconfig.json
– Issue is reproducing in Google Chrome latest version (now it take more number of refreshes)
– Issue is reproducing in Firefox latest versionRegards,
BlackThunderDecember 20, 2019 at 8:23 am in reply to: jqxnavigationbar ngFor dynamically jqxnavigationbar ngFor dynamically #107641Hi,
Add [auto-create]=”false” to jqxnavigationbar and in AfterViewInit createComponent.
Hope this helps
Regards,
BlackThunderDecember 18, 2019 at 12:34 pm in reply to: checkboxes on jqxDropDownList in jqxForm checkboxes on jqxDropDownList in jqxForm #107606Hi,
I was watching this topic, because there is no documentation for jqxform under angular. Suggested solution is working, for that
– a name attribute need to be added to control definition in the template (say name: ‘state_dropdownlist’)
– following code will do the neededlet comp = this.myform.getComponentByName('state_dropdownlist'); comp.jqxDropDownList({"checkboxes": true});
Regards,
BlackThunderDecember 17, 2019 at 12:53 pm in reply to: Deletion of newly added row in jqxgrid Deletion of newly added row in jqxgrid #107594Hello shakti_singh,
rowid and rowindex of a row differs in some cases. It is better to get row id using rowindex and proceed with delete
e.g.
let rowscount = this.myGrid.getdatainformation().rowscount; let rowid = this.myGrid.getrowid(rowscount - 1); // assuming row is added to bottom, rowscount - 1 gives rowindex of last row this.myGrid.deleterow(rowid);
Hope this helps
Regards,
BlackThunderDecember 12, 2019 at 7:40 am in reply to: UI rendering issue with ng production build UI rendering issue with ng production build #107562Hi Hristo Hristov,
Followed your recommendations, here is the update
– Added following in styles.css
html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow: hidden; }
-Add following in app.component.html
<jqxMenu [theme]="'material'" #jqxMenu [width]="'100%'" [height]="'100%'"> <ul> <li><a href="#Home">Home</a></li> <li> Solutions <ul style='width: 250px;'> <li><a href="#Education">Education</a></li> <li><a href="#Financial">Financial services</a></li> <li><a href="#Government">Government</a></li> <li><a href="#Manufacturing">Manufacturing</a></li> <li type='separator'></li> <li> Software Solutions <ul style='width: 220px;'> <li><a href="#ConsumerPhoto">Consumer photo and video</a></li> <li><a href="#Mobile">Mobile</a></li> <li><a href="#RIA">Rich Internet applications</a></li> <li><a href="#TechnicalCommunication">Technical communication</a></li> <li><a href="#Training">Training and eLearning</a></li> <li><a href="#WebConferencing">Web conferencing</a></li> </ul> </li> <li><a href="#">All industries and solutions</a></li> </ul> </li> <li> Products <ul> <li><a href="#PCProducts">PC products</a></li> <li><a href="#MobileProducts">Mobile products</a></li> <li><a href="#AllProducts">All products</a></li> </ul> </li> <li> Support <ul style='width: 200px;'> <li><a href="#SupportHome">Support home</a></li> <li><a href="#CustomerService">Customer Service</a></li> <li><a href="#KB">Knowledge base</a></li> <li><a href="#Books">Books</a></li> <li><a href="#Training">Training and certification</a></li> <li><a href="#SupportPrograms">Support programs</a></li> <li><a href="#Forums">Forums</a></li> <li><a href="#Documentation">Documentation</a></li> <li><a href="#Updates">Updates</a></li> </ul> </li> <li> Communities <ul style='width: 200px;'> <li><a href="#Designers">Designers</a></li> <li><a href="#Developers">Developers</a></li> <li><a href="#Educators">Educators and students</a></li> <li><a href="#Partners">Partners</a></li> <li type='separator'></li> <li>By resource</li> </ul> </li> <li> Company <ul style='width: 180px;'> <li><a href="#About">About Us</a></li> <li><a href="#Press">Press</a></li> <li><a href="#Investor">Investor Relations</a></li> <li><a href="#CorporateAffairs">Corporate Affairs</a></li> <li><a href="#Careers">Careers</a></li> <li><a href="#Showcase">Showcase</a></li> <li><a href="#Events">Events</a></li> <li><a href="#ContactUs">Contact Us</a></li> <li><a href="#Become an affiliate">Become an affiliate</a></li> </ul> </li> </ul> </jqxMenu>
– built project using command
ng build --prod --base-href=/
– hosted in xampp, also tried with npx http-server
– Issue is still reproducing in both serversPlease find the build at build.zip link: https://drive.google.com/file/d/1GMhCoBWpF-3WmtiG4n0R8f9qaffYQ3to/view?usp=sharing
Screenshot of UI rendering issue
link: https://drive.google.com/file/d/18arNs1RFEo688vfs4A-HXZSauqXs1QxZ/view?usp=sharingNote: This issue cannot be reproduced in stackblitz environment. Need to be host in web server. This issue is reproducible with normal page refresh which loads css and js files from browser cache (which is most common end user browser settings, allows caching of css and js)
Regards,
BlackThunderDecember 6, 2019 at 7:48 am in reply to: UI rendering issue with ng production build UI rendering issue with ng production build #107520Hi Hristo Hristov,
The style used in app.component.html is based on Blog: fluid-layout-with-fixed-header-and-footer, our main app UI layout is similar to one described in blog post.
To keep issue reproduction simple, have used jqxmenu component in sample project.
Even after removing inline style of div element as suggested, issue is still reproducing.
I am sharing two builds for review, in both build issue is reproducible. For both builds base-href is ‘/’
build01: Regular build with default build parameters as below
“optimization”: true,
“outputHashing”: “all”,
“sourceMap”: false,
“extractCss”: true,
“namedChunks”: false,
“aot”: true,
“extractLicenses”: true,
“vendorChunk”: false,
“buildOptimizer”: truebuild02: Modified parameters to make to easy to go through manually
“optimization”: false,
“outputHashing”: “all”,
“sourceMap”: true,
“extractCss”: true,
“namedChunks”: false,
“aot”: false,
“extractLicenses”: true,
“vendorChunk”: false,
“buildOptimizer”: falseDownload link for builds zip file
Command to bring up cli http-server: npx http-server –port 8080 .
Kindly advice.
Regards,
BlackThunderDecember 5, 2019 at 7:40 am in reply to: UI rendering issue with ng production build UI rendering issue with ng production build #107503Hi Hristo Hristov,
Thank you for taking time and reviewing the video and sample project. Excuse me for not mentioning steps to build project i.e. npm install, ng build –prod
Following are the few observations
– “ng serve” will not reproduce the issue.
– “ng serve –prod” will reproduce the issue.
– “ng build” will not reproduce the issue.
– “ng build –prod” will reproduce the issue. For this we have to use any web server for hosting.
– Issue is reproducing in the following browser client environments (available with me for testing)
— Windows 7 64 bit: Google Chrome 78 (64 bit) and Firefox 71 (32 bit)
— Windows 10 Pro 64 bit: Google Chrome 78 (64 bit) and Firefox 71 (64 bit)
— Mac 10.12.6: Google Chrome 78 (64 bit)– Issue is reproducing even with jqwidgets-scripts/jqwidgets-ts when used instead of jqwidgets-ng.
– Issue is reproducing irrespective of OS used for building and hosting project, i.e. Windows 7 64 bit or Windows 10 Pro 64 bit or Mac 10.12.6 64 bit
– In “https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxmenu/defaultfunctionality.htm?light#CustomerService” issue is not reproducing
— Noticed: this is not angular project– In “https://www.jqwidgets.com/angular/angular-menu/angular-menu-defaultfunctionality.htm?material” issue is not reproducing
— Noticed: project target is es2015Important observations
– Issue is not reproducing when project target (file:tsconfig.json, key: compilerOptions.target) is “es2015”, it is reproducing only when project target is “es5”
— We can not use “es2015” as target for regular project as “Generating ES5 bundles for differential loading” never completes– Issue is not reproducing when project target is “es5” and built with following command “ng build –prod –extractCss=false”
Note for sample project:
– First page load will not reproduce the issue
– Second and subsequent page refresh (F5, normal reload) will reproduce the issue
– Hard reload will not reproduce the issueKindly advice.
Regards,
BlackThunderDecember 4, 2019 at 7:07 am in reply to: UI rendering issue with ng production build UI rendering issue with ng production build #107492Hi Hristo Hristov,
Thank you for your prompt reply. Issue is still reproducible after trying suggested build command and using XAMPP as web server.
For your reference I have included the following, kindly go through them
1. Link to video file
Link to mp4 video file
https://drive.google.com/file/d/1WCVX2W46R2uUpen26xwOWgu13MXjEiHo/view
2. Link to project source zip
Project Source zip
https://drive.google.com/file/d/1IPcZm_Akem8WKoIsb-8MHMeyX4hdB6g9/view?usp=sharing
For your information,
<strong>ng build</strong>
works as expected, where as<strong>ng build --base-href ./ --prod</strong>
has issues after page refresh.Regards,
BlackThunder -
AuthorPosts