BindingManager Object


The BindingManager is a global object that manages custom bindings for LEADVIEW.

function lt.LEADVIEW.BindingManager 
class lt.LEADVIEW.BindingManager() 

LEADVIEW's BindingManager contains a simple set of API methods that allows users to bind custom functionality to existing LEADVIEW components. Bindings should be set in the manager before calling

Note: Changing the binding for a UI component does not affect the component's state. For instance, binding the Previous Page Button will not prevent the button from becoming disabled if there is no previous page in the view.

export class BindingManagerExample { 
   public constructor() { 
      if (lt.RasterSupport.kernelExpired) 
         lt.RasterSupport.setLicenseUri("", "EVAL", null); 
   public run = (divID: string): void => { 
      const lv = new lt.LEADVIEW.Viewer();, { 
         'rootDivId': divID 
   public rebind = () => { 
       * The BindingManager handles overwriting any default LEADVIEW button functionality. 
       * We recommend that you setup bindings before calling; 
      const manager = lt.LEADVIEW.BindingManager.Instance; 
       * The binding contract to apply to one of LEADVIEW's components. 
      const binding: lt.LEADVIEW.LVBinding = { 
         onClick: () => alert('Custom Click!'), 
         tooltip: 'Custom Tooltip!', 
         class: 'lv-custom-class' 
         * A full list of all keys available for binding can be retrieved by calling 
         * BindingManager.getAllAvailableKeys().  This will return an array of all available keys. 
         * To check and see if a key is supported in LEADVIEW, just call BindingManager.isSupported(). 
         * Any string key value can be set in the manager, but the key will only be consumed internally by LEADVIEW 
         * if isSupported = true. 
         * For the purposes of this example, we will just loop through every available key, and apply our custom binding. 
      manager.getAllAvailableKeys().forEach(key => { 
         if(!manager.isSupported(key)) return; 
         manager.add(key, binding, true); 
<!doctype html> 
<html lang="en"> 
    <title>LV Examples | Binding Manager</title> 
        <script src="" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
        <script src="../LT/Leadtools.js"></script> 
        <script src="../LT/Leadtools.Controls.js"></script> 
        <script src="../LT/Leadtools.Annotations.Engine.js"></script> 
        <script src="../LT/Leadtools.Annotations.Designers.js"></script> 
        <script src="../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
        <script src="../LT/Leadtools.Annotations.Automation.js"></script> 
        <script src="../LT/Leadtools.ImageProcessing.Main.js"></script> 
        <script src="../LT/Leadtools.ImageProcessing.Color.js"></script> 
        <script src="../LT/Leadtools.ImageProcessing.Core.js"></script> 
        <script src="../LT/Leadtools.ImageProcessing.Effects.js"></script> 
        <script src="../LT/Leadtools.Document.js"></script> 
        <script src="../LT/Leadtools.Document.Viewer.js"></script> 
        <script src="../LT/Leadtools.LEADVIEW.js" defer></script> 
        <link href="../css/Leadtools.LEADVIEW.css" type="text/css" rel="stylesheet"> 
        <!-- All typescript files compiled from /src/ will be bundled and dropped into the root folder `bundle.js`--> 
        <script src="../bundle.js" type="text/javascript"></script> 
        <div id="runDemo" style="width: 100%; height: 100vh;"></div> 
       window.onload = () => { 
         const example = new window.examples.BindingManagerExample(); "runDemo"); 

Target Platforms

Help Version 23.0.2024.2.29
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2024 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.LEADVIEW Assembly

Products | Support | Contact Us | Intellectual Property Notices
© 1991-2023 LEAD Technologies, Inc. All Rights Reserved.