[BlackThunderParticipant]

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,
BlackThunder

[BlackThunderParticipant]

Hristo 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 version

2. 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 version

Regards,
BlackThunder

[BlackThunderParticipant]

Hi,

Add [auto-create]=”false” to jqxnavigationbar and in AfterViewInit createComponent.

Hope this helps

Regards,
BlackThunder

[BlackThunderParticipant]

Hi,

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 needed

let comp = this.myform.getComponentByName('state_dropdownlist');
comp.jqxDropDownList({"checkboxes": true});

Regards,
BlackThunder

[BlackThunderParticipant]

Hello 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,
BlackThunder

[BlackThunderParticipant]

Hi 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 servers

Please 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=sharing

Note: 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,
BlackThunder

[BlackThunderParticipant]

Hi 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”: true

build02: 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”: false

Download link for builds zip file

Command to bring up cli http-server: npx http-server –port 8080 .

Kindly advice.

Regards,
BlackThunder

[BlackThunderParticipant]

Hi 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 es2015

Important 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 issue

Kindly advice.

Regards,
BlackThunder

[BlackThunderParticipant]

Hi 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

[Author]

Posts