dhtmlXMenuをdhtmlXTreeにうまく設定できない

こんにちは。beaglesoftの真鍋です。

このところDHTMLXに関するエントリーを続けています。とても素晴らしいライブラリなので皆さんも是非利用してみてください。

事象と対応方法について

今回はdhtmlXtreeについてです。dhtmlXTreeはツリービューを簡単に実現できるライブラリです。このdhtmlXTreeで構築したツリービューに右クリックでコンテキストメニューを表示することができます。

これはdhtmlXMenuのインスタンスをdhtmlXTreeのインスタンスに設定することで実現します。DHTMLXの素晴らしいところはこのコンポーネント指向な合わせ技が豊富なところですよね。

このコンテキストメニューですが、ドキュメント通り設定したのですが上手く動作しませんでした。いつものことなので、見落としがないかなどいろいろと設定をしてみたところ、以下の設定をおこなうと上手く動作しました。ただ、原因はつかみ切れていません。

1. dhtmlXmenuのインスタンスはloadStructメソッドによりXMLファイルなどを読み込む。
2. dhtmlXtreeのenableDragAndDropをtrueにすること。
3. dhtmlXtreeのonBeforeContextMenuイベントを作成して、trueを返却すること。

具体的には以下の以下のような感じで設定しています。ソースコードはTypeScriptです。

public initialize(plBsKubunValue:number):boolean {

    this.dhxTree.enableTreeImages(false);
    this.dhxTree.enableTreeLines(true);
    this.dhxTree.enableTextSigns(true);
    this.dhxTree.enableKeyboardNavigation(true);

    this.dhxTree.setImagePath(Constants.Dhtmlx.DHTMLX_IMAGE_PATH + "dhxtree_web/");
    this.dhxTree.load(Constants.KanjoKamoku.GRID_INIT_DATA + "?plBsKubunValue=" + plBsKubunValue,
                      function () {
                          console.log("dhxTree.load");
                      }, 'xml');

    // enableDragAndDropを有効にする
    this.dhxTree.enableDragAndDrop(true);

    this.dhxTree.attachEvent("onXLE", this.onXLE);
    this.dhxTree.attachEvent("onBeforeContextMenu", this.onBeforeContextMenu);

    ...

    return true;
}

private onXLE = () =>{
    
    var menu = new dhtmlXMenuObject(null);
    menu.renderAsContextMenu();
    menu.setOpenMode("web");
    menu.attachEvent("onClick", this.onContextItemClick);
    
    // loadStructを利用してロードする
    menu.loadStruct(Constants.KanjoKamoku.TREE_CONTEXT_CONFIG_XML); 

    ...
};

private onBeforeContextMenu = (itemId) => {
     // trueを返却する
    return true;
};

その他

また、他のオブジェクトで生成した（attachMenuにより生成）dhtmlXMenuインスタンスをdhtmlXTreeに設定した場合も上手くいきませんでした。できればメニューバーに設定したインスタンスを使い回したかったのですが、ちょっと難しかったです。こちらもできるのかできないのかも含めてまだわかっていません。

※赤い囲みを共通のdhtmlXMenuインスタンスとしたかったのです。