ImageGear .NET v25.2 - Updated
Developer 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
In This Topic
    Working with Check and Radio Handlers
    In This Topic

    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);