Context menu - dynamically - simple way

edited August 2014 in Technical questions

Is there a simple way to define that datatable or tree uses context menu and load context menu dynamically?

I'd like to generate context menu only when context menu requested, and based on current context data. Something like:
http://webix.com/snippet/b28f38c8
I.e. define configuration of context menu together with loaded element (mytree) and load content upon request (right mouse click).

<ui>
    <contextmenu id="menu1" url="MenuGenerator.ashx?MenuID=123&ContexID=321" datatype="xml"/>
</ui>

Comments

  • Please check the next example

    http://webix.com/snippet/605244ae

    you can init and load the menu directly in onBeforeContextMenu handler

  • edited August 2014

    Things changed.
    Thanks.

  • edited August 2014

    Looks like with XML data "parse"-method for context menu has issues:
    http://webix.com/snippet/e98641d1
    The XML data is generated, but parser does not pick it up.

    Btw, repeated context calls (right-clicks) will double the menu options.
    Could not figure out how to clean list of options.

  • The sample will not work in the snippet editor, as it attempts to load data from different domain, that violates default security rules.

    As for double loading you can call clearAll - same as for any other data component.
    http://docs.webix.com/api__link__ui.menu_clearall.html

  • The sample will work if the browser is opened with disabled security.

    For example:

    ...\chrome.exe --disable-web-security

  • Can you show an example with XML data parser?

  • I see where made a mistake.
    Great, thank you.

  • How can I define the width of ContextMenu?
    In the example below the ContextMenu is too narrow, and menu items do not fit:
    http://webix.com/snippet/5d61b385

  • Also, is there a way to extend ContextMenu properties of Grid, Tree and Treegrid controls?
    I'd like to:

    1. define an attribute (ex. contextMenuUrl) that accepts url to context menu generation page.

    2. define an attribute (ex. contextMenuFormat) where I can define menu format (xml, json)

    3. load data from contextMenuUrl once. Currently every time I call context menu, the app sends request to web-server.

    4. show context menu by right-mouse click w/o defining event handler onBeforeContextMenu.

    For example, I successfully use extended properties of "Text" element:

        webix.protoUI({
            name:"sctext", 
            defaults:{ attributes:{} },
            $cssName:"text",
            //custom attribute
            maxLength_setter:function(value){
                this.config.attributes.maxlength = value;
            }
        }, webix.ui.text);
    

    Something similar would be great to have for datatable context menu.

  • As for width - all common webix sizing properties works fro Context Menu
    http://webix.com/snippet/5306fe75

  • As for customization - yes, you can create a custom control based on datatable with automatic context menu generation, something like next

    http://webix.com/snippet/5dce3a7b

  • Great. Thank you.

  • Based on your example I created a protoUI of datatable that contains simplified support of context menu. (http://webix.com/snippet/1aeb8944)

    More questions arisen.

    Is it possible to:

    1. Initialize Context menu configuration via XML? Current example uses hard-coded init?
    2. Set width automatically, based on width of popup menu content?
    3. Retrieve column value by Column Index, instead of Column Name (list.getItem(listId).title)?
    4. From Context menu "onItemClick" event handler send an event to parent control (datatable in this case), where the context menus is attached to?
    5. add scrollbar to context menu when it's needed? In example below the menu does not fit the screen. (http://webix.com/snippet/ca38fda5)
    6. Select (highlight) row, where where context menu was poped-up. Currently when I call "this.select(id)" method, the row gets highlighted, but the rest of context menu processing stops working. (http://webix.com/snippet/01a89bc6)
  • (1) Yes, you can use webix.markup.parse to convert XML to js and use it in the webix.ui command.

    (2) Not possible

    (3) You can use columnId command that will convert index to id
    http://docs.webix.com/api__link__ui.treetable_columnid.html

    (4) You can get the master component, like this.getContext().obj and can call any events, by using callEvent API

    (5) Can be done, by using the next settings for the menu

    yCount:2, autoheight:false, scroll:true,
    

    http://webix.com/snippet/ceb8d15b

    (6) wrap the select command in webix.delay

    webix.delay(function(){
         this.select(id);
    }, this);
    
  • edited August 2014

    Thank you for answers.

    Regarding #1, can you share an example?
    Specifically, settings of Context Menu Properies. Sometimes JSON to XML translation is not clear, esp. with nested objects.

    Regarding #5, I tried to play with different options.
    Permanent scrollbar is annoying when = 5. Not needed, but still there.
    yCount has a bug when it's > 5. (http://webix.com/snippet/89891502).
    I'll keep looking for a nicer solution.

  • Issue with yCount confirmed, will be fixed in Webix 1.11
    Currently if scroll is enabled it is always visible - we plan to add more flexible solution in Webix 2.0

  • As for example, it will be something like this
    http://webix.com/snippet/96347ff7

    You can add extra properties or sub-tags to submenuconfig - they all will be used for submenu configuration.

  • edited August 2014

    Thank you.

    Tried http://webix.com/snippet/96347ff7,
    getting an error: "Uncaught ReferenceError:
    sumbmenu is not defined".

    Also, quesiton:

    Can Menu Configuration be a part of XML data, returned by "ContextMenuGenerator.ashx" ?
    My intention is to have Context Menu Configuration and Data within single XML response.

  • Hi,

    is it possible to make snippet available, most of then does not work, error I get:

    Cannot find module './view'.
    
    Check console for more details
    
    t is null
    
    Check console for more details
    

    Regards

  • Unfortunately, some really old snippets were lost during migration.
    Which functionality are you insterested in?

  • edited July 2019

    i'm interested in the topic : how dynamically build menu entries - i do not find clear answer

  • edited September 2019

    I'm also interested in a working example on how to build a dynamic context menu for the Datatable. Almost all snippets from the thread are broken, except one, which I'm not going to link to, because it's very hacky, modifying _private properties.

    Is there a clean way to change the items of the context menu based on the data in the clicked row, for example setting a menu item text to "Show" vs "Hide" based on the state of a checkbox?

  • edited September 2019

    @dandv
    check this
    https://snippet.webix.com/452nbnai
    basic logic is shown there.

  • Thank you for that comprehensive solution (header menu, row menu, empty area menu)!

    Any idea why the menu doesn't have an anchor, while this other approach does?

    Webix Datatable context menu

    The other approach is the hacky solution I was referring to, and it has the bug of not clearing the menu before it's created again (2+ consecutive right clicks). But it does have that highlighted anchor.

  • @dandv
    looks like it is material/mini skin design.
    as in other skins (your sample has flat skin) and in pre-6 versions anchor is shown by default.
    in material/mini skin you can force it explicitly by setting point:true in contextmenu config.

Sign In or Register to comment.