ImageGear .NET v24.12 - Updated
Working with Check and Radio Handlers
User Guide > How to Work with... > Common Operations > Viewing > Viewing Using ASP.NET > [Legacy] Displaying Images Using Legacy ASP.NET > Context Menu Customization > Working with Check and Radio Handlers

The following example shows how to create new context menu items and popup groups with checkHandler and radioHandler callbacks. The context menu items are intentionally created explicitly and implicitly for the purpose of demonstration.

For Ajax server users, please comment out the first portion of the code below and uncomment the second.

Example
Copy Code
// get PageView control with "pluginPageView" identifier from the HTML page in jQuery plugin
var pageView = $("#pluginPageView").ImGearPageViewPlugin();
// get PageView control with "pluginPageView" identifier from the HTML page for Ajax server
//var pageView = $.find("pluginPageView");
 
// define scroll bars popup menu item
var scrollBarsPopup = new ImageGear.Web.UI.ContextMenuItem(
    ImageGear.Web.UI.ContextMenuItemType.Popup,
    'Scroll Bars Mode',
    [
        {
            type: ImageGear.Web.UI.ContextMenuItemType.UserMenuItem,
            text: 'Auto',
            clickHandler: function (pageView, mark) { pageView.set_scrollBars(ImageGear.Web.UI.ScrollBars.Auto); },
            radioHandler: function (pageView, mark) { return pageView.get_scrollBars() == ImageGear.Web.UI.ScrollBars.Auto; }
        },
        {
            type: ImageGear.Web.UI.ContextMenuItemType.UserMenuItem,
            text: 'Both',
            clickHandler: function (pageView, mark) { pageView.set_scrollBars(ImageGear.Web.UI.ScrollBars.Both); },
            radioHandler: function (pageView, mark) { return pageView.get_scrollBars() == ImageGear.Web.UI.ScrollBars.Both; }
        },
        {
            type: ImageGear.Web.UI.ContextMenuItemType.UserMenuItem,
            text: 'None',
            clickHandler: function (pageView, mark) { pageView.set_scrollBars(ImageGear.Web.UI.ScrollBars.None); },
            radioHandler: function (pageView, mark) { return pageView.get_scrollBars() == ImageGear.Web.UI.ScrollBars.None; }
        }
    ],
    null, null, null
);
 
// define vectorFormatsRendering as a boolean checkbox item
var vectorFormatsRendering = {
    type: ImageGear.Web.UI.ContextMenuItemType.UserMenuItem,
    text: 'Vector Formats as Raster',
    clickHandler: function (pageView, mark) {
        if (pageView.get_vectorFormatsRendering() == ImageGear.Web.UI.VectorFormatsRendering.Raster)
            pageView.set_vectorFormatsRendering(ImageGear.Web.UI.VectorFormatsRendering.SVG);
        else
            pageView.set_vectorFormatsRendering(ImageGear.Web.UI.VectorFormatsRendering.Raster);
    },
    checkHandler: function (pageView, mark) { return pageView.get_vectorFormatsRendering() == ImageGear.Web.UI.VectorFormatsRendering.Raster; }
};
 
// get context menu for None mouse tool and no mark clicked conditions
var contextMenu = pageView.getContextMenu(null, ImageGear.Web.UI.MouseTool.RectangleZoom);
 
// append separator
contextMenu.insert(5,
{ type: ImageGear.Web.UI.ContextMenuItemType.Separator }
);
contextMenu.insert(6, vectorFormatsRendering);
contextMenu.insert(7, scrollBarsPopup);
 
// set reorganized menu back
pageView.setContextMenuForTool(contextMenu, null, ImageGear.Web.UI.MouseTool.RectangleZoom);