User Guide > How to Work with... > ASP.NET > Displaying Images using 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); |