Using the Context Menu Customization API for Multiple Controls

If you are using more than one PageView control and you want to use the same customized menu for all of them, you can get and customize the context menu for one control and then set that menu to all controls. The following example shows how to change context menu items from 'Zoom_In_25%' and 'Zoom_Out_25%' to 'Zoom_In_50%' and 'Zoom_Out_50%' accordingly for ten PageView controls on the page.

Example	Copy Code
// get the list of PageView controls with "pluginPageView_X" identifier // from the HTML page in jQuery plugin var pageViewControls = []; for (var i = 1; i <= 10; i++) { pageViewControls.push($("#pluginPageView_" + i).ImGearPageViewPlugin()); } // get the list of PageView controls with "pluginPageView_X" identifier // from the HTML page in Ajax server //var pageViewControls = []; //for (var i = 1; i <= 10; i++) { // pageViewControls.push($.find("pluginPageView_" + i)); //} // get context menu of the first control var contextMenu = pageViewControls[0].getDefaultContextMenu(null); // change context menu var item = contextMenu.get(0); item.text = 'Zoom In 50%'; item.type = ImageGear.Web.UI.ContextMenuItemType.UserMenuItem; item.clickHandler = function (pageView, mark) { pageView.zoomIn(1.5); } var item = contextMenu.get(1); item.text = 'Zoom Out 50%'; item.type = ImageGear.Web.UI.ContextMenuItemType.UserMenuItem; item.clickHandler = function (pageView, mark) { pageView.zoomOut(1.5); } // set reorganized menu to all controls for (var i = 0; i < pageViewControls.length; i++) { pageViewControls[i].setContextMenuForTool(contextMenu, null, ImageGear.Web.UI.MouseTool.None); }

Example

Copy Code

// get the list of PageView controls with "pluginPageView_X" identifier
// from the HTML page in jQuery plugin
var pageViewControls = [];
for (var i = 1; i <= 10; i++) {
    pageViewControls.push($("#pluginPageView_" + i).ImGearPageViewPlugin());
}
// get the list of PageView controls with "pluginPageView_X" identifier
// from the HTML page in Ajax server
//var pageViewControls = [];
//for (var i = 1; i <= 10; i++) {
//    pageViewControls.push($.find("pluginPageView_" + i));
//}
 
// get context menu of the first control
var contextMenu = pageViewControls[0].getDefaultContextMenu(null);
 
// change context menu
var item = contextMenu.get(0);
item.text = 'Zoom In 50%';
item.type = ImageGear.Web.UI.ContextMenuItemType.UserMenuItem;
item.clickHandler = function (pageView, mark) { pageView.zoomIn(1.5); }
var item = contextMenu.get(1);
item.text = 'Zoom Out 50%';
item.type = ImageGear.Web.UI.ContextMenuItemType.UserMenuItem;
item.clickHandler = function (pageView, mark) { pageView.zoomOut(1.5); }
 
// set reorganized menu to all controls
for (var i = 0; i < pageViewControls.length; i++) {
    pageViewControls[i].setContextMenuForTool(contextMenu, null, ImageGear.Web.UI.MouseTool.None);
}