Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
70
Adding a context menu to the tabs
posted

Just thought that I'd share a solution with everyone.

 

I have a requirement to be able to trap the oncontextmenu event of the tab headers.  As there doesn't seem to be any intrinsic way of handling this I came up with the following solution:

1. On the client-side, after the tab object has been instantiated: iterate each Tab object instance and add a oncontextmenu event handler to the element of each tab:

 

/// <summary>
/// Adds a context menu handler to each of the individual tab header elements for a tab control.  The handler
/// should conform to the following method signature: handler(tabKey).
/// <summary>
/// <author>Kevin White</author>
/// <date>01/06/2011</date>
/// <example>igtab_initialiseContextMenuHandlers('tabClientID', 'displayMenu(tabKey);');</example>
function igtab_initialiseContextMenuHandlers(tabsClientId, handler) {
    var tabs = igtab_getTabById(tabsClientId);

    if (tabs !== null) {
        Array.forEach               // Requires the Microsoft AJAX framework but otherwise just change to a conventional loop
            (
                tabs.Tabs
                , function(tab, tabIndex, allTabs) {
                    // Add an 'oncontextmenu' handler to each of the tab headers by attaching a function handler to the element (which is a TD element)
                    tab.element.oncontextmenu = function() { new Function("tabKey", handler)(tab.Key); return false; };
                }
                , null
            );
    }
}

 

2. Add a call to igtab_initialiseContextMenuHandlers from the server-side (I plan to derive my own class to do this):

            string ss = "Sys.Application.add_load(function() { igtab_initialiseContextMenuHandlers('" + TopicTopLevelTabs.ClientID + "', 'do_click_test(a);'); });";

            ScriptManager.RegisterStartupScript(this, this.GetType(), new Guid().ToString(), ss, true);

 

Note that step 2 is dependent on the Microsoft AJAX framework.

 

Hope this helps someone!

Parents
No Data
Reply Children
No Data