Flexgrid inheritance and dynamical contextMenu adding

Posted by: chifret on 30 October 2017, 6:18 am EST

    • Post Options:
    • Link

    Posted 30 October 2017, 6:18 am EST

    Title says it all :slight_smile:

    Based on that article :

    https://www.grapecity.com/en/blogs/wijmo-2017-v1-landed

    I’m now implementing my own inherited FlexGrid class, which allows great things and a lot of ease in development, thanks for that.

    However, I’m stuck with the context menu.

    Currently, I’m already adding one to my grids dynamically with a factory resolver. But it still needed to be set as a directive in the grid

    <wj-flex-grid [wjContextMenu]="contextMenu" .... </wj-flex-grid>
    

    That’s not that pretty though.

    But now, the context menu will be into the custom grid class, so i’ll have to do something like :

    <custom-grid #grid [wjContextMenu]="grid.contextMenu" .... </custom-grid>
    

    Which is even less pretty, and in opposition to my wish of delegating that job to the customized grid itself, but which actually DO works.

    So, I’m more of looking for a A plan instead of that B plan to deal with it.

    Sadly, angular has difficulties adding dynamical directives, as shown here :

    https://github.com/angular/angular/issues/8785

    So I didn’t succeed yet doing stuff like :

    @HostBinding('attr.wjContextMenu') contextMenu:WjMenu = this.contextMenu;
    
    ngOnInit(): void {
        this.contextMenu.ngOnInit();
    }
    
    ngAfterViewInit() and so on...
    

    Would be awesome if you guys had better idea than me.

    Is there no way to affect that context menu to a component that a directive ?

    Thanks in advance for your help en highlightment.

  • Posted 31 October 2017, 6:12 am EST

    HI,

    As we understand, you would like to show context menu for the custom FlexGrid you created. If yes, you need to add Menu in Component and set its reference to custom grid’s wjContextMenu attribute.

    Please refer to the plunker for the same.

    http://plnkr.co/edit/w3yinXAfaBJhvJ7ULLEL?p=preview

    ~Manish

  • Posted 16 November 2017, 9:01 am EST

    Sorry for the late response.

    I’ve no issue showing it the way you say.

    but for the reason I explained, I try to attach it automatically by a thier-part process. And for the reason the wjContextMenu is a directive (at least I think it’s the reason), I just don’t succeed at it.

    So if I could find only one way to get the contextMenu showing without having to use that directive, I would find a way to accomplish the goal :slight_smile:

    Thanks again for your time, and sorry if my explanations are not clear enough.

  • Posted 20 November 2017, 3:21 am EST

    Hi,

    You may use contextmenu event for the same and show the Menu as context, please refer to the following code snippet:

     fileMenuOptions:["New","Open","Close"];
     addContextMenu: function(){
            var _ctxMenu = new wjInput.Menu(document.createElement("div"), {
                itemsSource: this.fileMenuOptions,
                itemClicked: function (s, e) {
                    alert(" *******  You  have selected " + s.text + "**********");
                }
            });        
            return _ctxMenu;
        },
        onInitialized: function (s,e) {
            var _ctxMenu = this.addContextMenu(); 
            s.hostElement.addEventListener("contextmenu",  (args)=> {
                args.preventDefault();            
                _ctxMenu.owner = wijmo.closest(args.target,"#grid");
                _ctxMenu.show(args);
            },true);
        }
    

    Hope it helps!

    ~Manish

Need extra support?

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

Learn More

Forum Channels