Log in to start a topic

Context menu option's styling properties are being overwritten in live environ

Posted by: sundaydavid on 11 November 2019, 5:48 am EST

  • sundaydavid

    Posted 11 November 2019, 5:48 am EST

    Hi team,

    Is there a way to customize context menu stylings. On right click, the styles for the context menu is not displaying properly. Its background is transparent.

    Thanks.

  • sundaydavid

    Posted 12 November 2019, 1:40 am EST

    Please, I’m still having this issue… the context menu background is transparent in production, and the icons for the paste options is not showing up.

  • sundaydavid

    Posted 12 November 2019, 2:48 am EST

    Hi there,

    I just realized that i production, the css classes have Nan compared to my local instance. Is there any other thing that I need to do for prod? see below:

    Copy
    Cut
    Paste Options:
    All
    <div class="NaNmenuitem-content gc-ui-contextmenu-executable

  • sharad.tomer

    Posted 12 November 2019, 5:22 pm EST

    Hi,

    Is there any other thing that I need to do for prod?

    Instead of adding the License key, you do not need to change anything else to deploy the SpreadJS application on the deployment server.

    the css classes have Nan compared to my local instance

    Please make sure that all of the spread script files are added correctly. If the issue persists please share a small sample replicating the issue so that we could further investigate it.

    Regards

    Sharad

  • sundaydavid

    Posted 13 November 2019, 3:48 am EST

    Hi Sharad,

    I have this script included:

    “node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js” in the angular.json file.

    Do need any other script?

    Thanks!

  • sharad.tomer

    Posted 13 November 2019, 4:14 pm EST

    Hi,

    For angular application, you don’t need to add the scripts in angular.json file, you may direct import them in your application using the import keyword like:

    import { SpreadSheetsModule } from "@grapecity/spread-sheets-angular";
@NgModule({
  imports:      [ BrowserModule, SpreadSheetsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

    It seems that you are experiencing some other issue, please share a small sample replicating the issue so that we could further investigate it and assist you accordingly.

    Regards

  • sundaydavid

    Posted 14 November 2019, 4:27 am EST

    Hi,

    “import { SpreadSheetsModule } from “@grapecity/spread-sheets-angular”;” doesn’t work for prod as solved by:

    https://www.grapecity.com/forums/spread-sheets/angular-error-on-build-ple#helloyou-can-copy-the-angu_1

  • sharad.tomer

    Posted 14 November 2019, 4:24 pm EST

    In this case, you may import the SpreadSheetsModule from the copied file file:

    import { SpreadSheetsModule } from "../component/spread-sheets-angular/gc.spread.sheets.angular";
@NgModule({
  imports:      [ BrowserModule, SpreadSheetsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

    Also as requested previously, could you please share a small sample replicating the issue so that we could investigate the root cause of the issue and assist you accordingly

  • sundaydavid

    Posted 15 November 2019, 1:21 am EST

    Hi Sharad,

    I imported the SpreadSheetModule as in the above. I dont know what I can share as it’s working fine on my local instance. The only modification that I have on the context menu is:

    this.spread.contextMenu.menuData = this.spread.contextMenu.menuData.filter(

    i =>

    !(

    i.text === ‘Insert’ ||

    i.text === ‘Insert Comment’ ||

    i.text === ‘Clear Contents’ ||

    i.text === ‘Sort’ ||

    i.text === ‘Hide’ ||

    i.text === ‘Unhide’ ||

    i.text === ‘Filter’

    )

    );

    Other than that, it’s just a normal rendering. My observation is that if we’re unable to import SpreadSheetsModule from @grapecity* how then will the css and the js be imported into the app? The documentation says css and js files are required, so how should these files be imported in an angular app?

  • sharad.tomer

    Posted 17 November 2019, 4:38 pm EST

    Hi,

    We are able to replicate the issue at our end. The issue arises only if we build the application using angular CLI and --prod flag. We have escalated it to the dev team for further investigation of the issue, the internal tracking Id for the issue is SJS-2598 and we will let you know about any updates regarding the issue.

    Till the issue is fixed you may work around it by turning off the build optimizer. In angular.json file set “projects.architect.build.configuration.production.buildOptimizer = false”.

    Regards

    Sharad

  • sharad.tomer

    Posted 18 November 2019, 8:17 pm EST

    Hi,

    DevTeam has confirmed that the issue is a bug in the Angular Build Optimizer, so the only possible solution is to turn off the buildOptimizer by setting the buildOptimizer option to false in angular.json file.

    Regards

    Sharad

  • sundaydavid

    Posted 19 November 2019, 2:39 am EST

    Thanks Sharad. We tried to turn off the buildOptimizer but it disrupted our config. However, we’ve hard coded the background color to make the options usable but the UX isn’t satisfactory. Regards.

  • sharad.tomer

    Posted 19 November 2019, 7:45 pm EST

    If I understand correctly you do not want to turn off the buildOptimizer and added the custom background color to the context menu which results in an unsatisfactory UI.

    In this case, instead of applying the background color what you could do is copy all the context-menu related styles from the spread CSS file into your main styles.css and replicate “.gc-ui-contextmenu-” from the style rule with “.NaN” and then the default styles should be applied on the context menu. All the context menu related styles in spread style file are enclosed by the comments “contextmenu start” and “contextmenu end”.

    Although, the above works, we would still recommend you to turn off the buildOptimizer because there could also be some other unknown issue arising due to the build optimized.

  • sundaydavid

    Posted 20 November 2019, 3:34 am EST

    Thanks for the update. We’ll try this in the next release.

    Regards!

  • sharad.tomer

    Posted 1 March 2020, 3:56 pm EST

    Hi,

    In the latest build 13.0.6, the dev team has updated the code to avoid the angular compiler bug. Please update to the latest build and let us know if the issue persists.

    Regards

  • vmakohon

    Posted 19 March 2020, 11:31 pm EST

    Hello, I have a similar issue related to buildOptimizer option. (13.0.7)

    After building in production mode, scrolling by mouse wheel becomes unwork in spreadjs also formulas can’t be sees after selecting the cell with the formula.

    Disabling of buildOptimizer option in angular.json fix the problem, but we can’t do that because it leads to a bigger bundle.

  • sharad.tomer

    Posted 22 March 2020, 6:37 pm EST

    Hi Vitaliy,

    We are able to replicate the issue at our end and hence we have forwarded it to the dev team for further investigation. The internal tracking ID for the issue is SJS-3928. We will let you know about any updates regarding the same.

    Regards

    Sharad

  • vmakohon

    Posted 24 March 2020, 6:56 am EST

    Reproduction

    https://github.com/Domainv/spreadjs-scroll-bug-repro

    npm run start:prod

    localhost:4200

    vertical scroll becomes unworkable

  • sharad.tomer

    Posted 24 March 2020, 3:30 pm EST

    Thank you for sharing the sample.

  • sharad.tomer

    Posted 23 April 2020, 6:50 pm EST

    Hi,

    Build 13.1.0 which includes the fix for this issue(SJS-3928) is now available. You may get the latest build from npm or download using the following link:

    http://cdn.grapecity.com/spreadjs/13.1.0/Files/SpreadJS.Release.13.1.0.zip

    Please update to the latest version and let us know if the issue persists for you.

    Regards

  • vmakohon

    Posted 28 April 2020, 9:14 am EST

    Yes, it works thank you)

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.